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} `;