feat(badges): enhance badge display and styling

playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel-collapsible--open.yaml

@@ -13,7 +13,9 @@
 - button "Properties 5" [expanded]
 - region "Properties 5": And here we have some content
 - button "Documents"
-- button "Graphics"
+- region "Documents"
+- button /Graphics \+\d+/
+- region /Graphics \+\d+/
 - banner:
   - link "Siemens logo":
     - /url: "#/"

projects/element-ng/accordion/si-collapsible-panel.component.html

@@ -15,22 +15,29 @@
   (click)="doToggle($event)"
 >
   @let headerIcon = icon();
-  @if (headerIcon) {
-    <si-icon class="icon ms-n2 me-2" [icon]="headerIcon" [class.collapsed-icon]="isHCollapsible" />
-  }
-  @if (icon() && badge() !== undefined && badge() !== '') {
-    <span class="badge-text">
-      {{ badge() }}
-    </span>
-  }
+  <span class="position-relative">
+    @if (headerIcon) {
+      <si-icon
+        class="icon ms-n2 me-2"
+        [icon]="headerIcon"
+        [class.collapsed-icon]="isHCollapsible"
+      />
+
+      @if (formattedBadge()) {
+        <span class="badge-text">
+          {{ formattedBadge() }}
+        </span>
+      }
+    }
+  </span>
   <div class="si-h5 autohide">
     {{ heading() | translate }}
     <ng-content select="[si-panel-heading]" />
   </div>
 
-  @if (badge() !== undefined && badge() !== '') {
+  @if (formattedBadge()) {
     <span [class]="'badge autohide' + (badgeColor() ? ' bg-' + badgeColor() : '')">
-      {{ badge() }}
+      {{ formattedBadge() }}
     </span>
   }
   <span class="ms-auto overflow-hidden">

projects/element-ng/accordion/si-collapsible-panel.component.scss

@@ -16,6 +16,14 @@
     }
   }
 
+  .badge-text {
+    position: absolute;
+    inset-inline-end: -2px;
+    inset-inline-start: unset;
+    inset-block-start: -5px;
+    margin-inline-end: unset;
+  }
+
   &.hcollapsed {
     background: variables.$element-base-1;
 

projects/element-ng/accordion/si-collapsible-panel.component.ts

@@ -103,6 +103,20 @@ export class SiCollapsiblePanelComponent {
    */
   readonly panelToggle = output<boolean>();
 
+  /**
+   * Formats badge value to limit display to "+99" for numbers greater than 99
+   */
+  protected readonly formattedBadge = computed(() => {
+    const badge = this.badge();
+    if (!badge && badge !== 0) {
+      return '';
+    }
+    if (typeof badge === 'number') {
+      return badge > 99 ? '+99' : badge.toString();
+    }
+    return badge.toString();
+  });
+
   protected readonly hcollapsed = computed(
     () => this.accordionHCollapseService?.hcollapsed() ?? false
   );

projects/element-theme/src/styles/bootstrap/_badges.scss

@@ -155,7 +155,7 @@
   background-color: semantic-tokens.$element-action-danger;
   color: semantic-tokens.$element-action-danger-text;
   font-size: typography.$si-font-size-caption;
-  line-height: 13px;
+  line-height: 1.2;
   padding-block: 0;
   padding-inline: map.get(spacers.$spacers, 2);
   font-family: variables.$font-family-sans-serif;

src/app/examples/si-side-panel/si-side-panel-collapsible.html

@@ -154,17 +154,23 @@ <h2>Collapsible side panel</h2>
     <si-accordion [fullHeight]="true">
       <si-collapsible-panel
         heading="Properties"
-        badge="5"
         badgeColor="info"
         icon="element-settings"
         contentCssClasses="p-6"
+        [badge]="5"
       >
         And here we have some content
       </si-collapsible-panel>
       <si-collapsible-panel heading="Documents" icon="element-document" contentCssClasses="p-6">
         And this is the content
       </si-collapsible-panel>
-      <si-collapsible-panel heading="Graphics" icon="element-image" contentCssClasses="p-6">
+      <si-collapsible-panel
+        heading="Graphics"
+        badgeColor="warning"
+        icon="element-image"
+        contentCssClasses="p-6"
+        [badge]="100"
+      >
         Nothing to see here
       </si-collapsible-panel>
     </si-accordion>