diff --git a/changelog.md b/changelog.md
index 1eb05d2..0cf90b8 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,12 @@
# Changelog
+## 2025-12-29 - 3.9.0 - feat(dees-appui-mainmenu)
+add status badges to main menu items with theme-aware styling
+
+- Introduce .badge element and layout (min-width, height, padding, font-size, weight, border-radius) to display counts/status on menu items.
+- Add four badge variants: default, success, warning, error, using cssManager.bdTheme for light/dark color pairs.
+- Render the badge element conditionally in the menu item template when tabArg.badge is provided; hide badges when host has [collapsed] attribute.
+
## 2025-12-29 - 3.8.0 - feat(dees-appui-base)
add interactive demo controls to manipulate appui via view activation context
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 490d99e..25baeaa 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
- version: '3.8.0',
+ version: '3.9.0',
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
}
diff --git a/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts b/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts
index 5e75a95..eb09738 100644
--- a/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts
+++ b/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts
@@ -336,6 +336,44 @@ export class DeesAppuiMainmenu extends DeesElement {
transition-delay: 1s;
}
+ /* Badge styles */
+ .badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 18px;
+ height: 18px;
+ padding: 0 6px;
+ font-size: 11px;
+ font-weight: 600;
+ border-radius: 9px;
+ margin-left: auto;
+ }
+
+ .badge.default {
+ background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+ color: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
+ }
+
+ .badge.success {
+ background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
+ color: ${cssManager.bdTheme('#166534', '#4ade80')};
+ }
+
+ .badge.warning {
+ background: ${cssManager.bdTheme('#fef3c7', '#451a03')};
+ color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+ }
+
+ .badge.error {
+ background: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
+ color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+ }
+
+ :host([collapsed]) .badge {
+ display: none;
+ }
+
/* Bottom Section */
.bottomSection {
flex-shrink: 0;
@@ -420,6 +458,9 @@ export class DeesAppuiMainmenu extends DeesElement {
>
${tabArg.key}
+ ${tabArg.badge !== undefined ? html`
+ ${tabArg.badge}
+ ` : ''}
${tabArg.key}
`;