@camunda/camunda-composite-components 0.22.7 → 0.23.0

package/lib/esm/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@camunda/camunda-composite-components",
-    "version": "0.22.7",
+    "version": "0.23.0",
     "description": "Camunda Composite Components",
     "bugs": {
         "url": "https://github.com/camunda/camunda-cloud-management-apps/issues"
@@ -55,38 +55,38 @@
         "semver": "7.7.4"
     },
     "devDependencies": {
-        "@auth0/auth0-spa-js": "2.18.0",
+        "@auth0/auth0-spa-js": "2.19.0",
         "@camunda/ccma-shared-types": "workspace:*",
         "@carbon/react": "1.103.0",
         "@chromatic-com/storybook": "5.1.1",
         "@mdx-js/react": "3.1.1",
-        "@playwright/test": "1.58.2",
-        "@storybook/addon-a11y": "10.3.3",
-        "@storybook/addon-docs": "10.3.3",
-        "@storybook/addon-links": "10.3.3",
-        "@storybook/addon-vitest": "10.3.3",
-        "@storybook/react": "10.3.3",
-        "@storybook/react-vite": "10.3.3",
-        "@vitest/browser": "4.1.1",
-        "@vitest/browser-playwright": "4.1.1",
-        "vitest": "4.1.1",
-        "conventional-changelog-conventionalcommits": "9.3.0",
+        "@playwright/test": "1.59.1",
+        "@storybook/addon-a11y": "10.3.5",
+        "@storybook/addon-docs": "10.3.5",
+        "@storybook/addon-links": "10.3.5",
+        "@storybook/addon-vitest": "10.3.5",
+        "@storybook/react": "10.3.5",
+        "@storybook/react-vite": "10.3.5",
+        "@vitest/browser": "4.1.4",
+        "@vitest/browser-playwright": "4.1.4",
+        "vitest": "4.1.4",
+        "conventional-changelog-conventionalcommits": "9.3.1",
         "eslint-import-resolver-typescript": "4.4.4",
         "eslint-plugin-react": "7.37.5",
         "eslint-plugin-react-hooks": "7.0.1",
-        "eslint-plugin-storybook": "10.3.3",
+        "eslint-plugin-storybook": "10.3.5",
         "event-source-polyfill": "1.0.31",
-        "mixpanel-browser": "2.77.0",
-        "playwright": "1.58.2",
-        "react": "19.2.4",
-        "react-dom": "19.2.4",
-        "react-is": "19.2.4",
+        "mixpanel-browser": "2.78.0",
+        "playwright": "1.59.1",
+        "react": "19.2.5",
+        "react-dom": "19.2.5",
+        "react-is": "19.2.5",
         "rimraf": "6.1.3",
         "serve": "14.2.6",
-        "storybook": "10.3.3",
-        "styled-components": "6.3.12",
-        "typescript-eslint": "8.57.2",
-        "wait-on": "9.0.4"
+        "storybook": "10.3.5",
+        "styled-components": "6.4.0",
+        "typescript-eslint": "8.58.1",
+        "wait-on": "9.0.5"
     },
     "peerDependencies": {
         "@carbon/react": "1.x",

package/lib/esm/src/components/c3-cluster-tag/c3-cluster-tag.d.ts

@@ -3,4 +3,5 @@ import type { C3ClusterTagProps, C3ClusterTagWithClusterNameProps, CamundaCluste
 export type TagColor = 'green' | 'blue' | 'purple' | 'red' | 'cool-gray' | 'magenta' | 'cyan' | 'teal' | 'gray' | 'warm-gray' | 'high-contrast' | 'outline';
 export declare const C3ClusterTagWithClusterName: FC<C3ClusterTagWithClusterNameProps>;
 export declare const C3ClusterTag: FC<C3ClusterTagProps>;
+export declare function getShortStageLabel(stage: CamundaClusterStage): string;
 export declare function getColorForStage(stage: CamundaClusterStage): TagColor | undefined;

package/lib/esm/src/components/c3-cluster-tag/c3-cluster-tag.js

@@ -52,19 +52,40 @@ export const C3ClusterTagWithClusterName = (props) => {
 };
 export const C3ClusterTag = (props) => {
     const { clusters } = useC3Profile();
-    return 'stage' in props ? (_jsx(Tag, { type: getColorForStage(props.stage), children: props.stage })) : 'clusterUuid' in props ? (generateFromInput({
+    const subtle = props.subtle ?? false;
+    return 'stage' in props ? (renderStageTag(props.stage, subtle)) : 'clusterUuid' in props ? (generateFromInput({
         clusterUuid: props.clusterUuid,
         allClusters: clusters,
         conditionalRendering: props.conditionalRendering || (() => true),
+        subtle,
     })) : (_jsx(_Fragment, {}));
 };
+function renderStageTag(stage, subtle) {
+    if (subtle) {
+        return (_jsx(Tag, { type: 'gray', size: 'sm', style: { color: 'var(--cds-text-secondary)' }, children: getShortStageLabel(stage) }));
+    }
+    return _jsx(Tag, { type: getColorForStage(stage), children: stage });
+}
+export function getShortStageLabel(stage) {
+    switch (stage) {
+        case 'dev':
+            return 'Dev';
+        case 'test':
+            return 'Test';
+        case 'stage':
+            return 'Stage';
+        case 'prod':
+            return 'Prod';
+        default:
+            return stage;
+    }
+}
 function generateFromInput(props) {
     const foundCluster = props.allClusters?.find((cluster) => cluster.uuid === props.clusterUuid);
     if (foundCluster?.labels?.camunda &&
         foundCluster?.labels?.camunda?.length > 0) {
         const label = foundCluster.labels.camunda[0];
-        return getColorForStage(label) &&
-            props.conditionalRendering(label) ? (_jsx(Tag, { type: getColorForStage(label), children: label })) : (_jsx(_Fragment, {}));
+        return getColorForStage(label) && props.conditionalRendering(label) ? (renderStageTag(label, props.subtle)) : (_jsx(_Fragment, {}));
     }
     return _jsx(_Fragment, {});
 }

package/lib/esm/src/components/c3-cluster-tag/c3-cluster-tag.types.d.ts

@@ -12,6 +12,7 @@ export type C3ClusterTagProps = ({
     stage: CamundaClusterStage;
 }) & {
     conditionalRendering?: (stage: CamundaClusterStage) => boolean;
+    subtle?: boolean;
 };
 export type C3ClusterTagWithClusterNameProps = ({
     clusterUuid: string;

package/lib/esm/src/components/c3-license-tag/c3-license-tag.d.ts

@@ -0,0 +1,17 @@
+import type { JSX } from 'react';
+export interface C3LicenseTagProps {
+    /** Whether the license is a production license. */
+    isProductionLicense: boolean;
+    /** Whether the license is commercial. When false, shows non-commercial variants. */
+    isCommercial?: boolean;
+    /** License expiry as a Unix timestamp (ms) or ISO date string. */
+    expiresAt?: number | string;
+}
+/**
+ * Renders a license status tag for the Camunda header. Handles all license
+ * states: production, non-production (with tooltip), non-commercial,
+ * non-commercial expiring (with countdown), and non-commercial expired.
+ *
+ * Drop into `headerTrailingContent` of C3NavigationV2.
+ */
+export declare const C3LicenseTag: (props: C3LicenseTagProps) => JSX.Element | null;

package/lib/esm/src/components/c3-license-tag/c3-license-tag.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Link, Tag, Toggletip, ToggletipButton, ToggletipContent, } from '@carbon/react';
+import { Time, Warning } from '@carbon/react/icons/index.esm.js';
+const NON_PRODUCTION_TERMS_LINK = 'https://legal.camunda.com/#self-managed-non-production-terms';
+const SALES_CONTACT_LINK = 'https://camunda.com/contact/';
+const DAY = 1000 * 60 * 60 * 24;
+const LICENSE_EXPIRY_THRESHOLD = DAY * 30;
+function resolveExpiresAt(value) {
+    if (value === undefined)
+        return undefined;
+    if (typeof value === 'string')
+        return Date.parse(value);
+    return value;
+}
+function getTagVariant(props) {
+    const { isProductionLicense, isCommercial, expiresAt: rawExpiresAt } = props;
+    const expiresAt = resolveExpiresAt(rawExpiresAt);
+    const now = Date.now();
+    // Non-commercial expired
+    if (isCommercial === false && expiresAt !== undefined && expiresAt < now) {
+        return {
+            label: 'Non-commercial license - expired',
+            color: 'red',
+            icon: Warning,
+            tooltip: (_jsx("p", { children: "To continue using all features, please renew your license." })),
+        };
+    }
+    // Non-commercial about to expire (within 30 days)
+    if (isCommercial === false &&
+        expiresAt !== undefined &&
+        expiresAt - LICENSE_EXPIRY_THRESHOLD < now &&
+        expiresAt > now) {
+        const daysLeft = Math.floor((expiresAt - now) / DAY);
+        return {
+            label: `Non-commercial license - ${daysLeft} ${daysLeft > 1 ? 'days' : 'day'} left`,
+            color: 'blue',
+            icon: Time,
+            tooltip: (_jsx("p", { children: "Please renew and provide new license keys to continue production use of Camunda." })),
+        };
+    }
+    // Non-commercial (not expiring soon or no expiry)
+    if (isCommercial === false &&
+        (expiresAt === undefined || expiresAt - LICENSE_EXPIRY_THRESHOLD >= now)) {
+        return {
+            label: 'Non-commercial license',
+            color: 'gray',
+        };
+    }
+    // Production or non-production license
+    return {
+        label: isProductionLicense
+            ? 'Production license'
+            : 'Non-production license',
+        color: 'gray',
+        tooltip: isProductionLicense ? undefined : (_jsxs("p", { children: ["Non-production license. For production usage details, visit our", ' ', _jsx(Link, { href: NON_PRODUCTION_TERMS_LINK, target: '_blank', rel: 'noopener noreferrer', style: { display: 'inline' }, children: "terms & conditions page" }), ' ', "or", ' ', _jsx(Link, { href: SALES_CONTACT_LINK, target: '_blank', rel: 'noopener noreferrer', style: { display: 'inline' }, children: "contact our sales team" }), "."] })),
+    };
+}
+/**
+ * Renders a license status tag for the Camunda header. Handles all license
+ * states: production, non-production (with tooltip), non-commercial,
+ * non-commercial expiring (with countdown), and non-commercial expired.
+ *
+ * Drop into `headerTrailingContent` of C3NavigationV2.
+ */
+export const C3LicenseTag = (props) => {
+    const variant = getTagVariant(props);
+    if (!variant)
+        return null;
+    const { label, color, icon, tooltip } = variant;
+    if (tooltip) {
+        return (_jsxs(Toggletip, { align: 'bottom', children: [_jsx(ToggletipButton, { as: 'span', label: label, children: _jsx(Tag, { type: color, renderIcon: icon, style: { margin: 0, cursor: 'pointer' }, children: label }) }), _jsx(ToggletipContent, { children: tooltip })] }));
+    }
+    return (_jsx(Tag, { type: color, renderIcon: icon, style: { margin: 0 }, children: label }));
+};

package/lib/esm/src/components/c3-license-tag/index.d.ts

@@ -0,0 +1 @@
+export { C3LicenseTag, type C3LicenseTagProps } from './c3-license-tag';

package/lib/esm/src/components/c3-license-tag/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export { C3LicenseTag } from './c3-license-tag.js';

package/lib/esm/src/components/c3-navigation/c3-org-sidebar/components.d.ts

@@ -1,6 +1,5 @@
-import type { DropdownProps } from '@carbon/react/lib/components/Dropdown/Dropdown';
-import type { FC } from 'react';
-import type { Organization } from '../../../utils/camunda.types';
+import { Dropdown } from '@carbon/react';
+import type { ComponentProps, ComponentType, FC } from 'react';
 import type { LoadingStatus } from '../c3-navigation-appbar/c3-navigation-appbar';
 export declare const ActiveOrgWrapperCustom: any;
 export declare const ActiveOrgWrapper: any;
@@ -23,7 +22,7 @@ export declare const ManageOrgOverflowMenu: FC<{
     onManage: () => void;
     onRequestToLeave: () => void;
 }>;
-export declare const StyledDropdown: FC<DropdownProps<Organization> & {
+export declare const StyledDropdown: ComponentType<ComponentProps<typeof Dropdown> & {
     $scrollBarWidth: number;
 }>;
 export declare const OrgListWrapper: any;

package/lib/esm/src/components/c3-navigation-v2/c3-breadcrumb-bar.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from 'react';
+import type { BreadcrumbSegment, LinkComponent } from './c3-navigation-v2.types';
+export interface C3BreadcrumbBarProps {
+    segments: BreadcrumbSegment[];
+    linkComponent?: LinkComponent;
+}
+export declare const C3BreadcrumbBar: ({ segments, linkComponent, }: C3BreadcrumbBarProps) => JSX.Element;

package/lib/esm/src/components/c3-navigation-v2/c3-breadcrumb-bar.js

@@ -0,0 +1,371 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Layer } from '@carbon/react';
+import { Checkmark, ChevronDown, OverflowMenuVertical, } from '@carbon/react/icons/index.esm.js';
+import { useCallback, useEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+const SegmentWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  position: relative;
+`;
+const SegmentButton = styled.button `
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: ${(p) => (p.$isInteractive ? 'pointer' : 'default')};
+  color: ${(p) => (p.$isLast ? 'var(--cds-text-primary)' : 'var(--cds-text-secondary)')};
+  font-size: 0.875rem;
+  font-weight: ${(p) => (p.$isLast ? 500 : 400)};
+  text-decoration: none;
+  white-space: nowrap;
+  transition: background 0.15s, color 0.15s;
+
+  &:hover {
+    background: ${(p) => (p.$isInteractive ? 'var(--cds-layer-hover)' : 'transparent')};
+    color: var(--cds-text-primary);
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus);
+    outline-offset: -2px;
+  }
+`;
+const ChevronButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  background: ${(p) => (p.$isOpen ? 'var(--cds-layer-01)' : 'transparent')};
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--cds-icon-secondary);
+  transition: background 0.15s;
+
+  &:hover {
+    background: var(--cds-layer-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus);
+    outline-offset: -2px;
+  }
+
+  svg {
+    transform: ${(p) => (p.$isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
+    transition: transform 0.15s;
+  }
+`;
+const ActionMenuButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  background: ${(p) => (p.$isOpen ? 'var(--cds-layer-01)' : 'transparent')};
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--cds-icon-secondary);
+  transition: background 0.15s;
+
+  &:hover {
+    background: var(--cds-layer-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus);
+    outline-offset: -2px;
+  }
+`;
+const ActionMenuItem = styled.button `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0.625rem 1rem;
+  background: transparent;
+  border: none;
+  border-top: ${(p) => (p.$hasDivider ? '1px solid var(--cds-border-subtle)' : 'none')};
+  cursor: ${(p) => (p.$isDisabled ? 'not-allowed' : 'pointer')};
+  text-align: left;
+  transition: background 0.15s;
+  color: ${(p) => p.$isDisabled
+    ? 'var(--cds-text-disabled)'
+    : p.$isDanger
+        ? 'var(--cds-text-error)'
+        : 'var(--cds-text-primary)'};
+  font-size: 0.875rem;
+  opacity: ${(p) => (p.$isDisabled ? 0.5 : 1)};
+
+  &:hover {
+    background: ${(p) => (p.$isDisabled ? 'transparent' : 'var(--cds-layer-hover)')};
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus);
+    outline-offset: -2px;
+  }
+`;
+const DropdownPanel = styled.div `
+  position: fixed;
+  top: ${(p) => p.$top}px;
+  left: ${(p) => p.$left}px;
+  z-index: 9999;
+  background: var(--cds-layer-01);
+  border-radius: 4px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
+  border: 1px solid var(--cds-border-subtle);
+  min-width: ${(p) => p.$minWidth ?? '240px'};
+  max-height: 400px;
+  overflow-y: auto;
+`;
+const DropdownItem = styled.button `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  background: ${(p) => (p.$isSelected ? 'var(--cds-layer-selected)' : 'transparent')};
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s;
+  color: var(--cds-text-primary);
+  font-size: 0.875rem;
+  text-decoration: none;
+
+  &:hover {
+    background: var(--cds-layer-hover);
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus);
+    outline-offset: -2px;
+  }
+`;
+const DropdownItemLabel = styled.span `
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const Separator = styled.span `
+  display: flex;
+  align-items: center;
+  padding: 0 0.25rem;
+  color: var(--cds-text-secondary);
+  font-size: 0.875rem;
+  user-select: none;
+
+  &::after {
+    content: '/';
+  }
+`;
+const DropdownEntry = ({ item, onSelect, linkComponent, }) => {
+    const Icon = item.icon;
+    return (_jsxs(DropdownItem, { as: item.linkProps?.href !== undefined
+            ? (linkComponent ?? 'a')
+            : item.linkProps
+                ? linkComponent
+                : undefined, ...(item.linkProps ?? {}), "$isSelected": !!item.isSelected, onClick: () => onSelect(item), role: 'option', tabIndex: -1, "aria-selected": !!item.isSelected, children: [Icon && (_jsx(Icon, { size: 16, style: { color: 'var(--cds-icon-secondary)', flexShrink: 0 } })), _jsx(DropdownItemLabel, { children: item.label }), item.trailingElement, item.isSelected && (_jsx(Checkmark, { size: 16, style: { color: 'var(--cds-icon-primary)', flexShrink: 0 } }))] }));
+};
+const DropdownTitle = styled.div `
+  padding: 0.75rem 1rem 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--cds-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  border-bottom: 1px solid var(--cds-border-subtle);
+`;
+const CLOSE_EVENT = 'breadcrumb-dropdown-close';
+function useBreadcrumbDropdown(id) {
+    const [isOpen, setIsOpen] = useState(false);
+    const open = useCallback(() => {
+        document.dispatchEvent(new CustomEvent(CLOSE_EVENT, { detail: id }));
+        setIsOpen(true);
+    }, [id]);
+    const close = useCallback(() => setIsOpen(false), []);
+    const toggle = useCallback(() => {
+        if (isOpen) {
+            close();
+        }
+        else {
+            open();
+        }
+    }, [isOpen, open, close]);
+    useEffect(() => {
+        const handler = (e) => {
+            if (e.detail !== id)
+                setIsOpen(false);
+        };
+        document.addEventListener(CLOSE_EVENT, handler);
+        return () => document.removeEventListener(CLOSE_EVENT, handler);
+    }, [id]);
+    return { isOpen, open, close, toggle };
+}
+function usePanelKeyboard(panelRef, close, returnFocusRef, isOpen, itemSelector) {
+    useEffect(() => {
+        if (!isOpen || !panelRef.current)
+            return;
+        const items = panelRef.current.querySelectorAll(itemSelector);
+        const firstEnabled = Array.from(items).find((el) => !el.disabled);
+        firstEnabled?.focus();
+    }, [isOpen, panelRef, itemSelector]);
+    const handleKeyDown = useCallback((e) => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const items = Array.from(panel.querySelectorAll(itemSelector)).filter((el) => !el.disabled);
+        const currentIndex = items.indexOf(document.activeElement);
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+                items[next]?.focus();
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+                items[prev]?.focus();
+                break;
+            }
+            case 'Home':
+                e.preventDefault();
+                items[0]?.focus();
+                break;
+            case 'End':
+                e.preventDefault();
+                items[items.length - 1]?.focus();
+                break;
+            case 'Tab':
+                e.preventDefault();
+                close();
+                returnFocusRef.current?.focus();
+                break;
+            case 'Escape':
+                close();
+                returnFocusRef.current?.focus();
+                break;
+        }
+    }, [panelRef, close, returnFocusRef, itemSelector]);
+    return handleKeyDown;
+}
+const ActionsMenu = ({ actions, ariaLabel, }) => {
+    const menuId = useRef(`actions-${Math.random().toString(36).slice(2, 8)}`).current;
+    const { isOpen, close, toggle } = useBreadcrumbDropdown(menuId);
+    const buttonRef = useRef(null);
+    const panelRef = useRef(null);
+    const [panelPos, setPanelPos] = useState(undefined);
+    const updatePosition = useCallback(() => {
+        if (buttonRef.current) {
+            const rect = buttonRef.current.getBoundingClientRect();
+            setPanelPos({ top: rect.bottom + 4, left: rect.left });
+        }
+    }, []);
+    const handleClickOutside = useCallback((event) => {
+        const target = event.target;
+        if (buttonRef.current?.contains(target))
+            return;
+        if (target.closest?.('[data-breadcrumb-actions]'))
+            return;
+        close();
+    }, [close]);
+    useEffect(() => {
+        if (isOpen) {
+            updatePosition();
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen, handleClickOutside, updatePosition]);
+    const handleAction = useCallback((action) => {
+        if (action.disabled)
+            return;
+        action.onClick?.();
+        close();
+    }, [close]);
+    const handleKeyDown = usePanelKeyboard(panelRef, close, buttonRef, isOpen, '[role="menuitem"]');
+    return (_jsxs(_Fragment, { children: [_jsx(ActionMenuButton, { ref: buttonRef, "$isOpen": isOpen, onClick: toggle, onKeyDown: (e) => {
+                    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+                        if (!isOpen) {
+                            e.preventDefault();
+                            toggle();
+                        }
+                    }
+                }, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": 'menu', children: _jsx(OverflowMenuVertical, { size: 16 }) }), isOpen &&
+                panelPos &&
+                createPortal(_jsx(Layer, { children: _jsx(DropdownPanel, { ref: panelRef, "data-breadcrumb-actions": true, "$top": panelPos.top, "$left": panelPos.left, "$minWidth": 'auto', role: 'menu', "aria-label": ariaLabel, onKeyDown: handleKeyDown, children: actions.map((action) => (_jsx(ActionMenuItem, { role: 'menuitem', tabIndex: -1, "$isDanger": action.isDanger, "$hasDivider": action.hasDivider, "$isDisabled": action.disabled, disabled: action.disabled, onClick: () => handleAction(action), children: action.label }, action.key))) }) }), document.body)] }));
+};
+const BreadcrumbSegmentComponent = ({ segment, isLast, linkComponent, }) => {
+    const dropdownId = useRef(`dropdown-${Math.random().toString(36).slice(2, 8)}`).current;
+    const { isOpen, close, toggle } = useBreadcrumbDropdown(dropdownId);
+    const wrapperRef = useRef(null);
+    const chevronRef = useRef(null);
+    const dropdownPanelRef = useRef(null);
+    const hasDropdown = segment.dropdownItems && segment.dropdownItems.length > 0;
+    const Icon = segment.icon;
+    const dropdownAriaLabel = segment.dropdownAriaLabel ?? `Switch ${segment.label}`;
+    const [dropdownPos, setDropdownPos] = useState(undefined);
+    const updateDropdownPosition = useCallback(() => {
+        if (wrapperRef.current) {
+            const rect = wrapperRef.current.getBoundingClientRect();
+            setDropdownPos({ top: rect.bottom + 4, left: rect.left });
+        }
+    }, []);
+    const handleClickOutside = useCallback((event) => {
+        const target = event.target;
+        if (wrapperRef.current && !wrapperRef.current.contains(target)) {
+            if (target.closest?.('[data-breadcrumb-dropdown]'))
+                return;
+            close();
+        }
+    }, [close]);
+    useEffect(() => {
+        if (isOpen) {
+            updateDropdownPosition();
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen, handleClickOutside, updateDropdownPosition]);
+    const handleSelect = useCallback((item) => {
+        item.onClick?.();
+        close();
+    }, [close]);
+    const handleDropdownKeyDown = usePanelKeyboard(dropdownPanelRef, close, chevronRef, isOpen, '[role="option"]');
+    return (_jsxs(_Fragment, { children: [_jsxs(SegmentWrapper, { ref: wrapperRef, children: [_jsxs(SegmentButton, { as: segment.linkProps?.href !== undefined
+                            ? (linkComponent ?? 'a')
+                            : segment.linkProps
+                                ? linkComponent
+                                : undefined, ...(segment.linkProps ?? {}), "$isInteractive": !!(segment.onClick || segment.linkProps), "$isLast": isLast, onClick: segment.onClick, "aria-label": segment.label, children: [Icon && _jsx(Icon, { size: 16, style: { flexShrink: 0 } }), _jsx("span", { children: segment.label }), segment.trailingElement] }), segment.menuElement, segment.actions && segment.actions.length > 0 && (_jsx(ActionsMenu, { actions: segment.actions, ariaLabel: `${segment.label} actions` })), hasDropdown && (_jsx(ChevronButton, { ref: chevronRef, "$isOpen": isOpen, onClick: toggle, onKeyDown: (e) => {
+                            if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+                                if (!isOpen) {
+                                    e.preventDefault();
+                                    toggle();
+                                }
+                            }
+                        }, "aria-label": dropdownAriaLabel, "aria-expanded": isOpen, "aria-haspopup": 'listbox', children: _jsx(ChevronDown, { size: 16 }) }))] }), hasDropdown &&
+                isOpen &&
+                dropdownPos &&
+                createPortal(_jsx(Layer, { children: _jsxs(DropdownPanel, { ref: dropdownPanelRef, "data-breadcrumb-dropdown": true, "$top": dropdownPos.top, "$left": dropdownPos.left, role: 'listbox', "aria-label": dropdownAriaLabel, onKeyDown: handleDropdownKeyDown, children: [segment.dropdownTitle && (_jsx(DropdownTitle, { children: segment.dropdownTitle })), segment.dropdownItems?.map((item) => (_jsx(DropdownEntry, { item: item, onSelect: handleSelect, linkComponent: linkComponent }, item.key)))] }) }), document.body), !isLast && _jsx(Separator, { "aria-hidden": 'true' })] }));
+};
+const BreadcrumbBarWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  padding-left: 0.5rem;
+`;
+export const C3BreadcrumbBar = ({ segments, linkComponent, }) => (_jsx(BreadcrumbBarWrapper, { role: 'navigation', "aria-label": 'Breadcrumb', children: segments.map((segment, index) => (_jsx(BreadcrumbSegmentComponent, { segment: segment, isLast: index === segments.length - 1, linkComponent: linkComponent }, segment.key))) }));

package/lib/esm/src/components/c3-navigation-v2/c3-navigation-v2.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from 'react';
+import type { C3NavigationV2Props } from './c3-navigation-v2.types';
+/**
+ * Sets CSS custom properties on :root so consumers can derive layout offsets
+ * without hard-coding pixel values:
+ *   --c3-header-height: height of the fixed header (always 3rem)
+ *   --c3-sidebar-width: current sidebar width (updates on expand/collapse)
+ */
+export declare const C3NavigationV2: ({ app, skipToContentTargetId, skipToContentLabel, headerAriaLabel, breadcrumbs, tools, globalActions, sidebar, linkComponent, headerTrailingContent, activeToolKey, onActiveToolChange, }: C3NavigationV2Props) => JSX.Element;