@camunda/camunda-composite-components 0.23.4 → 0.25.0

package/lib/esm/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@camunda/camunda-composite-components",
-    "version": "0.23.4",
+    "version": "0.25.0",
     "description": "Camunda Composite Components",
     "bugs": {
         "url": "https://github.com/camunda/camunda-cloud-management-apps/issues"
@@ -50,42 +50,42 @@
     },
     "dependencies": {
         "jwt-decode": "4.0.0",
-        "react-error-boundary": "6.1.1",
+        "react-error-boundary": "6.1.2",
         "react-markdown": "10.1.0",
-        "semver": "7.8.0"
+        "semver": "7.8.4"
     },
     "devDependencies": {
-        "@auth0/auth0-spa-js": "2.19.3",
+        "@auth0/auth0-spa-js": "2.21.1",
         "@camunda/ccma-shared-types": "workspace:*",
-        "@carbon/react": "1.107.1",
+        "@carbon/react": "1.109.0",
         "@chromatic-com/storybook": "5.2.1",
         "@mdx-js/react": "3.1.1",
         "@playwright/test": "1.60.0",
-        "@storybook/addon-a11y": "10.4.0",
-        "@storybook/addon-docs": "10.4.0",
-        "@storybook/addon-links": "10.4.0",
-        "@storybook/addon-vitest": "10.4.0",
-        "@storybook/react": "10.4.0",
-        "@storybook/react-vite": "10.4.0",
-        "@vitest/browser": "4.1.7",
-        "@vitest/browser-playwright": "4.1.7",
-        "vitest": "4.1.7",
+        "@storybook/addon-a11y": "10.4.3",
+        "@storybook/addon-docs": "10.4.3",
+        "@storybook/addon-links": "10.4.3",
+        "@storybook/addon-vitest": "10.4.3",
+        "@storybook/react": "10.4.3",
+        "@storybook/react-vite": "10.4.3",
+        "@vitest/browser": "4.1.8",
+        "@vitest/browser-playwright": "4.1.8",
+        "vitest": "4.1.8",
         "conventional-changelog-conventionalcommits": "9.3.1",
-        "eslint-import-resolver-typescript": "4.4.4",
+        "eslint-import-resolver-typescript": "4.4.5",
         "eslint-plugin-react": "7.37.5",
         "eslint-plugin-react-hooks": "7.1.1",
-        "eslint-plugin-storybook": "10.4.0",
+        "eslint-plugin-storybook": "10.4.3",
         "event-source-polyfill": "1.0.31",
-        "mixpanel-browser": "2.79.0",
+        "mixpanel-browser": "2.80.0",
         "playwright": "1.60.0",
-        "react": "19.2.6",
-        "react-dom": "19.2.6",
-        "react-is": "19.2.6",
+        "react": "19.2.7",
+        "react-dom": "19.2.7",
+        "react-is": "19.2.7",
         "rimraf": "6.1.3",
         "serve": "14.2.6",
-        "storybook": "10.4.0",
+        "storybook": "10.4.3",
         "styled-components": "6.4.2",
-        "typescript-eslint": "8.59.4",
+        "typescript-eslint": "8.61.0",
         "wait-on": "9.0.10"
     },
     "peerDependencies": {

package/lib/esm/src/assets/c3-icons.d.ts

@@ -1,5 +1,5 @@
 import type { C3IconProps } from './c3-icons.types';
-export declare const C3AppMenuIcon: ({ size }: C3IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const C3NotificationsUnreadIcon: ({ size }: C3IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const C3BellIcon: ({ size }: C3IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const CamundaLogo: () => import("react/jsx-runtime").JSX.Element;
+export declare const C3AppMenuIcon: ({ size }: C3IconProps) => import("react").JSX.Element;
+export declare const C3NotificationsUnreadIcon: ({ size }: C3IconProps) => import("react").JSX.Element;
+export declare const C3BellIcon: ({ size }: C3IconProps) => import("react").JSX.Element;
+export declare const CamundaLogo: () => import("react").JSX.Element;

package/lib/esm/src/components/c3-app-teaser/app-teaser-cards.d.ts

@@ -13,5 +13,5 @@ type AppTeaserCardsProps = {
     };
     subtext: string;
 };
-export declare const AppTeaserCards: ({ title, subtitle, cards, cta, subtext, }: AppTeaserCardsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AppTeaserCards: ({ title, subtitle, cards, cta, subtext, }: AppTeaserCardsProps) => JSX.Element;
 export {};

package/lib/esm/src/components/c3-help-center/help-center-hint.d.ts

@@ -1,4 +1,4 @@
 import type { JSX } from 'react';
 export declare const HelpCenterHint: ({ children }: {
     children: JSX.Element;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => JSX.Element;

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

@@ -8,10 +8,9 @@ export interface C3LicenseTagProps {
     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.
+ * Renders license status tags for the Camunda header. Mirrors V1 c3-navigation:
+ * always renders a production-status tag, plus a non-commercial tag (or its
+ * expiring/expired variant) when isCommercial === false. Drop the element 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

@@ -17,63 +17,74 @@ function resolveExpiresAt(value) {
         return Date.parse(value);
     return value;
 }
-function getTagVariant(props) {
+// Matches V1 c3-navigation: production-status tag is always shown, and a
+// non-commercial tag is shown additionally when isCommercial === false. They
+// stack rather than override each other.
+function getTagVariants(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 {
+    const variants = [];
+    variants.push({
+        key: 'license-tag',
         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" }), "."] })),
-    };
+    });
+    if (isCommercial === false) {
+        if (expiresAt !== undefined && expiresAt < now) {
+            variants.push({
+                key: 'non-commercial-license-tag-is-expired',
+                label: 'Non-commercial license - expired',
+                color: 'red',
+                icon: Warning,
+                tooltip: (_jsx("p", { children: "To continue using all features, please renew your license." })),
+            });
+        }
+        else if (expiresAt !== undefined &&
+            expiresAt - LICENSE_EXPIRY_THRESHOLD < now &&
+            expiresAt > now) {
+            const daysLeft = Math.floor((expiresAt - now) / DAY);
+            variants.push({
+                key: 'non-commercial-license-tag-about-to-expire',
+                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." })),
+            });
+        }
+        else {
+            variants.push({
+                key: 'non-commercial-license-tag',
+                label: 'Non-commercial license',
+                color: 'gray',
+            });
+        }
+    }
+    return variants;
+}
+function renderVariant(variant) {
+    const { key, 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 })] }, key));
+    }
+    return (_jsx(Tag, { type: color, renderIcon: icon, style: { margin: 0 }, children: label }, key));
 }
 /**
- * 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.
+ * Renders license status tags for the Camunda header. Mirrors V1 c3-navigation:
+ * always renders a production-status tag, plus a non-commercial tag (or its
+ * expiring/expired variant) when isCommercial === false. Drop the element into
+ * `headerTrailingContent` of C3NavigationV2.
  */
 export const C3LicenseTag = (props) => {
-    const variant = getTagVariant(props);
-    if (!variant)
+    const variants = getTagVariants(props);
+    if (variants.length === 0)
         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 }));
+    return (_jsx("span", { style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 'var(--cds-spacing-02)',
+        }, children: variants.map(renderVariant) }));
 };

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

@@ -173,7 +173,7 @@ const Separator = styled.span `
 const DropdownEntry = ({ item, onSelect, linkComponent, }) => {
     const Icon = item.icon;
     return (_jsxs(DropdownItem, { as: item.linkProps?.href !== undefined
-            ? (linkComponent ?? 'a')
+            ? '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 } }))] }));
@@ -345,7 +345,7 @@ const BreadcrumbSegmentComponent = ({ segment, isLast, linkComponent, }) => {
     }, [close]);
     const handleDropdownKeyDown = usePanelKeyboard(dropdownPanelRef, close, chevronRef, isOpen, '[role="option"]');
     return (_jsxs(_Fragment, { children: [_jsxs(SegmentWrapper, { ref: wrapperRef, children: [_jsxs(SegmentButton, { ref: segmentButtonRef, as: segment.linkProps?.href !== undefined
-                            ? (linkComponent ?? 'a')
+                            ? 'a'
                             : segment.linkProps
                                 ? linkComponent
                                 : undefined, ...(segment.linkProps ?? {}), "$isInteractive": !!(segment.onClick || segment.linkProps), "$isLast": isLast, onClick: segment.onClick, "aria-label": segment.label, title: segment.label, children: [Icon && _jsx(Icon, { size: 16, style: { flexShrink: 0 } }), _jsx(SegmentLabel, { 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) => {

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

@@ -18,9 +18,13 @@ const StyledHeader = styled(Header) `
   z-index: 8001 !important;
 
   // Carbon defaults the tools area to flex: 1, which splits the row
-  // 50/50 with breadcrumbs. Make it intrinsic instead.
+  // 50/50 with breadcrumbs. Make it intrinsic and pin it to the right
+  // (margin-inline-start: auto) so the tools stay flush right even
+  // when the breadcrumb bar is absent — loading state, or routes that
+  // don't publish breadcrumbs.
   .cds--header__global {
     flex: 0 0 auto;
+    margin-inline-start: auto;
   }
 `;
 const LogoSection = styled.a `
@@ -63,7 +67,7 @@ export const C3NavigationV2 = ({ app, skipToContentTargetId, skipToContentLabel
             root.style.removeProperty('--c3-sidebar-width');
         };
     }, [sidebarWidth]);
-    return (_jsxs(_Fragment, { children: [_jsxs(StyledHeader, { "aria-label": ariaLabel, children: [_jsx(SkipToContent, { href: `#${skipToContentTargetId}`, children: skipToContentLabel }), _jsxs(LogoSection, { as: app.linkProps ? LinkEl : 'div', ...(app.linkProps ?? {}), children: [_jsx(CamundaLogo, { "aria-label": 'Camunda' }), app.name && _jsx("span", { children: app.name })] }), breadcrumbs && breadcrumbs.length > 0 && (_jsx(C3BreadcrumbBar, { segments: breadcrumbs, linkComponent: LinkEl })), _jsxs(HeaderGlobalBar, { children: [headerTrailingContent && (_jsx("span", { style: {
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledHeader, { "aria-label": ariaLabel, children: [_jsx(SkipToContent, { href: `#${skipToContentTargetId}`, children: skipToContentLabel }), _jsx(LogoSection, { as: app.linkProps ? LinkEl : 'div', "aria-label": app.name ? `Camunda ${app.name}` : 'Camunda', ...(app.linkProps ?? {}), children: _jsx(CamundaLogo, {}) }), breadcrumbs && breadcrumbs.length > 0 && (_jsx(C3BreadcrumbBar, { segments: breadcrumbs, linkComponent: LinkEl })), _jsxs(HeaderGlobalBar, { children: [headerTrailingContent && (_jsx("span", { style: {
                                     display: 'flex',
                                     alignItems: 'center',
                                     padding: '0 var(--cds-spacing-03)',

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

@@ -147,6 +147,19 @@ export interface SidebarSection {
     compact?: boolean;
 }
 export type SidebarNode = SidebarItem | SidebarGroupItem | SidebarGroup | SidebarSection;
+export interface SidebarLabels {
+    /** Toggle button text when expanded. Defaults to `'Collapse'`. */
+    collapse?: string;
+    /** Tooltip on the collapsed toggle button. Defaults to `'Expand'`. */
+    expand?: string;
+    /** Aria-label on the toggle button. Receives `isExpanded`. Defaults to `'Collapse sidebar'` / `'Expand sidebar'`. */
+    toggleAriaLabel?: (isExpanded: boolean) => string;
+    /** Aria-label on a group's chevron. Receives `{label, isExpanded}`. Defaults to `'Collapse {label}'` / `'Expand {label}'`. */
+    groupToggleAriaLabel?: (args: {
+        label: string;
+        isExpanded: boolean;
+    }) => string;
+}
 export interface SidebarProps {
     ariaLabel: string;
     children: SidebarNode[];
@@ -155,6 +168,7 @@ export interface SidebarProps {
     expandedWidth?: string;
     collapsedWidth?: string;
     linkComponent?: LinkComponent;
+    labels?: SidebarLabels;
 }
 export interface AppProps {
     name?: string;

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

@@ -5,4 +5,4 @@ import type { SidebarProps } from './c3-navigation-v2.types';
  * Loose items (not wrapped in a section) are valid and behave as an implicit
  * untitled group at the top.
  */
-export declare const C3Sidebar: ({ ariaLabel, children: nodes, isExpanded, onToggleExpanded, expandedWidth, collapsedWidth, linkComponent, }: SidebarProps) => JSX.Element;
+export declare const C3Sidebar: ({ ariaLabel, children: nodes, isExpanded, onToggleExpanded, expandedWidth, collapsedWidth, linkComponent, labels, }: SidebarProps) => JSX.Element;

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

@@ -6,8 +6,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Popover, PopoverContent } from '@carbon/react';
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, } from '@carbon/react/icons/index.esm.js';
-import { useEffect, useRef, useState } from 'react';
+import { createContext, useContext, useEffect, useRef, useState, } from 'react';
 import styled, { css } from 'styled-components';
+const SidebarLabelsContext = createContext({
+    groupToggleAria: ({ label, isExpanded }) => isExpanded ? `Collapse ${label}` : `Expand ${label}`,
+});
+const useSidebarLabels = () => useContext(SidebarLabelsContext);
 const SidebarNav = styled.nav `
   position: fixed;
   top: 3rem;
@@ -36,13 +40,12 @@ const NavButton = styled.button `
   flex-wrap: nowrap;
   gap: var(--cds-spacing-04);
   width: 100%;
-  min-height: 2.5rem;
+  height: var(--cds-spacing-09);
+  box-sizing: border-box;
   padding: ${(p) => {
     if (p.$depth > 0)
-        return `0.625rem var(--cds-spacing-05) 0.625rem ${0.75 + p.$depth * 1.75}rem`;
-    return p.$isExpanded
-        ? 'var(--cds-spacing-04) var(--cds-spacing-05)'
-        : 'var(--cds-spacing-04)';
+        return `0 var(--cds-spacing-05) 0 ${0.75 + p.$depth * 1.75}rem`;
+    return p.$isExpanded ? '0 var(--cds-spacing-05)' : '0';
 }};
   justify-content: ${(p) => (p.$isExpanded ? 'flex-start' : 'center')};
   background: ${(p) => (p.$isActive ? 'var(--cds-layer-selected)' : 'transparent')};
@@ -86,7 +89,8 @@ const GroupHeader = styled.div `
   align-items: center;
   flex-wrap: nowrap;
   width: 100%;
-  min-height: 2.5rem;
+  height: var(--cds-spacing-09);
+  box-sizing: border-box;
   padding-right: var(--cds-spacing-04);
   gap: var(--cds-spacing-03);
   overflow: hidden;
@@ -98,21 +102,20 @@ const GroupHeader = styled.div `
       transition: background 0.15s, color 0.15s;
 
       &:hover:not(:has(button[data-expand]:hover)) {
-        background: ${p.$isActive
-        ? 'var(--cds-layer-selected)'
-        : 'var(--cds-layer-hover)'};
+        background: ${p.$isActive ? 'var(--cds-layer-selected)' : 'var(--cds-layer-hover)'};
       }
     `}
 `;
 const GroupLabelButton = styled.button `
   display: flex;
   align-items: center;
+  align-self: stretch;
   flex: 1;
   min-width: 0;
   padding: ${(p) => {
     if (p.$depth > 0)
-        return `var(--cds-spacing-04) 0 var(--cds-spacing-04) ${0.75 + p.$depth * 1.75}rem`;
-    return 'var(--cds-spacing-04) 0 var(--cds-spacing-04) var(--cds-spacing-05)';
+        return `0 0 0 ${0.75 + p.$depth * 1.75}rem`;
+    return '0 0 0 var(--cds-spacing-05)';
 }};
   background: transparent;
   border: none;
@@ -139,7 +142,11 @@ const ExpandButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--cds-spacing-02);
+  flex-shrink: 0;
+  align-self: center;
+  width: var(--cds-spacing-07);
+  height: var(--cds-spacing-07);
+  padding: 0;
   background: transparent;
   border: none;
   border-radius: 4px;
@@ -159,12 +166,13 @@ const ExpandButton = styled.button `
 const PlainGroupLabel = styled.span `
   display: flex;
   align-items: center;
+  align-self: stretch;
   flex: 1;
   min-width: 0;
   padding: ${(p) => {
     if (p.$depth > 0)
-        return `var(--cds-spacing-04) 0 var(--cds-spacing-04) ${0.75 + p.$depth * 1.75}rem`;
-    return 'var(--cds-spacing-04) 0 var(--cds-spacing-04) var(--cds-spacing-05)';
+        return `0 0 0 ${0.75 + p.$depth * 1.75}rem`;
+    return '0 0 0 var(--cds-spacing-05)';
 }};
   gap: var(--cds-spacing-04);
   color: var(--cds-text-secondary);
@@ -231,10 +239,9 @@ const CollapseButton = styled.button `
   flex-wrap: nowrap;
   gap: var(--cds-spacing-04);
   width: 100%;
-  min-height: 2.5rem;
-  padding: ${(p) => p.$isExpanded
-    ? 'var(--cds-spacing-04) var(--cds-spacing-05)'
-    : 'var(--cds-spacing-04)'};
+  height: var(--cds-spacing-09);
+  box-sizing: border-box;
+  padding: ${(p) => (p.$isExpanded ? '0 var(--cds-spacing-05)' : '0')};
   justify-content: ${(p) => (p.$isExpanded ? 'flex-start' : 'center')};
   background: transparent;
   border: none;
@@ -316,13 +323,15 @@ const GroupItemNode = ({ node, sidebarExpanded, depth, linkComponent, }) => {
 };
 const GroupNode = ({ node, sidebarExpanded, depth, linkComponent, }) => {
     const Icon = node.icon;
+    const { groupToggleAria } = useSidebarLabels();
     if (!sidebarExpanded) {
         const collapsed = (_jsx(NavButton, { "$isActive": false, "$isExpanded": false, "$depth": 0, onClick: node.onToggleExpand, children: _jsx(Icon, { size: 20, style: { flexShrink: 0 } }) }));
         return (_jsx(CollapsedItemTooltip, { label: node.label, children: collapsed }));
     }
-    return (_jsxs("div", { children: [_jsxs(GroupHeader, { children: [_jsxs(PlainGroupLabel, { "$depth": depth, children: [_jsx(Icon, { size: 20, style: { flexShrink: 0 } }), _jsx(NavLabel, { children: node.label }), node.trailingElement] }), node.onToggleExpand && (_jsx(ExpandButton, { "data-expand": true, onClick: node.onToggleExpand, "aria-label": node.isExpanded
-                            ? `Collapse ${node.label}`
-                            : `Expand ${node.label}`, "aria-expanded": !!node.isExpanded, children: node.isExpanded ? (_jsx(ChevronUp, { size: 16 })) : (_jsx(ChevronDown, { size: 16 })) }))] }), node.isExpanded &&
+    return (_jsxs("div", { children: [_jsxs(GroupHeader, { children: [_jsxs(PlainGroupLabel, { "$depth": depth, children: [_jsx(Icon, { size: 20, style: { flexShrink: 0 } }), _jsx(NavLabel, { children: node.label }), node.trailingElement] }), node.onToggleExpand && (_jsx(ExpandButton, { "data-expand": true, onClick: node.onToggleExpand, "aria-label": groupToggleAria({
+                            label: node.label,
+                            isExpanded: !!node.isExpanded,
+                        }), "aria-expanded": !!node.isExpanded, children: node.isExpanded ? (_jsx(ChevronUp, { size: 16 })) : (_jsx(ChevronDown, { size: 16 })) }))] }), node.isExpanded &&
                 node.children.map((child) => (_jsx(SidebarNodeComponent, { node: child, sidebarExpanded: sidebarExpanded, depth: depth + 1, linkComponent: linkComponent }, child.key)))] }));
 };
 const SectionNode = ({ node, sidebarExpanded, linkComponent, hideTopDivider, eatScrollPadding, tight, }) => (_jsxs(SectionDivider, { "$hideTopDivider": hideTopDivider, "$eatScrollPadding": eatScrollPadding, "$tight": tight, children: [sidebarExpanded && node.title && _jsx(SectionTitle, { children: node.title }), node.children.map((child) => (_jsx(SidebarNodeComponent, { node: child, sidebarExpanded: sidebarExpanded, depth: 0, linkComponent: linkComponent }, child.key)))] }));
@@ -347,31 +356,37 @@ const SidebarNodeComponent = ({ node, sidebarExpanded, depth, linkComponent, hid
  * Loose items (not wrapped in a section) are valid and behave as an implicit
  * untitled group at the top.
  */
-export const C3Sidebar = ({ ariaLabel, children: nodes, isExpanded = true, onToggleExpanded, expandedWidth = '16rem', collapsedWidth = '3rem', linkComponent, }) => {
+export const C3Sidebar = ({ ariaLabel, children: nodes, isExpanded = true, onToggleExpanded, expandedWidth = '16rem', collapsedWidth = '3rem', linkComponent, labels, }) => {
     const width = isExpanded ? expandedWidth : collapsedWidth;
     const prunedNodes = pruneChildren(nodes);
-    return (_jsxs(SidebarNav, { "$width": width, "aria-label": ariaLabel, children: [_jsx(ScrollArea, { "$sidebarExpanded": isExpanded, children: (() => {
-                    let sectionSeen = false;
-                    let prevSectionCompact = false;
-                    let hasNonSectionNodes = false;
-                    return prunedNodes.map((node) => {
-                        let hideTopDivider = false;
-                        let eatScrollPadding = false;
-                        let tight = false;
-                        if (node.type === 'section') {
-                            const isFirst = !sectionSeen;
-                            hideTopDivider =
-                                (isFirst && !hasNonSectionNodes) || !!node.compact;
-                            eatScrollPadding =
-                                isFirst && !hasNonSectionNodes && !!node.compact;
-                            tight = prevSectionCompact;
-                            sectionSeen = true;
-                            prevSectionCompact = !!node.compact;
-                        }
-                        else {
-                            hasNonSectionNodes = true;
-                        }
-                        return (_jsx(SidebarNodeComponent, { node: node, sidebarExpanded: isExpanded, depth: 0, linkComponent: linkComponent, hideTopDivider: hideTopDivider, eatScrollPadding: eatScrollPadding, tight: tight }, node.key));
-                    });
-                })() }), onToggleExpanded && (_jsx(CollapseToggleArea, { children: _jsx(CollapsedItemTooltip, { label: 'Expand', enabled: !isExpanded, children: _jsxs(CollapseButton, { "$isExpanded": isExpanded, onClick: onToggleExpanded, "aria-label": isExpanded ? 'Collapse sidebar' : 'Expand sidebar', "aria-expanded": isExpanded, children: [isExpanded ? (_jsx(ChevronLeft, { size: 20, style: { flexShrink: 0 } })) : (_jsx(ChevronRight, { size: 20, style: { flexShrink: 0 } })), isExpanded && _jsx(NavLabel, { children: "Collapse" })] }) }) }))] }));
+    const collapseLabel = labels?.collapse ?? 'Collapse';
+    const expandLabel = labels?.expand ?? 'Expand';
+    const toggleAria = labels?.toggleAriaLabel ??
+        ((expanded) => (expanded ? 'Collapse sidebar' : 'Expand sidebar'));
+    const groupToggleAria = labels?.groupToggleAriaLabel ??
+        (({ label, isExpanded: e }) => e ? `Collapse ${label}` : `Expand ${label}`);
+    return (_jsx(SidebarLabelsContext.Provider, { value: { groupToggleAria }, children: _jsxs(SidebarNav, { "$width": width, "aria-label": ariaLabel, children: [_jsx(ScrollArea, { "$sidebarExpanded": isExpanded, children: (() => {
+                        let sectionSeen = false;
+                        let prevSectionCompact = false;
+                        let hasNonSectionNodes = false;
+                        return prunedNodes.map((node) => {
+                            let hideTopDivider = false;
+                            let eatScrollPadding = false;
+                            let tight = false;
+                            if (node.type === 'section') {
+                                const isFirst = !sectionSeen;
+                                hideTopDivider =
+                                    (isFirst && !hasNonSectionNodes) || !!node.compact;
+                                eatScrollPadding =
+                                    isFirst && !hasNonSectionNodes && !!node.compact;
+                                tight = prevSectionCompact;
+                                sectionSeen = true;
+                                prevSectionCompact = !!node.compact;
+                            }
+                            else {
+                                hasNonSectionNodes = true;
+                            }
+                            return (_jsx(SidebarNodeComponent, { node: node, sidebarExpanded: isExpanded, depth: 0, linkComponent: linkComponent, hideTopDivider: hideTopDivider, eatScrollPadding: eatScrollPadding, tight: tight }, node.key));
+                        });
+                    })() }), onToggleExpanded && (_jsx(CollapseToggleArea, { children: _jsx(CollapsedItemTooltip, { label: expandLabel, enabled: !isExpanded, children: _jsxs(CollapseButton, { "$isExpanded": isExpanded, onClick: onToggleExpanded, "aria-label": toggleAria(isExpanded), "aria-expanded": isExpanded, children: [isExpanded ? (_jsx(ChevronLeft, { size: 20, style: { flexShrink: 0 } })) : (_jsx(ChevronRight, { size: 20, style: { flexShrink: 0 } })), isExpanded && _jsx(NavLabel, { children: collapseLabel })] }) }) }))] }) }));
 };

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

@@ -1,14 +1,16 @@
 export type { CamundaApp } from '../../utils/camunda.types';
 export { C3BreadcrumbBar } from './c3-breadcrumb-bar';
 export { C3NavigationV2 } from './c3-navigation-v2';
-export type { AppProps, BreadcrumbAction, BreadcrumbDropdownItem, BreadcrumbSegment, C3NavigationV2Props, GlobalActionButton, LinkComponent, LinkProps, SidebarGroup, SidebarGroupItem, SidebarItem, SidebarNode, SidebarProps, SidebarSection, ToolDescriptor, } from './c3-navigation-v2.types';
+export type { AppProps, BreadcrumbAction, BreadcrumbDropdownItem, BreadcrumbSegment, C3NavigationV2Props, GlobalActionButton, LinkComponent, LinkProps, SidebarGroup, SidebarGroupItem, SidebarItem, SidebarLabels, SidebarNode, SidebarProps, SidebarSection, ToolDescriptor, } from './c3-navigation-v2.types';
 export { C3Sidebar } from './c3-sidebar';
 export { C3ToolsArea } from './c3-tools-area';
 export type { C3InfoPanelProps, InfoPanelElement } from './tools/c3-info-panel';
 export { C3InfoPanel } from './tools/c3-info-panel';
-export type { C3NotificationsPanelProps } from './tools/c3-notifications-panel';
+export type { C3NotificationsPanelLabels, C3NotificationsPanelProps, } from './tools/c3-notifications-panel';
 export { C3NotificationsPanel } from './tools/c3-notifications-panel';
-export type { C3UserPanelProps, UserPanelElement, } from './tools/c3-user-panel';
+export type { C3ThemeSelectorLabels, C3ThemeSelectorProps, } from './tools/c3-theme-selector';
+export { C3ThemeSelector } from './tools/c3-theme-selector';
+export type { C3UserPanelLabels, C3UserPanelProps, UserPanelElement, } from './tools/c3-user-panel';
 export { C3UserPanel } from './tools/c3-user-panel';
 export type { BreadcrumbDescriptor, BreadcrumbDropdownItemDescriptor, GroupDescriptor, GroupItemDescriptor, ItemDescriptor, SectionDescriptor, SidebarNodeDescriptor, UseC3NavigationV2Options, UseC3NavigationV2Return, } from './use-c3-navigation-v2';
 export { useC3NavigationV2 } from './use-c3-navigation-v2';

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

@@ -9,6 +9,7 @@ export { C3Sidebar } from './c3-sidebar.js';
 export { C3ToolsArea } from './c3-tools-area.js';
 export { C3InfoPanel } from './tools/c3-info-panel.js';
 export { C3NotificationsPanel } from './tools/c3-notifications-panel.js';
+export { C3ThemeSelector } from './tools/c3-theme-selector.js';
 export { C3UserPanel } from './tools/c3-user-panel.js';
 export { useC3NavigationV2 } from './use-c3-navigation-v2.js';
 export { useCamundaTools } from './use-camunda-tools.js';

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

@@ -6,6 +6,7 @@ export interface InfoPanelElement {
 }
 export interface C3InfoPanelProps {
     elements: InfoPanelElement[];
-    title?: string;
+    /** Defaults to `'Info'`. */
+    title?: string | null;
 }
 export declare const C3InfoPanel: FC<C3InfoPanelProps>;

package/lib/esm/src/components/c3-navigation-v2/tools/c3-info-panel.js

@@ -30,4 +30,4 @@ const LinkButton = styled.button `
     outline-offset: -2px;
   }
 `;
-export const C3InfoPanel = ({ elements, title = 'Help & Resources', }) => (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { children: _jsx(PanelTitle, { children: title }) }), _jsx(LinkList, { children: elements.map((el) => (_jsx(LinkItem, { children: _jsx(LinkButton, { onClick: el.onClick, children: el.label }) }, el.key))) })] }));
+export const C3InfoPanel = ({ elements, title = 'Info', }) => (_jsxs(_Fragment, { children: [title && (_jsx(PanelHeader, { children: _jsx(PanelTitle, { children: title }) })), _jsx(LinkList, { children: elements.map((el) => (_jsx(LinkItem, { children: _jsx(LinkButton, { onClick: el.onClick, children: el.label }) }, el.key))) })] }));

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

@@ -1,6 +1,17 @@
 import { type FC } from 'react';
 import type { Notification } from '../../../api/notifications';
+export interface C3NotificationsPanelLabels {
+    /** Defaults to `'Dismiss all'`. */
+    dismissAll?: string;
+    /** Defaults to `'No notifications'`. */
+    emptyTitle?: string;
+    /** Defaults to `'New updates regarding your processes, clusters and more will appear here.'`. */
+    emptyDescription?: string;
+}
 export interface C3NotificationsPanelProps {
     onLinkClick?: (meta: Notification['meta']) => void;
+    /** Defaults to `'Notifications'`. */
+    title?: string | null;
+    labels?: C3NotificationsPanelLabels;
 }
 export declare const C3NotificationsPanel: FC<C3NotificationsPanelProps>;

package/lib/esm/src/components/c3-navigation-v2/tools/c3-notifications-panel.js

@@ -28,7 +28,7 @@ const EmptyStateDescription = styled(NotificationDescription) `
   margin-top: var(--cds-spacing-03);
 `;
 const sortDescending = (a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime();
-export const C3NotificationsPanel = ({ onLinkClick, }) => {
+export const C3NotificationsPanel = ({ onLinkClick, title = 'Notifications', labels, }) => {
     const { enabled, notifications, markAllAsRead, dismiss, dismissAll, analytics, } = useContext(C3NotificationContext);
     // Snapshot uuids that were unread when the panel opened so "new" dots
     // persist until the panel closes, even after mark-as-read runs.
@@ -41,17 +41,21 @@ export const C3NotificationsPanel = ({ onLinkClick, }) => {
         if (enabled)
             analytics('notification-panel-opened');
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsxs(PanelHeader, { style: {
+    return (_jsxs(_Fragment, { children: [(title || notifications.length > 0) && (_jsxs(PanelHeader, { style: {
                     width: '100%',
                     height: 60,
                     display: 'flex',
                     flexDirection: 'row',
-                    justifyContent: 'space-between',
+                    // Without a title, the dismiss-all button is the sole row item;
+                    // flex-end keeps it pinned right instead of drifting left under
+                    // `space-between`.
+                    justifyContent: title ? 'space-between' : 'flex-end',
                     alignItems: 'center',
-                }, children: [_jsx(PanelTitle, { children: "Notifications" }), notifications.length > 0 && (_jsx(DismissAllButton, { kind: 'ghost', size: 'sm', onClick: () => dismissAll(notifications), children: "Dismiss all" }))] }), notifications.length > 0 ? ([...notifications].sort(sortDescending).map((notification) => (_jsx(C3NotificationContainer, { onRead: () => undefined, onDismiss: () => dismiss(notification), originalOnLinkClick: onLinkClick, onLinkClick: () => {
+                }, children: [title && _jsx(PanelTitle, { children: title }), notifications.length > 0 && (_jsx(DismissAllButton, { kind: 'ghost', size: 'sm', onClick: () => dismissAll(notifications), children: labels?.dismissAll ?? 'Dismiss all' }))] })), notifications.length > 0 ? ([...notifications].sort(sortDescending).map((notification) => (_jsx(C3NotificationContainer, { onRead: () => undefined, onDismiss: () => dismiss(notification), originalOnLinkClick: onLinkClick, onLinkClick: () => {
                     if (enabled) {
                         analytics('notification-clicked-cta', notification.meta?.identifier);
                     }
                     onLinkClick?.(notification.meta);
-                }, unread: unreadAtOpen.has(notification.uuid), ...notification }, notification.uuid)))) : (_jsxs(EmptyState, { children: [_jsx(C3BellIcon, { size: 56 }), _jsx(EmptyStateTitle, { children: "No notifications" }), _jsx(EmptyStateDescription, { children: "New updates regarding your processes, clusters and more will appear here." })] }))] }));
+                }, unread: unreadAtOpen.has(notification.uuid), ...notification }, notification.uuid)))) : (_jsxs(EmptyState, { children: [_jsx(C3BellIcon, { size: 56 }), _jsx(EmptyStateTitle, { children: labels?.emptyTitle ?? 'No notifications' }), _jsx(EmptyStateDescription, { children: labels?.emptyDescription ??
+                            'New updates regarding your processes, clusters and more will appear here.' })] }))] }));
 };