@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.84 → 2.0.0-next.86

package/src/components/tab-item/tab-item.ts

@@ -8,6 +8,25 @@ import '../../icons/icon-close-google.js';
 import '../badge/badge.js';
 import {BadgeSize, BadgeType} from '../badge/badge.js';
 
+/**
+ * Configuration for a single badge rendered by `<obc-tab-item>` via the `badges` property.
+ */
+export interface TabItemBadge {
+  /** Visual style/type of the badge. See `BadgeType` for available options. */
+  type: BadgeType;
+  /** Size of the badge. See `BadgeSize` for available options. */
+  size: BadgeSize;
+  /** The numeric value to display in the badge. */
+  count?: number;
+  /** Whether to show an icon inside the badge. Default: false. */
+  showIcon?: boolean;
+  /**
+   * When set, a `<slot>` with this name is rendered inside the badge so a custom
+   * icon can be projected (used for badge types without a built-in icon).
+   */
+  iconSlotName?: string;
+}
+
 /**
  * `<obc-tab-item>` – A selectable tab component for navigation menus and tabbed interfaces.
  *
@@ -150,6 +169,20 @@ export class ObcTabItem extends LitElement {
   @property({type: Boolean, attribute: 'has-divider'}) hasDivider = false;
 
   /**
+   * One or more badges (count/status) to display on the tab.
+   *
+   * When this array is non-empty it takes precedence over the deprecated
+   * single-badge props (`hasBadge`, `badgeType`, `badgeSize`, `badgeCount`,
+   * `badgeShowNumber`, `showLeadingBadgeIcon`). When empty, the deprecated
+   * props are used instead (gated by `hasBadge`).
+   *
+   * Default: []
+   */
+  @property({type: Array, attribute: false}) badges: TabItemBadge[] = [];
+
+  /**
+   * @deprecated Use the `badges` array instead.
+   *
    * Displays a badge (count/status) on the tab.
    * Configure badge appearance via `badgeCount`, `badgeType`, `badgeSize`, etc.
    *
@@ -195,6 +228,8 @@ export class ObcTabItem extends LitElement {
   @property({type: Boolean}) disabled = false;
 
   /**
+   * @deprecated Use the `badges` array instead.
+   *
    * Type of badge to display (e.g., 'regular', 'alarm', 'warning', etc.).
    * See `BadgeType` enum for available options.
    *
@@ -204,6 +239,8 @@ export class ObcTabItem extends LitElement {
   @property({type: String}) badgeType: string = BadgeType.regular;
 
   /**
+   * @deprecated Use the `badges` array instead.
+   *
    * Size of the badge ('regular' or 'large').
    * See `BadgeSize` enum for available options.
    *
@@ -213,6 +250,8 @@ export class ObcTabItem extends LitElement {
   @property({type: String}) badgeSize: string = BadgeSize.regular;
 
   /**
+   * @deprecated Use the `badges` array instead.
+   *
    * Shows the badge's numeric value. When false, only the badge background is rendered (for status-only badges).
    *
    * Default: true
@@ -221,6 +260,8 @@ export class ObcTabItem extends LitElement {
   @property({type: Boolean, attribute: false}) badgeShowNumber: boolean = true;
 
   /**
+   * @deprecated Use the `badges` array instead.
+   *
    * The numeric value to display in the badge (e.g., count of notifications).
    *
    * Default: 0
@@ -229,6 +270,8 @@ export class ObcTabItem extends LitElement {
   @property({type: Number}) badgeCount = 0;
 
   /**
+   * @deprecated Use the `badges` array instead.
+   *
    * Shows an icon inside the badge.
    * Supply icon content via the `badge-icon` slot.
    *
@@ -267,7 +310,44 @@ export class ObcTabItem extends LitElement {
     }
   }
 
+  private get effectiveBadges(): TabItemBadge[] {
+    if (this.badges.length > 0) {
+      return this.badges;
+    }
+    if (!this.hasBadge) {
+      return [];
+    }
+    return [
+      {
+        type: (this.badgeType as BadgeType) || BadgeType.regular,
+        size: (this.badgeSize as BadgeSize) || BadgeSize.regular,
+        count: this.badgeShowNumber ? this.badgeCount : undefined,
+        showIcon: this.showLeadingBadgeIcon,
+        iconSlotName: this.showLeadingBadgeIcon ? 'badge-icon' : undefined,
+      },
+    ];
+  }
+
+  private renderBadge(badge: TabItemBadge) {
+    return html`
+      <obc-badge
+        class="badge"
+        .number=${badge.count ?? 0}
+        .type=${badge.type || BadgeType.regular}
+        .size=${badge.size || BadgeSize.regular}
+        .showNumber=${badge.count !== undefined}
+        .showIcon=${badge.showIcon ?? false}
+      >
+        ${badge.iconSlotName
+          ? html`<slot name=${badge.iconSlotName} slot="badge-icon"></slot>`
+          : nothing}
+      </obc-badge>
+    `;
+  }
+
   override render() {
+    const badges = this.effectiveBadges;
+    const hasBadge = badges.length > 0;
     const wrapperClasses = {
       wrapper: true,
       hug: this.hug,
@@ -275,7 +355,7 @@ export class ObcTabItem extends LitElement {
       'has-leading-icon': this.hasLeadingIcon,
       'has-title': this.hasTitle,
       'has-divider': this.hasDivider && !this.checked,
-      'has-badge': this.hasBadge,
+      'has-badge': hasBadge,
       'has-subtitle': this.showSubtitle,
       disabled: this.disabled,
       'center-content': this.centerContent,
@@ -309,38 +389,16 @@ export class ObcTabItem extends LitElement {
                 </div>
               `
             : nothing}
-          ${this.centerContent && this.hasBadge
-            ? html`
-                <obc-badge
-                  class="badge"
-                  .number=${this.badgeCount}
-                  .type=${this.badgeType || BadgeType.regular}
-                  .size=${this.badgeSize || BadgeSize.regular}
-                  .showNumber=${this.badgeShowNumber}
-                  .showIcon=${this.showLeadingBadgeIcon}
-                >
-                  ${this.showLeadingBadgeIcon
-                    ? html`<slot name="badge-icon" slot="badge-icon"></slot>`
-                    : nothing}
-                </obc-badge>
-              `
+          ${this.centerContent && hasBadge
+            ? html`<div class="badges">
+                ${badges.map((badge) => this.renderBadge(badge))}
+              </div>`
             : nothing}
         </div>
-        ${!this.centerContent && this.hasBadge
-          ? html`
-              <obc-badge
-                class="badge"
-                .number=${this.badgeCount}
-                .type=${this.badgeType || BadgeType.regular}
-                .size=${this.badgeSize || BadgeSize.regular}
-                .showNumber=${this.badgeShowNumber}
-                .showIcon=${this.showLeadingBadgeIcon}
-              >
-                ${this.showLeadingBadgeIcon
-                  ? html`<slot name="badge-icon" slot="badge-icon"></slot>`
-                  : nothing}
-              </obc-badge>
-            `
+        ${!this.centerContent && hasBadge
+          ? html`<div class="badges">
+              ${badges.map((badge) => this.renderBadge(badge))}
+            </div>`
           : nothing}
         ${this.hasClose
           ? html`

package/src/components/tab-row/tab-row.stories.ts

@@ -41,6 +41,7 @@ interface TabRowStoryArgs {
   hug?: boolean;
   showSubtitle?: boolean;
   hasAddNewTab?: boolean;
+  centerContent?: boolean;
 }
 
 function InteractiveTabRow(args: TabRowStoryArgs) {
@@ -58,6 +59,7 @@ function InteractiveTabRow(args: TabRowStoryArgs) {
   tabRow.hug = args.hug ?? false;
   tabRow.showSubtitle = args.showSubtitle ?? false;
   tabRow.hasAddNewTab = args.hasAddNewTab ?? true;
+  tabRow.centerContent = args.centerContent ?? false;
 
   tabRow.addEventListener('tab-selected', (e: Event) => {
     const detail = (e as CustomEvent<{id: string}>).detail;
@@ -109,6 +111,18 @@ export const HugMode: Story = {
   render: InteractiveTabRow,
 };
 
+export const CenterContent: Story = {
+  args: {
+    tabs: defaultTabs,
+    hug: false,
+    hasClose: true,
+    hasAddNewTab: true,
+    selectedTabId: 'tab2',
+    centerContent: true,
+  },
+  render: InteractiveTabRow,
+};
+
 export const NoClose: Story = {
   args: {
     tabs: defaultTabs,
@@ -148,24 +162,20 @@ export const WithBadges: Story = {
       {
         id: 'tab1',
         title: 'Inbox',
-        hasBadge: true,
-        badgeCount: 12,
-        badgeType: BadgeType.notification,
+        badges: [{type: BadgeType.warning, size: BadgeSize.regular, count: 12}],
       },
       {
         id: 'tab2',
         title: 'Notifications',
-        hasBadge: true,
-        badgeCount: 3,
-        badgeType: BadgeType.alarm,
+        badges: [
+          {type: BadgeType.alarm, size: BadgeSize.regular, count: 3},
+          {type: BadgeType.warning, size: BadgeSize.regular, count: 7},
+        ],
       },
       {
         id: 'tab3',
         title: 'Updates',
-        hasBadge: true,
-        badgeCount: 99,
-        badgeType: BadgeType.enhance,
-        badgeSize: BadgeSize.large,
+        badges: [{type: BadgeType.caution, size: BadgeSize.regular, count: 99}],
       },
       {id: 'tab4', title: 'Messages'},
     ],

package/src/components/tab-row/tab-row.ts

@@ -3,6 +3,7 @@ import {property} from 'lit/decorators.js';
 import {repeat} from 'lit/directives/repeat.js';
 import compentStyle from './tab-row.css?inline';
 import '../tab-item/tab-item.js';
+import type {TabItemBadge} from '../tab-item/tab-item.js';
 import '../icon-button/icon-button.js';
 import '../../icons/icon-placeholder.js';
 import {customElement} from '../../decorator.js';
@@ -15,11 +16,22 @@ export interface TabData {
   subtitle?: string;
   showSubtitle?: boolean;
   hasLeadingIcon?: boolean;
+  /**
+   * One or more badges to display on the tab. When non-empty this takes
+   * precedence over the deprecated single-badge fields below.
+   */
+  badges?: TabItemBadge[];
+  /** @deprecated Use `badges` instead. */
   hasBadge?: boolean;
+  /** @deprecated Use `badges` instead. */
   badgeCount?: number;
+  /** @deprecated Use `badges` instead. */
   badgeType?: BadgeType;
+  /** @deprecated Use `badges` instead. */
   badgeSize?: BadgeSize;
+  /** @deprecated Use `badges` instead. */
   badgeShowNumber?: boolean;
+  /** @deprecated Use `badges` instead. */
   showLeadingBadgeIcon?: boolean;
   disabled?: boolean;
 }
@@ -80,8 +92,8 @@ export interface TabData {
  *
  * | Slot Name                | Renders When...                   | Purpose                                              |
  * |--------------------------|------------------------------------|------------------------------------------------------|
- * | `tab-<id>-icon`          | If `hasLeadingIcon` is true        | Leading icon for a specific tab (replaceable)        |
- * | `tab-<id>-badge-icon`    | If `showLeadingBadgeIcon` is true  | Badge icon for a specific tab (replaceable)          |
+ * | `tab-<id>-icon`              | If `hasLeadingIcon` is true                          | Leading icon for a specific tab (replaceable)        |
+ * | `tab-<id>-<iconSlotName>`    | For each badge that declares an `iconSlotName`       | Custom icon for a specific tab's badge (replaceable). The deprecated single-badge path uses `tab-<id>-badge-icon`. |
  *
  * ---
  *
@@ -100,7 +112,7 @@ export interface TabData {
  * - If using custom icons, provide them via the appropriate named slot for each tab.
  *
  * @slot tab-<id>-icon - Leading icon slot for each tab (shown when `hasLeadingIcon` is true for that tab)
- * @slot tab-<id>-badge-icon - Badge icon slot for each tab (shown when `showLeadingBadgeIcon` is true for that tab)
+ * @slot tab-<id>-<iconSlotName> - Custom badge icon slot for each tab, one per badge that declares an `iconSlotName`. The deprecated single-badge path uses `tab-<id>-badge-icon`.
  * @fires tab-selected {CustomEvent<{tab: TabData, id: string, index: number}>} Fired when a tab is selected.
  * @fires tab-closed {CustomEvent<{tab: TabData, id: string, index: number}>} Fired when a tab's close button is clicked.
  * @fires add-new-tab {CustomEvent<void>} Fired when the "add new tab" button is clicked.
@@ -115,12 +127,13 @@ export class ObcTabRow extends LitElement {
    * - `subtitle` (string): Contextual text shown below the title when subtitle display is enabled.
    * - `showSubtitle` (boolean): Optional per-tab override for displaying the subtitle.
    * - `hasLeadingIcon` (boolean): Whether to show a leading icon (default: true).
-   * - `hasBadge` (boolean): Whether to show a badge on the tab.
-   * - `badgeCount` (number): Number to display in the badge.
-   * - `badgeType` (BadgeType): Visual style of the badge (e.g., notification, alarm, enhance).
-   * - `badgeSize` (BadgeSize): Size of the badge (e.g., regular, large).
-   * - `badgeShowNumber` (boolean): If true, shows the badge number.
-   * - `showLeadingBadgeIcon` (boolean): If true, shows a badge icon.
+   * - `badges` (TabItemBadge[]): One or more badges to display on the tab. Takes precedence over the deprecated single-badge fields below.
+   * - `hasBadge` (boolean, deprecated): Whether to show a badge on the tab.
+   * - `badgeCount` (number, deprecated): Number to display in the badge.
+   * - `badgeType` (BadgeType, deprecated): Visual style of the badge (e.g., notification, alarm, enhance).
+   * - `badgeSize` (BadgeSize, deprecated): Size of the badge (e.g., regular, large).
+   * - `badgeShowNumber` (boolean, deprecated): If true, shows the badge number.
+   * - `showLeadingBadgeIcon` (boolean, deprecated): If true, shows a badge icon.
    * - `disabled` (boolean): If true, disables the tab.
    */
   @property({type: Array}) tabs: TabData[] = [];
@@ -139,6 +152,8 @@ export class ObcTabRow extends LitElement {
    */
   @property({type: Boolean, attribute: 'has-close'}) hasClose = false;
 
+  @property({type: Boolean}) centerContent = false;
+
   /**
    * Enables "hug" mode for a more compact tab layout with reduced padding.
    *
@@ -203,8 +218,27 @@ export class ObcTabRow extends LitElement {
 
   private renderTab(tab: TabData, index: number) {
     const isFirst = index === 0;
+    const previousTabSelected = this.selectedTabId === this.tabs[index - 1]?.id;
     const isChecked = tab.id === this.selectedTabId;
     const showSubtitle = tab.showSubtitle ?? this.showSubtitle;
+    // Forward a light-DOM slot for every distinct `iconSlotName` declared by the
+    // tab's badges (new `badges` array), plus the deprecated single badge-icon
+    // slot. obc-tab-item renders `<slot name=${iconSlotName} slot="badge-icon">`
+    // inside each badge, so obc-tab-row must project matching content into that
+    // slot. Slots are namespaced by tab id to stay unique across the row.
+    const badgeIconSlots = [
+      ...new Set(
+        (tab.badges ?? [])
+          .map((badge) => badge.iconSlotName)
+          .filter((slotName): slotName is string => slotName !== undefined)
+      ),
+    ];
+    if (
+      (tab.showLeadingBadgeIcon ?? false) &&
+      !badgeIconSlots.includes('badge-icon')
+    ) {
+      badgeIconSlots.push('badge-icon');
+    }
     return html`
       <obc-tab-item
         .title=${tab.title}
@@ -214,11 +248,12 @@ export class ObcTabRow extends LitElement {
         .hasClose=${this.hasClose}
         .hasLeadingIcon=${tab.hasLeadingIcon ?? true}
         .hasTitle=${true}
-        .hasDivider=${!isFirst}
+        .hasDivider=${!isFirst && !previousTabSelected}
         .hug=${this.hug}
+        .centerContent=${this.centerContent}
         .disabled=${tab.disabled || false}
-        .hasBadge=${tab.hasBadge ||
-        (tab.badgeCount !== undefined && tab.badgeCount > 0)}
+        .badges=${tab.badges ?? []}
+        .hasBadge=${tab.hasBadge || false}
         .badgeCount=${tab.badgeCount || 0}
         .badgeType=${tab.badgeType ?? BadgeType.regular}
         .badgeSize=${tab.badgeSize ?? BadgeSize.regular}
@@ -235,13 +270,13 @@ export class ObcTabRow extends LitElement {
             `
           : ''}
         <span slot="title">${tab.title}</span>
-        ${tab.showLeadingBadgeIcon
-          ? html`
-              <slot name="tab-${tab.id}-badge-icon" slot="badge-icon">
-                <obi-placeholder></obi-placeholder>
-              </slot>
-            `
-          : ''}
+        ${badgeIconSlots.map(
+          (slotName) => html`
+            <slot name="tab-${tab.id}-${slotName}" slot=${slotName}>
+              <obi-placeholder></obi-placeholder>
+            </slot>
+          `
+        )}
       </obc-tab-item>
     `;
   }

package/src/components/top-bar/top-bar.ts

@@ -436,7 +436,6 @@ export class ObcTopBar extends LitElement {
           </obc-icon-button>
         </div>`
       );
-      leftGroup.push(html`<div class="divider"></div>`);
       leftGroup.push(
         html`<obc-icon-button
           variant="flat"