npm - @oicl/openbridge-webcomponents - Versions diffs - 2.0.0-next.64 → 2.0.0-next.66 - Mend

@oicl/openbridge-webcomponents 2.0.0-next.64 → 2.0.0-next.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/custom-elements.json CHANGED Viewed

@@ -50582,32 +50582,12 @@
             },
             {
               "kind": "field",
-              "name": "hasAlertBadge",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether a trailing alert counter badge is shown on the header (Tree variant only).",
-              "attribute": "hasAlertBadge"
-            },
-            {
-              "kind": "field",
-              "name": "alertCount",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number shown in the header's alert badge when `hasAlertBadge` is true (Tree variant only).",
-              "attribute": "alertCount"
-            },
-            {
-              "kind": "field",
-              "name": "alertType",
+              "name": "alerts",
               "type": {
-                "text": "string"
+                "text": "TreeNavigationItemAlerts | undefined"
               },
-              "description": "The severity/type of the header's alert badge — one of the `obc-badge` types (Tree variant only).",
-              "attribute": "alertType"
+              "description": "Per-severity alert counts shown as trailing badge(s) on the group header\n(Tree variant only). Forwarded to the underlying `obc-tree-navigation-item`;\ntypically `{aggregate: true, ...}` so the header totals the rows beneath it.\nSee TreeNavigationItemAlerts.",
+              "attribute": "alerts"
             },
             {
               "kind": "field",
@@ -50768,30 +50748,12 @@
               "fieldName": "terminalType"
             },
             {
-              "name": "hasAlertBadge",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether a trailing alert counter badge is shown on the header (Tree variant only).",
-              "fieldName": "hasAlertBadge"
-            },
-            {
-              "name": "alertCount",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number shown in the header's alert badge when `hasAlertBadge` is true (Tree variant only).",
-              "fieldName": "alertCount"
-            },
-            {
-              "name": "alertType",
+              "name": "alerts",
               "type": {
-                "text": "string"
+                "text": "TreeNavigationItemAlerts | undefined"
               },
-              "description": "The severity/type of the header's alert badge — one of the `obc-badge` types (Tree variant only).",
-              "fieldName": "alertType"
+              "description": "Per-severity alert counts shown as trailing badge(s) on the group header\n(Tree variant only). Forwarded to the underlying `obc-tree-navigation-item`;\ntypically `{aggregate: true, ...}` so the header totals the rows beneath it.\nSee TreeNavigationItemAlerts.",
+              "fieldName": "alerts"
             },
             {
               "name": "defaultOpen",
@@ -50955,32 +50917,12 @@
             },
             {
               "kind": "field",
-              "name": "hasAlertBadge",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether a trailing alert counter badge is shown (Tree variant only).",
-              "attribute": "hasAlertBadge"
-            },
-            {
-              "kind": "field",
-              "name": "alertCount",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number shown in the alert badge when `hasAlertBadge` is true (Tree variant only).",
-              "attribute": "alertCount"
-            },
-            {
-              "kind": "field",
-              "name": "alertType",
+              "name": "alerts",
               "type": {
-                "text": "string"
+                "text": "TreeNavigationItemAlerts | undefined"
               },
-              "description": "The severity/type of the alert badge — one of the `obc-badge` types (Tree variant only).",
-              "attribute": "alertType"
+              "description": "Per-severity alert counts shown as trailing badge(s) (Tree variant only).\nForwarded to the underlying `obc-tree-navigation-item`. See\nTreeNavigationItemAlerts.",
+              "attribute": "alerts"
             },
             {
               "kind": "field",
@@ -51156,30 +51098,12 @@
               "fieldName": "terminalType"
             },
             {
-              "name": "hasAlertBadge",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether a trailing alert counter badge is shown (Tree variant only).",
-              "fieldName": "hasAlertBadge"
-            },
-            {
-              "name": "alertCount",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number shown in the alert badge when `hasAlertBadge` is true (Tree variant only).",
-              "fieldName": "alertCount"
-            },
-            {
-              "name": "alertType",
+              "name": "alerts",
               "type": {
-                "text": "string"
+                "text": "TreeNavigationItemAlerts | undefined"
               },
-              "description": "The severity/type of the alert badge — one of the `obc-badge` types (Tree variant only).",
-              "fieldName": "alertType"
+              "description": "Per-severity alert counts shown as trailing badge(s) (Tree variant only).\nForwarded to the underlying `obc-tree-navigation-item`. See\nTreeNavigationItemAlerts.",
+              "fieldName": "alerts"
             }
           ],
           "superclass": {
@@ -51215,7 +51139,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-navigation-menu>` – A flexible, slot-based navigation menu component for organizing primary and secondary navigation items.\n\nThis component provides a vertical navigation structure supporting groups, flyouts, and footer sections. It adapts to various layouts and device sizes via its `variant` and `smallScreen` properties. Items and groups are provided via slots, allowing for icons, labels, and nested navigation hierarchies.\n\nAppears as a sidebar or persistent navigation panel, supporting both icon-only and full-label modes. Designed for use as the main navigation in applications, dashboards, or any interface requiring structured navigation.\n\n## Features\n\n- **Variants:**\n  - **Full:** Displays both icons and labels for all navigation items (default).\n  - **IconOnly:** Shows only icons for a compact appearance. *Should only be used when no navigation items have sub-items or flyouts.*\n  - **IconOnlyLarge:** Icon-only mode that supports flyouts/submenus. Use when navigation contains groups or nested items.\n  - **Compact:** Reduces padding and overall width for a space-saving layout.\n  - **Tree:** Renders the same `obc-navigation-item` / `obc-navigation-item-group`\n    markup as a hierarchical tree. Groups expand inline (instead of as flyouts),\n    rows are indented by depth, multiple branches can stay open at once, and the\n    tree-row presentation (alert badge, terminal marker) is available via the\n    items' `hasAlertBadge`/`alertCount`/`alertType`/`terminalType` properties.\n- **Responsive Layout:**\n  - `smallScreen` property adapts the footer and logo layout for smaller viewports.\n- **Slot-based Content:**\n  - `main` slot for primary navigation items and groups.\n  - `footer` slot for secondary actions or links.\n  - `logo` slot for branding or logo placement (position adapts based on variant and screen size).\n- **Nested Navigation:**\n  - Supports nested groups and flyouts via `<obc-navigation-item-group>`.\n- **Automatic Variant Propagation:**\n  - Child items and groups automatically receive the correct variant for consistent appearance.\n- **Dynamic Content Handling:**\n  - Reacts to dynamic addition/removal of items and groups, updating layout and variants as needed.\n- **Interaction:**\n  - Clicking a navigation item closes all open groups/flyouts for streamlined navigation.\n\n## Usage Guidelines\n\nUse `<obc-navigation-menu>` as the main navigation container in your application layout. Place navigation items and groups in the `main` slot for primary navigation, and use the `footer` slot for secondary actions (such as settings or help). The `logo` slot is intended for branding and is positioned according to the selected variant and screen size.\n\n- Use the `Full` variant for standard navigation with both icons and labels.\n- Use `IconOnly` only when there are no nested groups or flyouts; otherwise, use `IconOnlyLarge` for icon-only navigation with flyout support.\n- The `Compact` variant is suitable for layouts with limited space or when a minimal navigation appearance is desired.\n- Use the `Tree` variant for hierarchical navigation (file trees, nested\n  sections). The existing item/group markup is reused unchanged — only the\n  `variant` changes. Footer and logo slots remain flat. Mark a group with\n  `defaultOpen` to have it start expanded.\n- Set `smallScreen` to `true` to optimize the layout for smaller devices or responsive breakpoints.\n\n**TODO(designer):** Provide additional guidance on when to use each variant and recommended slot content for best usability.\n\n## Slots\n\n| Slot Name | Renders When... | Purpose |\n|-----------|----------------|---------|\n| main      | Always         | Primary navigation items and groups. |\n| footer    | Always         | Secondary navigation items (e.g., settings, help). |\n| logo      | Always         | Branding/logo area (position varies by variant and screen size). |\n\nPlace `<obc-navigation-item>`, `<obc-navigation-item-group>`, or other suitable elements in these slots. For icons, use `<obi-placeholder>`, `<obi-applications>`, or other OpenBridge icon components in the `icon` slot of each navigation item.\n\n## Properties\n\n- `variant` (`ObcNavigationMenuVariant`): Controls the visual style and layout of the menu. Default is `Full`.\n- `smallScreen` (`boolean`): When `true`, adapts the layout for small screens (e.g., moves logo into the footer area).\n\n## Best Practices and Constraints\n\n- Only use the `IconOnly` variant when there are no navigation items with sub-items or flyouts. Use `IconOnlyLarge` if your navigation includes groups or nested items.\n- Place only navigation-related components in the `main` and `footer` slots for clarity and accessibility.\n- For best accessibility, ensure each navigation item has a clear label and, if using icons, a suitable `aria-label` or accessible name.\n- Avoid placing interactive elements other than navigation items/groups in the `main` or `footer` slots.\n\n## Example\n\n```html\n<obc-navigation-menu variant=\"full\">\n  <obc-navigation-item-group slot=\"main\" label=\"Apps\">\n    <obi-applications slot=\"icon\"></obi-applications>\n    <obc-navigation-item label=\"Sub item 1\" hasIcon href=\"#\">\n      <obi-placeholder slot=\"icon\"></obi-placeholder>\n    </obc-navigation-item>\n  </obc-navigation-item-group>\n  <obc-navigation-item slot=\"footer\" label=\"Settings\" hasIcon href=\"#\">\n    <obi-settings-iec slot=\"icon\"></obi-settings-iec>\n  </obc-navigation-item>\n  <obc-vendor-button imageSrc=\"/companylogo-day.png\" alt=\"logo\" slot=\"logo\"></obc-vendor-button>\n</obc-navigation-menu>\n```\n\nIn this example, the menu displays a group with sub-items in the main navigation, several footer actions, and a logo.",
+          "description": "`<obc-navigation-menu>` – A flexible, slot-based navigation menu component for organizing primary and secondary navigation items.\n\nThis component provides a vertical navigation structure supporting groups, flyouts, and footer sections. It adapts to various layouts and device sizes via its `variant` and `smallScreen` properties. Items and groups are provided via slots, allowing for icons, labels, and nested navigation hierarchies.\n\nAppears as a sidebar or persistent navigation panel, supporting both icon-only and full-label modes. Designed for use as the main navigation in applications, dashboards, or any interface requiring structured navigation.\n\n## Features\n\n- **Variants:**\n  - **Full:** Displays both icons and labels for all navigation items (default).\n  - **IconOnly:** Shows only icons for a compact appearance. *Should only be used when no navigation items have sub-items or flyouts.*\n  - **IconOnlyLarge:** Icon-only mode that supports flyouts/submenus. Use when navigation contains groups or nested items.\n  - **Compact:** Reduces padding and overall width for a space-saving layout.\n  - **Tree:** Renders the same `obc-navigation-item` / `obc-navigation-item-group`\n    markup as a hierarchical tree. Groups expand inline (instead of as flyouts),\n    rows are indented by depth, multiple branches can stay open at once, and the\n    tree-row presentation (alert badges, terminal marker) is available via the\n    items' `alerts`/`terminalType` properties.\n- **Responsive Layout:**\n  - `smallScreen` property adapts the footer and logo layout for smaller viewports.\n- **Slot-based Content:**\n  - `main` slot for primary navigation items and groups.\n  - `footer` slot for secondary actions or links.\n  - `logo` slot for branding or logo placement (position adapts based on variant and screen size).\n- **Nested Navigation:**\n  - Supports nested groups and flyouts via `<obc-navigation-item-group>`.\n- **Automatic Variant Propagation:**\n  - Child items and groups automatically receive the correct variant for consistent appearance.\n- **Dynamic Content Handling:**\n  - Reacts to dynamic addition/removal of items and groups, updating layout and variants as needed.\n- **Interaction:**\n  - Clicking a navigation item closes all open groups/flyouts for streamlined navigation.\n\n## Usage Guidelines\n\nUse `<obc-navigation-menu>` as the main navigation container in your application layout. Place navigation items and groups in the `main` slot for primary navigation, and use the `footer` slot for secondary actions (such as settings or help). The `logo` slot is intended for branding and is positioned according to the selected variant and screen size.\n\n- Use the `Full` variant for standard navigation with both icons and labels.\n- Use `IconOnly` only when there are no nested groups or flyouts; otherwise, use `IconOnlyLarge` for icon-only navigation with flyout support.\n- The `Compact` variant is suitable for layouts with limited space or when a minimal navigation appearance is desired.\n- Use the `Tree` variant for hierarchical navigation (file trees, nested\n  sections). The existing item/group markup is reused unchanged — only the\n  `variant` changes. Footer and logo slots remain flat. Mark a group with\n  `defaultOpen` to have it start expanded.\n- Set `smallScreen` to `true` to optimize the layout for smaller devices or responsive breakpoints.\n\n**TODO(designer):** Provide additional guidance on when to use each variant and recommended slot content for best usability.\n\n## Slots\n\n| Slot Name | Renders When... | Purpose |\n|-----------|----------------|---------|\n| main      | Always         | Primary navigation items and groups. |\n| footer    | Always         | Secondary navigation items (e.g., settings, help). |\n| logo      | Always         | Branding/logo area (position varies by variant and screen size). |\n\nPlace `<obc-navigation-item>`, `<obc-navigation-item-group>`, or other suitable elements in these slots. For icons, use `<obi-placeholder>`, `<obi-applications>`, or other OpenBridge icon components in the `icon` slot of each navigation item.\n\n## Properties\n\n- `variant` (`ObcNavigationMenuVariant`): Controls the visual style and layout of the menu. Default is `Full`.\n- `smallScreen` (`boolean`): When `true`, adapts the layout for small screens (e.g., moves logo into the footer area).\n\n## Best Practices and Constraints\n\n- Only use the `IconOnly` variant when there are no navigation items with sub-items or flyouts. Use `IconOnlyLarge` if your navigation includes groups or nested items.\n- Place only navigation-related components in the `main` and `footer` slots for clarity and accessibility.\n- For best accessibility, ensure each navigation item has a clear label and, if using icons, a suitable `aria-label` or accessible name.\n- Avoid placing interactive elements other than navigation items/groups in the `main` or `footer` slots.\n\n## Example\n\n```html\n<obc-navigation-menu variant=\"full\">\n  <obc-navigation-item-group slot=\"main\" label=\"Apps\">\n    <obi-applications slot=\"icon\"></obi-applications>\n    <obc-navigation-item label=\"Sub item 1\" hasIcon href=\"#\">\n      <obi-placeholder slot=\"icon\"></obi-placeholder>\n    </obc-navigation-item>\n  </obc-navigation-item-group>\n  <obc-navigation-item slot=\"footer\" label=\"Settings\" hasIcon href=\"#\">\n    <obi-settings-iec slot=\"icon\"></obi-settings-iec>\n  </obc-navigation-item>\n  <obc-vendor-button imageSrc=\"/companylogo-day.png\" alt=\"logo\" slot=\"logo\"></obc-vendor-button>\n</obc-navigation-menu>\n```\n\nIn this example, the menu displays a group with sub-items in the main navigation, several footer actions, and a logo.",
           "name": "ObcNavigationMenu",
           "slots": [
             {
@@ -66742,7 +66666,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-tree-navigation-group>` – An expandable parent row in a tree-navigation\nstructure: a header row with an expand/collapse chevron, plus a slot for the\nchild rows it discloses.\n\nA group renders an `<obc-tree-navigation-item>` header (carrying its own label,\nicon, terminal type, and alert badge) followed by its slotted children. When\nplaced inside `<obc-tree-navigation>`, the container computes and assigns the\n`branches` guide lines for every row automatically from each row's position —\na group does not need its depth configured by hand.\n\nThe group manages only its own open/closed state and forwards header presentation\nto its internal header item. It does not draw guide lines itself; that is the\ncontainer's responsibility (see `<obc-tree-navigation>`).\n\n## Features\n- **Disclosure:** A chevron in the header toggles the slotted children. The open\n  state is held in `expanded` and reflected so the container and CSS can react.\n- **Header presentation:** `label`, the `icon` slot, `terminalType`, and the\n  alert badge (`hasAlertBadge`, `alertCount`, `alertType`) are forwarded to the\n  header row.\n- **Selection:** `checked` marks the group's header as the current item.\n- **Automatic guides:** Inside `<obc-tree-navigation>`, the header's `branches`\n  are assigned by the container; nested groups continue the guide columns down.\n\n## Usage Guidelines\n- Nest `<obc-tree-navigation-item>` (leaves) and further `<obc-tree-navigation-group>`\n  elements as children to build the hierarchy.\n- Always place groups and items inside an `<obc-tree-navigation>` container so the\n  guide lines are computed; using a group standalone draws a header with no guides.\n- Provide a header icon via the `icon` slot (forwarded to the header row).\n\n## Slots\n\n| Slot Name | Renders When...          | Purpose                                                      |\n|-----------|--------------------------|--------------------------------------------------------------|\n| icon      | `hasIcon` is true        | Leading icon for the group header row.                       |\n| (default) | Always                   | Child rows (`obc-tree-navigation-item` / `-group`).          |",
+          "description": "`<obc-tree-navigation-group>` – An expandable parent row in a tree-navigation\nstructure: a header row with an expand/collapse chevron, plus a slot for the\nchild rows it discloses.\n\nA group renders an `<obc-tree-navigation-item>` header (carrying its own label,\nicon, terminal type, and alert badges) followed by its slotted children. When\nplaced inside `<obc-tree-navigation>`, the container computes and assigns the\n`branches` guide lines for every row automatically from each row's position —\na group does not need its depth configured by hand.\n\nThe group manages only its own open/closed state and forwards header presentation\nto its internal header item. It does not draw guide lines itself; that is the\ncontainer's responsibility (see `<obc-tree-navigation>`).\n\n## Features\n- **Disclosure:** A chevron in the header toggles the slotted children. The open\n  state is held in `expanded` and reflected so the container and CSS can react.\n- **Header presentation:** `label`, the `icon` slot, `terminalType`, and the\n  `alerts` count map are forwarded to the header row.\n- **Selection:** `checked` marks the group's header as the current item.\n- **Automatic guides:** Inside `<obc-tree-navigation>`, the header's `branches`\n  are assigned by the container; nested groups continue the guide columns down.\n\n## Usage Guidelines\n- Nest `<obc-tree-navigation-item>` (leaves) and further `<obc-tree-navigation-group>`\n  elements as children to build the hierarchy.\n- Always place groups and items inside an `<obc-tree-navigation>` container so the\n  guide lines are computed; using a group standalone draws a header with no guides.\n- Provide a header icon via the `icon` slot (forwarded to the header row).\n\n## Slots\n\n| Slot Name | Renders When...          | Purpose                                                      |\n|-----------|--------------------------|--------------------------------------------------------------|\n| icon      | `hasIcon` is true        | Leading icon for the group header row.                       |\n| (default) | Always                   | Child rows (`obc-tree-navigation-item` / `-group`).          |",
           "name": "ObcTreeNavigationGroup",
           "slots": [
             {
@@ -66828,32 +66752,12 @@
             },
             {
               "kind": "field",
-              "name": "hasAlertBadge",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether a trailing alert counter badge is shown on the header row.",
-              "attribute": "hasAlertBadge"
-            },
-            {
-              "kind": "field",
-              "name": "alertCount",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number shown in the header's alert badge when `hasAlertBadge` is true.",
-              "attribute": "alertCount"
-            },
-            {
-              "kind": "field",
-              "name": "alertType",
+              "name": "alerts",
               "type": {
-                "text": "string"
+                "text": "TreeNavigationItemAlerts | undefined"
               },
-              "description": "The severity/type of the header's alert badge. One of the `obc-badge` types (default `alarm`).",
-              "attribute": "alertType"
+              "description": "Per-severity alert counts shown as trailing badge(s) on the header row.\nForwarded verbatim to the header `<obc-tree-navigation-item>` — typically a\ngroup sets `{aggregate: true, ...}` so its header shows one badge totalling\nthe alerts of the rows beneath it. See TreeNavigationItemAlerts.",
+              "attribute": "alerts"
             },
             {
               "kind": "field",
@@ -66974,30 +66878,12 @@
               "fieldName": "terminalType"
             },
             {
-              "name": "hasAlertBadge",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether a trailing alert counter badge is shown on the header row.",
-              "fieldName": "hasAlertBadge"
-            },
-            {
-              "name": "alertCount",
+              "name": "alerts",
               "type": {
-                "text": "number"
+                "text": "TreeNavigationItemAlerts | undefined"
               },
-              "default": "0",
-              "description": "The number shown in the header's alert badge when `hasAlertBadge` is true.",
-              "fieldName": "alertCount"
-            },
-            {
-              "name": "alertType",
-              "type": {
-                "text": "string"
-              },
-              "description": "The severity/type of the header's alert badge. One of the `obc-badge` types (default `alarm`).",
-              "fieldName": "alertType"
+              "description": "Per-severity alert counts shown as trailing badge(s) on the header row.\nForwarded verbatim to the header `<obc-tree-navigation-item>` — typically a\ngroup sets `{aggregate: true, ...}` so its header shows one badge totalling\nthe alerts of the rows beneath it. See TreeNavigationItemAlerts.",
+              "fieldName": "alerts"
             },
             {
               "name": "href",
@@ -67041,7 +66927,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-tree-navigation-item>` – A single row in a tree- or file-explorer-style\nnavigation list, with indentation guide lines, an optional expand/collapse\nchevron, a leading icon, a label, and an optional alert badge.\n\nEach row represents one node in a hierarchy. Depth is expressed through the\n`branches` array: one entry per ancestor level, each describing the guide line\nto draw for that level. The expand chevron lets a node disclose its children,\nemitting `expand-toggle` so a parent can manage the open/closed state.\n\n## Features\n- **Indentation guides:** Render one 32px guide column per `branches` entry —\n  pass-through vertical lines for ancestors that continue, and an elbow\n  (`intersection`) connecting the row to its parent.\n- **Expand/collapse:** Set `expandable` to show a chevron that rotates when\n  `expanded`. The chevron is a visual indicator only — activating the row\n  fires `expand-toggle` with the next state; manage `expanded` in response.\n  When `expanded`, a vertical guide descends from the chevron to connect to\n  the revealed child rows below.\n- **Terminal type:** `terminalType` adds an alert-header marker in the terminal\n  (`aggregatedHeader` or `groupHeader`), indicating the node heads a set of\n  aggregated or grouped alerts.\n- **Leading icon:** Provide an icon via the `icon` slot (shown when\n  `hasLeadingIcon`).\n- **Alert badge:** A trailing counter badge (e.g. an alarm count), toggled with\n  `hasAlertBadge` and configured via `alertCount` and `alertType`.\n- **Checked state:** `checked` highlights the current selection using the\n  amplified elevation style. A checked row is the current item and is not\n  re-selectable — it shows no hover/pressed feedback and fires no `click` or\n  navigation. An expandable checked row still toggles (fires `expand-toggle`),\n  so a group that is the current selection can be opened and closed. It stays\n  keyboard-focusable.\n- **Link or button:** Set `href` to render the row as a link; otherwise it acts\n  as a button.\n\n## Usage Guidelines\n- Use for hierarchical navigation such as file trees, layer panels, or nested\n  menus. For flat navigation lists, use `obc-navigation-item` instead.\n- Build `branches` from the row's ancestry: `intersection` for the level that\n  owns this row, `straight` for ancestors with siblings still to come, and\n  `blank` for ancestors whose subtrees have ended. When placed inside\n  `obc-tree-navigation`, the container computes `branches` automatically.\n- Keep one row `checked` at a time within a tree to mark the current location.\n- Leaf nodes should leave `expandable` as `false` so no chevron is shown.\n\n## Slots\n\n| Slot Name      | Renders When...                 | Purpose                                                                 |\n|----------------|---------------------------------|-------------------------------------------------------------------------|\n| icon           | `hasLeadingIcon` is true        | Leading icon for the row, e.g. `<obi-placeholder slot=\"icon\">`.         |",
+          "description": "`<obc-tree-navigation-item>` – A single row in a tree- or file-explorer-style\nnavigation list, with indentation guide lines, an optional expand/collapse\nchevron, a leading icon, a label, and an optional alert badge.\n\nEach row represents one node in a hierarchy. Depth is expressed through the\n`branches` array: one entry per ancestor level, each describing the guide line\nto draw for that level. The expand chevron lets a node disclose its children,\nemitting `expand-toggle` so a parent can manage the open/closed state.\n\n## Features\n- **Indentation guides:** Render one 32px guide column per `branches` entry —\n  pass-through vertical lines for ancestors that continue, and an elbow\n  (`intersection`) connecting the row to its parent.\n- **Expand/collapse:** Set `expandable` to show a chevron that rotates when\n  `expanded`. The chevron is a visual indicator only — activating the row\n  fires `expand-toggle` with the next state; manage `expanded` in response.\n  When `expanded`, a vertical guide descends from the chevron to connect to\n  the revealed child rows below.\n- **Terminal type:** `terminalType` adds an alert-header marker in the terminal\n  (`aggregatedHeader` or `groupHeader`), indicating the node heads a set of\n  aggregated or grouped alerts.\n- **Leading icon:** Provide an icon via the `icon` slot (shown when\n  `hasLeadingIcon`).\n- **Alert badges:** Trailing counter badges driven by the `alerts` object — a\n  per-severity count map with one field per level severity (critical, high,\n  medium, low, diagnostic). By default each non-zero count renders its own\n  badge, ordered most to least severe by `ALERT_SEVERITY_PRIORITY`; set\n  `alerts.aggregate` to instead show a single badge with the combined total,\n  styled as the highest category present.\n- **Checked state:** `checked` highlights the current selection using the\n  amplified elevation style. A checked row is the current item and is not\n  re-selectable — it shows no hover/pressed feedback and fires no `click` or\n  navigation. An expandable checked row still toggles (fires `expand-toggle`),\n  so a group that is the current selection can be opened and closed. It stays\n  keyboard-focusable.\n- **Link or button:** Set `href` to render the row as a link; otherwise it acts\n  as a button.\n\n## Usage Guidelines\n- Use for hierarchical navigation such as file trees, layer panels, or nested\n  menus. For flat navigation lists, use `obc-navigation-item` instead.\n- Build `branches` from the row's ancestry: `intersection` for the level that\n  owns this row, `straight` for ancestors with siblings still to come, and\n  `blank` for ancestors whose subtrees have ended. When placed inside\n  `obc-tree-navigation`, the container computes `branches` automatically.\n- Keep one row `checked` at a time within a tree to mark the current location.\n- Leaf nodes should leave `expandable` as `false` so no chevron is shown.\n\n## Slots\n\n| Slot Name      | Renders When...                 | Purpose                                                                 |\n|----------------|---------------------------------|-------------------------------------------------------------------------|\n| icon           | `hasLeadingIcon` is true        | Leading icon for the row, e.g. `<obi-placeholder slot=\"icon\">`.         |",
           "name": "ObcTreeNavigationItem",
           "slots": [
             {
@@ -67142,32 +67028,12 @@
             },
             {
               "kind": "field",
-              "name": "hasAlertBadge",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether a trailing alert counter badge is shown.",
-              "attribute": "hasAlertBadge"
-            },
-            {
-              "kind": "field",
-              "name": "alertCount",
+              "name": "alerts",
               "type": {
-                "text": "number"
+                "text": "TreeNavigationItemAlerts | undefined"
               },
-              "default": "0",
-              "description": "The number shown in the alert badge when `hasAlertBadge` is true.",
-              "attribute": "alertCount"
-            },
-            {
-              "kind": "field",
-              "name": "alertType",
-              "type": {
-                "text": "string"
-              },
-              "description": "The severity/type of the alert badge. One of the `obc-badge` types (default `alarm`).",
-              "attribute": "alertType"
+              "description": "Per-severity alert counts for the row's trailing badge(s). Omit (or leave\nevery count at 0) for a row with no alerts. See TreeNavigationItemAlerts.\n\n- When `aggregate` is true, a single badge is shown: its number is the sum\n  of all counts and its severity is the highest category present\n  (critical → alarm → warning → caution).\n- Otherwise one badge is shown per count greater than 0, ordered most to\n  least severe and spaced by the alert-counter spacing token.",
+              "attribute": "alerts"
             },
             {
               "kind": "field",
@@ -67206,6 +67072,16 @@
               ],
               "description": "Focuses the row's interactive wrapper (the host itself is not focusable)."
             },
+            {
+              "kind": "field",
+              "name": "alertBadges",
+              "type": {
+                "text": "{type: AlertType; count: number}[]"
+              },
+              "privacy": "private",
+              "description": "The badge(s) to render from `alerts`, as `{type, count}` pairs already in\nseverity order, ranked by `ALERT_SEVERITY_PRIORITY`.\n\n- No `alerts`, or every count 0 → no badges.\n- `aggregate` → a single pair: the summed count typed as the highest\n  category that has any alerts.\n- Otherwise → one pair per count greater than 0.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "isRoot",
@@ -67343,30 +67219,12 @@
               "fieldName": "terminalType"
             },
             {
-              "name": "hasAlertBadge",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether a trailing alert counter badge is shown.",
-              "fieldName": "hasAlertBadge"
-            },
-            {
-              "name": "alertCount",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number shown in the alert badge when `hasAlertBadge` is true.",
-              "fieldName": "alertCount"
-            },
-            {
-              "name": "alertType",
+              "name": "alerts",
               "type": {
-                "text": "string"
+                "text": "TreeNavigationItemAlerts | undefined"
               },
-              "description": "The severity/type of the alert badge. One of the `obc-badge` types (default `alarm`).",
-              "fieldName": "alertType"
+              "description": "Per-severity alert counts for the row's trailing badge(s). Omit (or leave\nevery count at 0) for a row with no alerts. See TreeNavigationItemAlerts.\n\n- When `aggregate` is true, a single badge is shown: its number is the sum\n  of all counts and its severity is the highest category present\n  (critical → alarm → warning → caution).\n- Otherwise one badge is shown per count greater than 0, ordered most to\n  least severe and spaced by the alert-counter spacing token.",
+              "fieldName": "alerts"
             },
             {
               "name": "href",

package/dist/components/navigation-item/navigation-item.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import { ObcNavigationMenuVariant } from '../navigation-menu/navigation-menu.js';
-import { TreeBranchType } from '../tree-navigation-item/tree-navigation-item.js';
+import { TreeBranchType, TreeNavigationItemAlerts } from '../tree-navigation-item/tree-navigation-item.js';
 import '../../icons/icon-arrow-flyout-google.js';
 import '../tree-navigation-item/tree-navigation-item.js';
 /**
@@ -132,12 +132,12 @@ export declare class ObcNavigationItem extends LitElement {
      * `aggregated-header`, or `group-header`. Has no effect in the flat variants.
      */
     terminalType: string;
-    /** Whether a trailing alert counter badge is shown (Tree variant only). */
-    hasAlertBadge: boolean;
-    /** The number shown in the alert badge when `hasAlertBadge` is true (Tree variant only). */
-    alertCount: number;
-    /** The severity/type of the alert badge — one of the `obc-badge` types (Tree variant only). */
-    alertType: string;
+    /**
+     * Per-severity alert counts shown as trailing badge(s) (Tree variant only).
+     * Forwarded to the underlying `obc-tree-navigation-item`. See
+     * {@link TreeNavigationItemAlerts}.
+     */
+    alerts?: TreeNavigationItemAlerts;
     private anchorElement?;
     private treeItemElement?;
     /**

package/dist/components/navigation-item/navigation-item.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation-item.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAC,wBAAwB,EAAC,MAAM,uCAAuC,CAAC;AAE/E,OAAO,iDAAiD,CAAC;AACzD,OAAO,EACL,cAAc,~~EAEf~~,MAAM,iDAAiD,CAAC;~~AAQzD~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AAEH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;OAGG;IACuB,KAAK,SAAW;IAE1C;;;;OAIG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACuB,OAAO,2BAAiC;IAElE;;;OAGG;IACwB,KAAK,UAAS;IAEzC;;;OAGG;IACwB,aAAa,UAAS;IAEjD;;OAEG;IACuC,OAAO,UAAS;IAE/B,eAAe,UAAS;IAEnD,yFAAyF;IAC9D,QAAQ,UAAS;IAE5C,4EAA4E;IACnD,YAAY,EAAE,cAAc,EAAE,CAAM;IAE7D;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAA4B;IAE1E~~,2EAA2E~~;~~IAChD~~,~~aAAa~~,~~UAAS;IAEjD~~,~~4FAA4F;IAClE,UAAU,SAAK;IAEzC,+FAA+F;IACrE,SAAS,~~EAAE,~~MAAM~~,~~CAAmB~~;~~IAElD~~,OAAO,CAAC,aAAa,CAAC,CAAoB;IAGnB,OAAO,CAAC,eAAe,CAAC,CAAc;IAEzE;;;OAGG;IACH,OAAO;IAIP,OAAO,CAAC,aAAa;IAYL,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInD,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,eAAe;IAUd,MAAM;~~IAkFf~~,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
1	+ {"version":3,"file":"navigation-item.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAC,wBAAwB,EAAC,MAAM,uCAAuC,CAAC;AAE/E,OAAO,iDAAiD,CAAC;AACzD,OAAO,EACL,cAAc,EAEd,KAAK,wBAAwB,EAC9B,MAAM,iDAAiD,CAAC;AAOzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AAEH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;OAGG;IACuB,KAAK,SAAW;IAE1C;;;;OAIG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACuB,OAAO,2BAAiC;IAElE;;;OAGG;IACwB,KAAK,UAAS;IAEzC;;;OAGG;IACwB,aAAa,UAAS;IAEjD;;OAEG;IACuC,OAAO,UAAS;IAE/B,eAAe,UAAS;IAEnD,yFAAyF;IAC9D,QAAQ,UAAS;IAE5C,4EAA4E;IACnD,YAAY,EAAE,cAAc,EAAE,CAAM;IAE7D;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAA4B;IAE1E;;;;OAIG;IACuB,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAEhD,OAAO,CAAC,aAAa,CAAC,CAAoB;IAGnB,OAAO,CAAC,eAAe,CAAC,CAAc;IAEzE;;;OAGG;IACH,OAAO;IAIP,OAAO,CAAC,aAAa;IAYL,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInD,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,eAAe;IAUd,MAAM;IAgFf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/components/navigation-item/navigation-item.js CHANGED Viewed

@@ -7,7 +7,6 @@ import "../../icons/icon-arrow-flyout-google.js";
 import { ObcNavigationMenuVariant } from "../navigation-menu/navigation-menu.js";
 import { customElement } from "../../decorator.js";
 import { TreeTerminalType } from "../tree-navigation-item/tree-navigation-item.js";
-import { BadgeType } from "../badge/badge.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -31,9 +30,6 @@ let ObcNavigationItem = class extends LitElement {
     this.treeMode = false;
     this.treeBranches = [];
     this.terminalType = TreeTerminalType.regular;
-    this.hasAlertBadge = false;
-    this.alertCount = 0;
-    this.alertType = BadgeType.alarm;
   }
   /**
    * Fired when the navigation item is clicked (either as a link or button).
@@ -80,9 +76,7 @@ let ObcNavigationItem = class extends LitElement {
           .hasLeadingIcon=${this.hasIcon}
           .href=${this.href}
           .terminalType=${this.terminalType}
-          ?hasAlertBadge=${this.hasAlertBadge}
-          .alertCount=${this.alertCount}
-          .alertType=${this.alertType}
+          .alerts=${this.alerts}
           @click=${this.onClick}
         >
           ${this.hasIcon ? html`<slot name="icon" slot="icon"></slot>` : nothing}
@@ -170,14 +164,8 @@ __decorateClass([
   property({ type: String })
 ], ObcNavigationItem.prototype, "terminalType", 2);
 __decorateClass([
-  property({ type: Boolean })
-], ObcNavigationItem.prototype, "hasAlertBadge", 2);
-__decorateClass([
-  property({ type: Number })
-], ObcNavigationItem.prototype, "alertCount", 2);
-__decorateClass([
-  property({ type: String })
-], ObcNavigationItem.prototype, "alertType", 2);
+  property({ type: Object })
+], ObcNavigationItem.prototype, "alerts", 2);
 __decorateClass([
   query("a")
 ], ObcNavigationItem.prototype, "anchorElement", 2);

package/dist/components/navigation-item/navigation-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation-item.js","sources":["../../../src/components/navigation-item/navigation-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport compentStyle from './navigation-item.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport '../../icons/icon-arrow-flyout-google.js';\nimport {ObcNavigationMenuVariant} from '../navigation-menu/navigation-menu.js';\nimport {customElement} from '../../decorator.js';\nimport '../tree-navigation-item/tree-navigation-item.js';\nimport {\n TreeBranchType,\n TreeTerminalType,\n} from '../tree-navigation-item/tree-navigation-item.js';\nimport {BadgeType} from '../badge/badge.js';\n\nenum NavigationItemRole {\n Button = 'button',\n MenuItem = 'menuitem',\n}\n\n/*\n `<obc-navigation-item>` – A navigation menu item component for use in navigation bars, side menus, or toolbars.\n \n Displays a selectable navigation option, optionally with an icon and support for different visual variants. Can be used as a link or as a button within navigation menus, supporting both single items and grouped menu structures.\n \n Appears as a horizontal or vertical item, with optional icon, label, and flyout indicator for nested or grouped navigation. Designed for use in navigation menus, toolbars, or any UI requiring a consistent, interactive navigation element.\n \n ## Features\n * - Variants:\n * - `Full` (default): Standard navigation item with icon (optional), label, and optional flyout indicator for groups.\n * - `IconOnly`: Displays only the icon, suitable for compact or icon-based navigation menus.\n * - `IconOnlyLarge`: Larger icon-only variant for prominent navigation actions.\n * - `Compact`: Smaller, vertically-stacked layout with icon and label, optimized for space-constrained menus.\n * - Icon Support:\n * - Leading icon can be provided via the `icon` slot.\n * - Icon presence is automatically detected and styled.\n * - Label:\n * - Text label shown unless in icon-only variants.\n * - Checked State:\n * - Indicates the currently selected or active navigation item.\n * - Group Mode:\n * - When `group` is true, displays a flyout indicator (arrow) and supports group selection highlighting.\n * - Link Support:\n * - Can be rendered as a link via the `href` property, or as a button if `href` is not set.\n * - Accessibility:\n * - Uses semantic anchor element for navigation.\n \n ## Usage Guidelines\n * Use `obc-navigation-item` for interactive navigation options within menus, toolbars, or navigation drawers.\n * - Ideal for main or secondary navigation, especially where visual consistency and flexible layout are needed.\n * - Use the `Full` variant for standard navigation lists with both icon and label.\n * - Use `IconOnly` or `IconOnlyLarge` for toolbars or sidebars where space is limited or icon-only navigation is preferred.\n * - Use `Compact` for dense menus or when vertical stacking of icon and label is desired.\n * - Set `checked` to highlight the currently active or selected item.\n * - Use `group` and `groupSelected` to indicate grouped navigation and selection within groups.\n * - Provide an icon via the `icon` slot for visual context (e.g., `<obi-placeholder slot=\"icon\"></obi-placeholder>).\n * - Use `href` to make the item a link; omit for button-like behavior.\n * - Use `::part(label)` CSS pseudo-element to style the label.\n \n TODO(designer): Clarify if there are recommended icon choices or label length constraints for each variant.\n \n ## Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|-----------------\|---------\|\n * \| icon \| Always (optional) \| Leading icon for the navigation item. Place an icon such as `<obi-placeholder slot=\"icon\"></obi-placeholder>`. \|\n \n ## Properties and Attributes\n * - `label` (string): The text label for the navigation item. Hidden in icon-only variants.\n * - `href` (string, optional): If set, the item is rendered as a link. If undefined, acts as a button.\n * - `checked` (boolean): Marks the item as selected/active.\n * - `variant` (string): Controls the visual style. One of `Full`, `IconOnly`, `IconOnlyLarge`, or `Compact`.\n * - `group` (boolean): Enables group mode, showing a flyout indicator and supporting group selection.\n * - `groupSelected` (boolean): Highlights the item as selected within a group.\n * - `hasIcon` (boolean): Whether the item has a leading icon.\n \n ## Events\n * - `click` – Fired when the navigation item is clicked (either as a link or button).\n \n ## Best Practices and Constraints\n * - Only use one navigation item as `checked` at a time within a menu to indicate the current location.\n * - For icon-only variants, ensure the icon clearly represents the navigation action.\n * - Use `group` for items that open submenus or represent grouped navigation.\n * - Avoid long labels in compact or icon-only variants to maintain layout integrity.\n * - For accessibility, provide meaningful labels and icons.\n \n ## Example:\n * ```\n * <obc-navigation-item\n * label=\"Dashboard\"\n * href=\"/dashboard\"\n * checked\n * variant=\"Full\"\n * >\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-navigation-item>\n * ```\n \n @slot icon - Leading icon slot (optional, shown if provided). Set `hasIcon` to `true` to show the icon.\n * @slot trailing-icon - Trailing icon slot (optional, shown if provided). Set `hasTrailingIcon` to `true` to show.\n * @fires click {CustomEvent<void>} Fired when the navigation item is clicked.\n /\n\n@customElement('obc-navigation-item')\nexport class ObcNavigationItem extends LitElement {\n /\n The text label displayed for the navigation item.\n * Hidden in icon-only variants.\n /\n @property({type: String}) label = 'Label';\n\n /\n The URL to navigate to when the item is clicked.\n * If set, the item is rendered as a link (`<a href=\"...\" />`).\n * If undefined, acts as a button.\n /\n @property({type: String}) href: string \| undefined;\n\n /\n Whether the navigation item is currently selected/active.\n * Use to indicate the current location or selection.\n /\n @property({type: Boolean}) checked = false;\n\n /\n Visual variant of the navigation item.\n * One of `Full` (default), `IconOnly`, `IconOnlyLarge`, or `Compact`.\n * Controls layout and visibility of icon/label.\n /\n @property({type: String}) variant = ObcNavigationMenuVariant.Full;\n\n /\n Enables group mode for the item, displaying a flyout indicator and supporting group selection.\n * Use for items that open submenus or represent grouped navigation.\n /\n @property({type: Boolean}) group = false;\n\n /\n Highlights the item as selected within a group.\n * Only relevant when `group` is true.\n /\n @property({type: Boolean}) groupSelected = false;\n\n /\n Whether the item has a leading icon.\n /\n @property({type: Boolean, reflect: true}) hasIcon = false;\n\n @property({type: Boolean}) hasTrailingIcon = false;\n\n /* Set by `obc-navigation-menu` in its Tree variant — renders the row as a tree item. /\n @property({type: Boolean}) treeMode = false;\n\n /* Indentation columns for tree mode, assigned by `obc-navigation-menu`. /\n @property({type: Array}) treeBranches: TreeBranchType[] = [];\n\n /\n Terminal type for the row in the Tree variant — one of `regular` (default),\n * `aggregated-header`, or `group-header`. Has no effect in the flat variants.\n /\n @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n /* Whether a trailing alert counter badge is shown (Tree variant only). /\n @property({type: Boolean}) hasAlertBadge = false;\n\n /* The number shown in the alert badge when `hasAlertBadge` is true (Tree variant only). /\n @property({type: Number}) alertCount = 0;\n\n /* The severity/type of the alert badge — one of the `obc-badge` types (Tree variant only). /\n @property({type: String}) alertType: string = BadgeType.alarm;\n\n @query('a') private anchorElement?: HTMLAnchorElement;\n\n // In tree mode the row renders an `obc-tree-navigation-item` instead of an `<a>`.\n @query('obc-tree-navigation-item') private treeItemElement?: HTMLElement;\n\n /\n Fired when the navigation item is clicked (either as a link or button).\n * @fires click {CustomEvent<void>}\n */\n onClick() {\n dispatchEvent(new CustomEvent('click'));\n }\n\n private handleKeydown(event: KeyboardEvent) {\n const isMenuItem =\n this.getAttribute('role') === NavigationItemRole.MenuItem;\n if (this.href !== undefined && !isMenuItem) return;\n if (event.key !== 'Enter' && event.key !== ' ') {\n return;\n }\n\n event.preventDefault();\n this.anchorElement?.click();\n }\n\n public override focus(options?: FocusOptions): void {\n (this.treeItemElement ?? this.anchorElement)?.focus(options);\n }\n\n private getItemRole(): NavigationItemRole \| undefined {\n const hostRole = this.getAttribute('role');\n if (hostRole === NavigationItemRole.MenuItem) {\n return NavigationItemRole.MenuItem;\n }\n\n return this.href === undefined ? NavigationItemRole.Button : undefined;\n }\n\n private getItemTabIndex(): number \| undefined {\n const hostTabIndex = this.getAttribute('tabindex');\n if (hostTabIndex !== null) {\n const parsedTabIndex = Number(hostTabIndex);\n return Number.isNaN(parsedTabIndex) ? undefined : parsedTabIndex;\n }\n\n return this.href === undefined ? 0 : undefined;\n }\n\n override render() {\n if (this.treeMode) {\n // Delegate the whole row to the tree item: it owns focus, keyboard\n // activation, the checked-inert behavior, and href navigation. Forward its\n // activation as this item's own `click` so selection wiring is unchanged.\n return html`\n <obc-tree-navigation-item\n class=\"tree\"\n .label=${this.label}\n .branches=${this.treeBranches}\n ?checked=${this.checked}\n .hasLeadingIcon=${this.hasIcon}\n .href=${this.href}\n .terminalType=${this.terminalType}\n ?hasAlertBadge=${this.hasAlertBadge}\n .alertCount=${this.alertCount}\n .alertType=${this.alertType}\n @click=${this.onClick}\n >\n ${this.hasIcon\n ? html`<slot name=\"icon\" slot=\"icon\"></slot>`\n : nothing}\n </obc-tree-navigation-item>\n `;\n }\n\n const showFlyout =\n this.group && this.variant !== ObcNavigationMenuVariant.IconOnly;\n const isCompact = this.variant === ObcNavigationMenuVariant.Compact;\n\n return html`\n <a\n class=\"${classMap({\n wrapper: true,\n checked: this.checked,\n 'group-selected': this.groupSelected && this.group,\n 'has-icon': this.hasIcon,\n [this.variant]: true,\n })}\"\n href=${ifDefined(this.href)}\n @click=${this.onClick}\n @keydown=${this.handleKeydown}\n tabindex=${ifDefined(this.getItemTabIndex())}\n role=${ifDefined(this.getItemRole())}\n >\n <div class=\"visible-wrapper\">\n ${this.hasIcon\n ? html`<slot name=\"icon\" class=\"icon leading\"></slot>`\n : nothing}\n ${![\n ObcNavigationMenuVariant.IconOnly,\n ObcNavigationMenuVariant.IconOnlyLarge,\n ].includes(this.variant)\n ? html`\n <span\n part=\"label\"\n class=${classMap({\n label: true,\n 'label-flyout': showFlyout && !isCompact,\n })}\n >\n ${this.label}\n </span>\n `\n : nothing}\n ${showFlyout\n ? html`\n <div class=\"flyout-wrapper\">\n <obi-arrow-flyout-google\n class=\"icon trailing\"\n ></obi-arrow-flyout-google>\n </div>\n `\n : nothing}\n ${this.hasTrailingIcon && !showFlyout\n ? html`<slot name=\"trailing-icon\" class=\"icon trailing\"></slot>`\n : nothing}\n </div>\n </a>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-navigation-item': ObcNavigationItem;\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"navigation-item.js","sources":["../../../src/components/navigation-item/navigation-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport compentStyle from './navigation-item.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport '../../icons/icon-arrow-flyout-google.js';\nimport {ObcNavigationMenuVariant} from '../navigation-menu/navigation-menu.js';\nimport {customElement} from '../../decorator.js';\nimport '../tree-navigation-item/tree-navigation-item.js';\nimport {\n TreeBranchType,\n TreeTerminalType,\n type TreeNavigationItemAlerts,\n} from '../tree-navigation-item/tree-navigation-item.js';\n\nenum NavigationItemRole {\n Button = 'button',\n MenuItem = 'menuitem',\n}\n\n/*\n `<obc-navigation-item>` – A navigation menu item component for use in navigation bars, side menus, or toolbars.\n \n Displays a selectable navigation option, optionally with an icon and support for different visual variants. Can be used as a link or as a button within navigation menus, supporting both single items and grouped menu structures.\n \n Appears as a horizontal or vertical item, with optional icon, label, and flyout indicator for nested or grouped navigation. Designed for use in navigation menus, toolbars, or any UI requiring a consistent, interactive navigation element.\n \n ## Features\n * - Variants:\n * - `Full` (default): Standard navigation item with icon (optional), label, and optional flyout indicator for groups.\n * - `IconOnly`: Displays only the icon, suitable for compact or icon-based navigation menus.\n * - `IconOnlyLarge`: Larger icon-only variant for prominent navigation actions.\n * - `Compact`: Smaller, vertically-stacked layout with icon and label, optimized for space-constrained menus.\n * - Icon Support:\n * - Leading icon can be provided via the `icon` slot.\n * - Icon presence is automatically detected and styled.\n * - Label:\n * - Text label shown unless in icon-only variants.\n * - Checked State:\n * - Indicates the currently selected or active navigation item.\n * - Group Mode:\n * - When `group` is true, displays a flyout indicator (arrow) and supports group selection highlighting.\n * - Link Support:\n * - Can be rendered as a link via the `href` property, or as a button if `href` is not set.\n * - Accessibility:\n * - Uses semantic anchor element for navigation.\n \n ## Usage Guidelines\n * Use `obc-navigation-item` for interactive navigation options within menus, toolbars, or navigation drawers.\n * - Ideal for main or secondary navigation, especially where visual consistency and flexible layout are needed.\n * - Use the `Full` variant for standard navigation lists with both icon and label.\n * - Use `IconOnly` or `IconOnlyLarge` for toolbars or sidebars where space is limited or icon-only navigation is preferred.\n * - Use `Compact` for dense menus or when vertical stacking of icon and label is desired.\n * - Set `checked` to highlight the currently active or selected item.\n * - Use `group` and `groupSelected` to indicate grouped navigation and selection within groups.\n * - Provide an icon via the `icon` slot for visual context (e.g., `<obi-placeholder slot=\"icon\"></obi-placeholder>).\n * - Use `href` to make the item a link; omit for button-like behavior.\n * - Use `::part(label)` CSS pseudo-element to style the label.\n \n TODO(designer): Clarify if there are recommended icon choices or label length constraints for each variant.\n \n ## Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|-----------------\|---------\|\n * \| icon \| Always (optional) \| Leading icon for the navigation item. Place an icon such as `<obi-placeholder slot=\"icon\"></obi-placeholder>`. \|\n \n ## Properties and Attributes\n * - `label` (string): The text label for the navigation item. Hidden in icon-only variants.\n * - `href` (string, optional): If set, the item is rendered as a link. If undefined, acts as a button.\n * - `checked` (boolean): Marks the item as selected/active.\n * - `variant` (string): Controls the visual style. One of `Full`, `IconOnly`, `IconOnlyLarge`, or `Compact`.\n * - `group` (boolean): Enables group mode, showing a flyout indicator and supporting group selection.\n * - `groupSelected` (boolean): Highlights the item as selected within a group.\n * - `hasIcon` (boolean): Whether the item has a leading icon.\n \n ## Events\n * - `click` – Fired when the navigation item is clicked (either as a link or button).\n \n ## Best Practices and Constraints\n * - Only use one navigation item as `checked` at a time within a menu to indicate the current location.\n * - For icon-only variants, ensure the icon clearly represents the navigation action.\n * - Use `group` for items that open submenus or represent grouped navigation.\n * - Avoid long labels in compact or icon-only variants to maintain layout integrity.\n * - For accessibility, provide meaningful labels and icons.\n \n ## Example:\n * ```\n * <obc-navigation-item\n * label=\"Dashboard\"\n * href=\"/dashboard\"\n * checked\n * variant=\"Full\"\n * >\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-navigation-item>\n * ```\n \n @slot icon - Leading icon slot (optional, shown if provided). Set `hasIcon` to `true` to show the icon.\n * @slot trailing-icon - Trailing icon slot (optional, shown if provided). Set `hasTrailingIcon` to `true` to show.\n * @fires click {CustomEvent<void>} Fired when the navigation item is clicked.\n /\n\n@customElement('obc-navigation-item')\nexport class ObcNavigationItem extends LitElement {\n /\n The text label displayed for the navigation item.\n * Hidden in icon-only variants.\n /\n @property({type: String}) label = 'Label';\n\n /\n The URL to navigate to when the item is clicked.\n * If set, the item is rendered as a link (`<a href=\"...\" />`).\n * If undefined, acts as a button.\n /\n @property({type: String}) href: string \| undefined;\n\n /\n Whether the navigation item is currently selected/active.\n * Use to indicate the current location or selection.\n /\n @property({type: Boolean}) checked = false;\n\n /\n Visual variant of the navigation item.\n * One of `Full` (default), `IconOnly`, `IconOnlyLarge`, or `Compact`.\n * Controls layout and visibility of icon/label.\n /\n @property({type: String}) variant = ObcNavigationMenuVariant.Full;\n\n /\n Enables group mode for the item, displaying a flyout indicator and supporting group selection.\n * Use for items that open submenus or represent grouped navigation.\n /\n @property({type: Boolean}) group = false;\n\n /\n Highlights the item as selected within a group.\n * Only relevant when `group` is true.\n /\n @property({type: Boolean}) groupSelected = false;\n\n /\n Whether the item has a leading icon.\n /\n @property({type: Boolean, reflect: true}) hasIcon = false;\n\n @property({type: Boolean}) hasTrailingIcon = false;\n\n /* Set by `obc-navigation-menu` in its Tree variant — renders the row as a tree item. /\n @property({type: Boolean}) treeMode = false;\n\n /* Indentation columns for tree mode, assigned by `obc-navigation-menu`. /\n @property({type: Array}) treeBranches: TreeBranchType[] = [];\n\n /\n Terminal type for the row in the Tree variant — one of `regular` (default),\n * `aggregated-header`, or `group-header`. Has no effect in the flat variants.\n /\n @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n /\n Per-severity alert counts shown as trailing badge(s) (Tree variant only).\n * Forwarded to the underlying `obc-tree-navigation-item`. See\n * {@link TreeNavigationItemAlerts}.\n /\n @property({type: Object}) alerts?: TreeNavigationItemAlerts;\n\n @query('a') private anchorElement?: HTMLAnchorElement;\n\n // In tree mode the row renders an `obc-tree-navigation-item` instead of an `<a>`.\n @query('obc-tree-navigation-item') private treeItemElement?: HTMLElement;\n\n /\n Fired when the navigation item is clicked (either as a link or button).\n * @fires click {CustomEvent<void>}\n */\n onClick() {\n dispatchEvent(new CustomEvent('click'));\n }\n\n private handleKeydown(event: KeyboardEvent) {\n const isMenuItem =\n this.getAttribute('role') === NavigationItemRole.MenuItem;\n if (this.href !== undefined && !isMenuItem) return;\n if (event.key !== 'Enter' && event.key !== ' ') {\n return;\n }\n\n event.preventDefault();\n this.anchorElement?.click();\n }\n\n public override focus(options?: FocusOptions): void {\n (this.treeItemElement ?? this.anchorElement)?.focus(options);\n }\n\n private getItemRole(): NavigationItemRole \| undefined {\n const hostRole = this.getAttribute('role');\n if (hostRole === NavigationItemRole.MenuItem) {\n return NavigationItemRole.MenuItem;\n }\n\n return this.href === undefined ? NavigationItemRole.Button : undefined;\n }\n\n private getItemTabIndex(): number \| undefined {\n const hostTabIndex = this.getAttribute('tabindex');\n if (hostTabIndex !== null) {\n const parsedTabIndex = Number(hostTabIndex);\n return Number.isNaN(parsedTabIndex) ? undefined : parsedTabIndex;\n }\n\n return this.href === undefined ? 0 : undefined;\n }\n\n override render() {\n if (this.treeMode) {\n // Delegate the whole row to the tree item: it owns focus, keyboard\n // activation, the checked-inert behavior, and href navigation. Forward its\n // activation as this item's own `click` so selection wiring is unchanged.\n return html`\n <obc-tree-navigation-item\n class=\"tree\"\n .label=${this.label}\n .branches=${this.treeBranches}\n ?checked=${this.checked}\n .hasLeadingIcon=${this.hasIcon}\n .href=${this.href}\n .terminalType=${this.terminalType}\n .alerts=${this.alerts}\n @click=${this.onClick}\n >\n ${this.hasIcon\n ? html`<slot name=\"icon\" slot=\"icon\"></slot>`\n : nothing}\n </obc-tree-navigation-item>\n `;\n }\n\n const showFlyout =\n this.group && this.variant !== ObcNavigationMenuVariant.IconOnly;\n const isCompact = this.variant === ObcNavigationMenuVariant.Compact;\n\n return html`\n <a\n class=\"${classMap({\n wrapper: true,\n checked: this.checked,\n 'group-selected': this.groupSelected && this.group,\n 'has-icon': this.hasIcon,\n [this.variant]: true,\n })}\"\n href=${ifDefined(this.href)}\n @click=${this.onClick}\n @keydown=${this.handleKeydown}\n tabindex=${ifDefined(this.getItemTabIndex())}\n role=${ifDefined(this.getItemRole())}\n >\n <div class=\"visible-wrapper\">\n ${this.hasIcon\n ? html`<slot name=\"icon\" class=\"icon leading\"></slot>`\n : nothing}\n ${![\n ObcNavigationMenuVariant.IconOnly,\n ObcNavigationMenuVariant.IconOnlyLarge,\n ].includes(this.variant)\n ? html`\n <span\n part=\"label\"\n class=${classMap({\n label: true,\n 'label-flyout': showFlyout && !isCompact,\n })}\n >\n ${this.label}\n </span>\n `\n : nothing}\n ${showFlyout\n ? html`\n <div class=\"flyout-wrapper\">\n <obi-arrow-flyout-google\n class=\"icon trailing\"\n ></obi-arrow-flyout-google>\n </div>\n `\n : nothing}\n ${this.hasTrailingIcon && !showFlyout\n ? html`<slot name=\"trailing-icon\" class=\"icon trailing\"></slot>`\n : nothing}\n </div>\n </a>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-navigation-item': ObcNavigationItem;\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/navigation-item-group/navigation-item-group.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import { ObcNavigationMenuVariant } from '../navigation-menu/navigation-menu.js';
-import { TreeBranchType } from '../tree-navigation-item/tree-navigation-item.js';
+import { TreeBranchType, TreeNavigationItemAlerts } from '../tree-navigation-item/tree-navigation-item.js';
 import '../tree-navigation-item/tree-navigation-item.js';
 /**
  * `<obc-navigation-item-group>` – A collapsible navigation group component for organizing related navigation items under a single expandable label.
@@ -88,12 +88,13 @@ export declare class ObcNavigationItemGroup extends LitElement {
      * (default), `aggregated-header`, or `group-header`. No effect in flat variants.
      */
     terminalType: string;
-    /** Whether a trailing alert counter badge is shown on the header (Tree variant only). */
-    hasAlertBadge: boolean;
-    /** The number shown in the header's alert badge when `hasAlertBadge` is true (Tree variant only). */
-    alertCount: number;
-    /** The severity/type of the header's alert badge — one of the `obc-badge` types (Tree variant only). */
-    alertType: string;
+    /**
+     * Per-severity alert counts shown as trailing badge(s) on the group header
+     * (Tree variant only). Forwarded to the underlying `obc-tree-navigation-item`;
+     * typically `{aggregate: true, ...}` so the header totals the rows beneath it.
+     * See {@link TreeNavigationItemAlerts}.
+     */
+    alerts?: TreeNavigationItemAlerts;
     /** Whether the group starts expanded. Useful for trees that open by default. */
     defaultOpen: boolean;
     private openContainer;

package/dist/components/navigation-item-group/navigation-item-group.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation-item-group.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item-group/navigation-item-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAC,wBAAwB,EAAC,MAAM,uCAAuC,CAAC;AAG/E,OAAO,iDAAiD,CAAC;AACzD,OAAO,EACL,cAAc,~~EAEf~~,MAAM,iDAAiD,CAAC;~~AAGzD~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD;;OAEG;IACuB,KAAK,SAAW;IAE1C;;;OAGG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACuB,OAAO,EAAE,wBAAwB,CAC3B;IAEhC;;OAEG;IACwB,GAAG,UAAS;IAEZ,OAAO,UAAS;IAE3C,0FAA0F;IAC/D,QAAQ,UAAS;IAE5C,4EAA4E;IACnD,YAAY,EAAE,cAAc,EAAE,CAAM;IAE7D;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAA4B;IAE1E~~,yFAAyF~~;~~IAC9D~~,~~aAAa~~,~~UAAS;IAEjD~~,~~qGAAqG;IAC3E,UAAU,SAAK;IAEzC,wGAAwG;IAC9E,SAAS,~~EAAE,~~MAAM~~,~~CAAmB~~;~~IAE9D~~,gFAAgF;IACrD,WAAW,UAAS;IAEtC,OAAO,CAAC,aAAa,CAAS;IAKvC,OAAO,CAAC,SAAS,CAAC,CAAc;IAEvB,YAAY;IAMrB,wEAAwE;IACxE,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,OAAO,CAAC,YAAY;IAQpB;;;OAGG;IACH,IAAI;IAKJ,KAAK;IAOW,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C,MAAM;~~IAgEf~~,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,2BAA2B,EAAE,sBAAsB,CAAC;KACrD;CACF"}
1	+ {"version":3,"file":"navigation-item-group.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item-group/navigation-item-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAC,wBAAwB,EAAC,MAAM,uCAAuC,CAAC;AAG/E,OAAO,iDAAiD,CAAC;AACzD,OAAO,EACL,cAAc,EAEd,KAAK,wBAAwB,EAC9B,MAAM,iDAAiD,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD;;OAEG;IACuB,KAAK,SAAW;IAE1C;;;OAGG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACuB,OAAO,EAAE,wBAAwB,CAC3B;IAEhC;;OAEG;IACwB,GAAG,UAAS;IAEZ,OAAO,UAAS;IAE3C,0FAA0F;IAC/D,QAAQ,UAAS;IAE5C,4EAA4E;IACnD,YAAY,EAAE,cAAc,EAAE,CAAM;IAE7D;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAA4B;IAE1E;;;;;OAKG;IACuB,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAE5D,gFAAgF;IACrD,WAAW,UAAS;IAEtC,OAAO,CAAC,aAAa,CAAS;IAKvC,OAAO,CAAC,SAAS,CAAC,CAAc;IAEvB,YAAY;IAMrB,wEAAwE;IACxE,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,OAAO,CAAC,YAAY;IAQpB;;;OAGG;IACH,IAAI;IAKJ,KAAK;IAOW,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C,MAAM;IA8Df,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,2BAA2B,EAAE,sBAAsB,CAAC;KACrD;CACF"}

package/dist/components/navigation-item-group/navigation-item-group.js CHANGED Viewed

@@ -5,7 +5,6 @@ import { ObcNavigationMenuVariant } from "../navigation-menu/navigation-menu.js"
 import { classMap } from "lit/directives/class-map.js";
 import { customElement } from "../../decorator.js";
 import { TreeTerminalType } from "../tree-navigation-item/tree-navigation-item.js";
-import { BadgeType } from "../badge/badge.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -27,9 +26,6 @@ let ObcNavigationItemGroup = class extends LitElement {
     this.treeMode = false;
     this.treeBranches = [];
     this.terminalType = TreeTerminalType.regular;
-    this.hasAlertBadge = false;
-    this.alertCount = 0;
-    this.alertType = BadgeType.alarm;
     this.defaultOpen = false;
     this.openContainer = false;
   }
@@ -78,9 +74,7 @@ let ObcNavigationItemGroup = class extends LitElement {
           ?checked=${this.checked}
           .hasLeadingIcon=${this.hasIcon}
           .terminalType=${this.terminalType}
-          ?hasAlertBadge=${this.hasAlertBadge}
-          .alertCount=${this.alertCount}
-          .alertType=${this.alertType}
+          .alerts=${this.expanded ? void 0 : this.alerts}
           @expand-toggle=${this.onClickGroup}
         >
           ${this.hasIcon ? html`<slot name="icon" slot="icon"></slot>` : nothing}
@@ -156,14 +150,8 @@ __decorateClass([
   property({ type: String })
 ], ObcNavigationItemGroup.prototype, "terminalType", 2);
 __decorateClass([
-  property({ type: Boolean })
-], ObcNavigationItemGroup.prototype, "hasAlertBadge", 2);
-__decorateClass([
-  property({ type: Number })
-], ObcNavigationItemGroup.prototype, "alertCount", 2);
-__decorateClass([
-  property({ type: String })
-], ObcNavigationItemGroup.prototype, "alertType", 2);
+  property({ type: Object })
+], ObcNavigationItemGroup.prototype, "alerts", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcNavigationItemGroup.prototype, "defaultOpen", 2);