@fundamental-styles/mcp 0.42.0-rc.1 → 0.42.0-rc.3

package/data/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.42.0-rc.3](https://github.com/SAP/fundamental-styles/compare/v0.42.0-rc.2...v0.42.0-rc.3) (2026-10-06)
+
+**Note:** Version bump only for package fundamental-styles
+
+# [0.42.0-rc.2](https://github.com/SAP/fundamental-styles/compare/v0.42.0-rc.1...v0.42.0-rc.2) (2026-10-05)
+
+**Note:** Version bump only for package fundamental-styles
+
 # [0.42.0-rc.1](https://github.com/SAP/fundamental-styles/compare/v0.42.0-rc.0...v0.42.0-rc.1) (2026-10-05)
 
 ### Bug Fixes
@@ -7197,9 +7205,9 @@ Co-authored-by: droshev <mladen.droshev@sap.com>
 
 - added a new modifier class to fd-row to achieve even alignment of its elements:fd-row--top in a form.
   Before:
-      <div class="fd-row">
-      After:
-      <div class="fd-row fd-row--top">
+  <div class="fd-row">
+  After:
+  <div class="fd-row fd-row--top">
 
 ### Bug Fixes
 

package/data/components/README.md

@@ -29,13 +29,13 @@ This directory contains AI-consumable documentation extracted from Storybook sto
 |-----------|----------|------|
 | BTP/Avatar | `fd-avatar` | [avatar-btp.md](./avatar-btp.md) |
 | BTP/Button | `fd-button` | [button-btp.md](./button-btp.md) |
-| BTP/Navigation/Horizontal Navigation | `fd-navigation` | [navigation-navigation.md](./navigation-navigation.md) |
-| BTP/Navigation/Vertical Navigation | `fd-navigation` | [navigation.md](./navigation.md) |
+| BTP/Side Navigation | `fd-navigation` | [navigation.md](./navigation.md) |
 | BTP/Splitter | `fd-splitter` | [splitter.md](./splitter.md) |
 | BTP/Title Bar | `fd-toolbar` | [toolbar-btp.md](./toolbar-btp.md) |
 | BTP/Tool Header | `fd-tool-header` | [tool-header.md](./tool-header.md) |
 | BTP/User Menu | `fd-popover` | [popover-btp.md](./popover-btp.md) |
 | Dev/Navigation Menu | `fd-navigation-menu` | [navigation-menu.md](./navigation-menu.md) |
+| navigation-horizontal | `fd-navigation` | [navigation-navigation.md](./navigation-navigation.md) |
 
 ### Components
 

package/data/components/input-group.md

@@ -5,14 +5,24 @@ category: Components
 selector: fd-input-group
 cssFile: input-group.css
 sourcePath: packages/cx/stories/Components/cx-side-navigation/cx-side-navigation.stories.js
-tags: ["cx","theme"]
+tags: ["deprecated","cx"]
 dependencies: ["side-nav"]
 relatedComponents: ["side-nav"]
-stability: stable
+stability: deprecated
 ---
 
 # Components/Cx Side Navigation
 
+> **⚠️ DEPRECATED**: This component is deprecated and should not be used in new projects.
+
+<br><div  role="note" class="fd-message-strip fd-message-strip--warning"><div class="fd-message-strip__icon-container" aria-hidden="true">
+    <span class="sap-icon sap-icon--message-warning" role="presentation" aria-hidden="true"></span>
+  </div>
+  <p class="fd-message-strip__text" style="line-height: 1; margin: 0;">
+    The component has been deprecated, use <b>BTP Side Navigation</b> instead.
+  </p>
+</div>
+
 The Side Navigation can display structures of up to three levels.
 <br><br>In the <code>Wide</code> variant:
 - The first levels always shows an icon

package/data/components/navigation-navigation.md

@@ -1,6 +1,6 @@
 ---
 component: fd-navigation
-title: BTP/Navigation/Horizontal Navigation
+title: navigation-horizontal
 category: BTP
 selector: fd-navigation
 cssFile: navigation.css
@@ -11,7 +11,7 @@ relatedComponents: []
 stability: stable
 ---
 
-# BTP/Navigation/Horizontal Navigation
+# navigation-horizontal
 
 The navigation is one of the signature design elements of BTP Tools.
 ## Navigation Types:

package/data/components/navigation.md

@@ -1,47 +1,34 @@
 ---
 component: fd-navigation
-title: BTP/Navigation/Vertical Navigation
+title: BTP/Side Navigation
 category: BTP
 selector: fd-navigation
 cssFile: navigation.css
 sourcePath: packages/styles/stories/BTP/Navigation/vertical/navigation.stories.js
-tags: ["btp","horizon-only"]
+tags: []
 dependencies: []
 relatedComponents: []
 stability: stable
 ---
 
-# BTP/Navigation/Vertical Navigation
+# BTP/Side Navigation
 
-The navigation is one of the signature design elements of BTP Tools.
+The side navigation component provides a vertical menu that lets users open applications or modules in your product. It can be implemented as an embedded panel or as an overlay. In embedded mode, the navigation can be expanded or collapsed using the side navigation button. In overlay mode, the button opens the navigation as an overlay. For more details, see <a href="https://www.sap.com/design-system/fiori-design-web/v1-151/ui-elements/side-navigation">SAP Design Guidelines</a>.
 
-## Navigation Types:
-- <b>Vertical Navigation - Expanded</b>. The default navigation visualization provides a logical grouping of navigation items and two levels of hierarchy.
-- <b>Vertical Navigation - Snapped</b>. The snapped vertical navigation variant reduces the navigation width to free horizontal space.
-- <b>Vertical Navigation - Popup</b>. An alternative to the expanded/snapped variant, which places the navigation items in a popup.
-- <b>Horizontal Navigation</b>&nbsp;- The horizontal variant allows for infinite levels of navigation hierarchy through cascading menus.
+## Embedded Mode
+The side navigation is embedded into the page and can expand or collapse. The button toggles between expanded and collapsed states. On screens wider than 600px, the navigation stays embedded. On smaller screens (600px or less) and phones, it becomes a full-screen overlay instead.
 
+## Overlay Mode
+The side navigation opens as a popover and closes when you select an item. On web and tablets, it appears as a responsive popover. On phones, it always appears as a full-screen dialog.
 
 ## Usage
 ### Recommended
-- Use the navigation to switch between different pages of your tool.
-- Use expanded vertical navigation for unknown users.
-- Use persistence and display the last state the vertical navigation was in for know users.
-- Use the snapped variant when the content area displays multi-column content relationships.
-- Use the popup variant to display between 3 and 7 navigation items without hierarchy.
-- Use the horizontal navigation variant to display more than two levels of hierarchy.
-- Use nouns for the titles of navigation items.
+- As the main navigation paradigm across the application, to navigate to multiple targets.
 
 ### Not Recommended
-- Avoid using the navigation for switching between tools. Use the mega menu instead.
-- Avoid using the navigation to switch contexts or views. Use tabs or segmented buttons instead.
-- Avoid using verbs for the titles of navigation items. Use nouns instead.
-- Avoid using the Navigation Items for both navigation and groups. Use only one of the options.
-- Avoid having more than three levels of hierarchy in the horizontal variant.
-- Avoid using icons in secondary navigation and navigation groups.
-- Avoid using spacers to separate navigation content. Use separators instead.
-- Avoid using dividers to separate groups. Use separators instead.
-- Avoid using the bottom navigation area for service information. Use settings and user menu instead.
+- For structuring the application layout or implementing application-specific logic.
+- If your product has only a single navigation target.
+- In a combination of embedded and overlay modes. Use either of them.
 
 ## Installation
 
@@ -827,9 +814,9 @@ npm install fundamental-styles
 
 | Class | Description |
 |-------|-------------|
-| `fd-navigation--popup` | An alternative to the expanded/snapped variant, which places the navigation items in a popup. |
-| `fd-navigation--snapped` | By default, the Parent Navigation Item functions as a Navigation Group |
-| `fd-navigation--vertical` | Vertical navigation is the most common and preferred way of navigating BTP tools |
+| `fd-navigation--popup` | In overlay mode, the side navigation button opens and closes the popover |
+| `fd-navigation--snapped` | When collapsed, child items appear in a popover |
+| `fd-navigation--vertical` | Style variant |
 
 ## BEM Elements
 
@@ -867,9 +854,7 @@ This component uses the following BEM elements:
 
 ## Examples
 
-### Vertical Navigation - Expanded
-
-Vertical navigation is the most common and preferred way of navigating BTP tools. It comprises many elements that work together to provide a logical information hierarchy and inform users of their current position.
+### Embedded Mode - Expanded
 
 ```html
 <div
@@ -1635,9 +1620,9 @@ Vertical navigation is the most common and preferred way of navigating BTP tools
                                                                                                                                                                 </div>
 ```
 
-### Vertical Navigation - Parent Navigation as Link
+### Parent Navigation as Link
 
-By default, the Parent Navigation Item functions as a Navigation Group. A small arrow icon shows the item's expanded/collapsed state in this scenario. In the snapped variant, clicking on such a navigation item will open a popover that displays the title and Child Items.<br>Although not recommended, the Navigation Item can function for navigation and expansion/collapse. In this case, clicking on the arrow will show/hide Child Items, and clicking on the item will perform the navigation.
+By default, parent items act as navigation groups with an arrow icon showing their expanded/collapsed state. When collapsed, clicking a parent item opens a popover with its child items.<br>Alternatively (not recommended), parent items can both navigate and expand/collapse: clicking the arrow toggles child items, while clicking the item navigates.
 
 ```html
 <div
@@ -2247,9 +2232,9 @@ By default, the Parent Navigation Item functions as a Navigation Group. A small
                                                                                                                                     </div>
 ```
 
-### Vertical Navigation - Snapped
+### Embedded Mode - Collapsed (Snapped)
 
-The snapped vertical navigation variant reduces the navigation width to free horizontal space.
+When collapsed, child items appear in a popover. Navigation elements move to an overflow area when space is limited. Items with children display as cascaded menus in the overflow. Selecting an overflow item brings its parent into view above the overflow button.
 
 ```html
 <div
@@ -2916,9 +2901,9 @@ The snapped vertical navigation variant reduces the navigation width to free hor
                                                                                                                                             </div>
 ```
 
-### Vertical Navigation - Popup
+### Overlay Mode (Popup)
 
-An alternative to the expanded/snapped variant, which places the navigation items in a popup.
+In overlay mode, the side navigation button opens and closes the popover. The navigation items are displayed within the popover, allowing access to all levels of the navigation hierarchy without occupying permanent screen space.
 
 ```html
 <div
@@ -3688,7 +3673,7 @@ An alternative to the expanded/snapped variant, which places the navigation item
                                                                                                                                                                     </div>
 ```
 
-### Vertical Navigation - Indication Tags
+### Indication Tags
 
 Navigation items can display indication tags (e.g., "New", "Beta", "Deprecated") using the Object Status component.
 
@@ -4649,10 +4634,10 @@ Navigation items can display indication tags (e.g., "New", "Beta", "Deprecated")
                                                                                                                                                                                                             </div>
 ```
 
-### Vertical Navigation - Sticky Area
+### Sticky Area
 
-Fixed header area that is separated by a separator similar to the footer area. Top-aligned and fixed/sticky (always visible). Contains the optional search field. Add <code>.fd-navigation__container--sticky</code> together with <code>.fd-navigation__container--top</code> modifier class to the <code>.fd-navigation__container</code> base class to make the top area sticky.<br>
-Guideline: Recommended not to contain more than 4 items.
+Fixed header area that is separated by a separator similar to the footer area. Top-aligned and fixed/sticky (always visible). Contains the optional search field. Add <code>.fd-navigation__container--sticky</code> together with <code>.fd-navigation__container--top</code> modifier class to the <code>.fd-navigation__container</code> base class to make the top area sticky.<br><br>
+Guideline: Recommended not to contain more than 4 items.<br><br>For more details, see <a href="https://www.sap.com/design-system/fiori-design-web/v1-151/ui-elements/side-navigation">SAP Design Guidelines</a>.
 
 ```html
 <div
@@ -5592,10 +5577,10 @@ Guideline: Recommended not to contain more than 4 items.
                                                                                                                                                                                                 </div>
 ```
 
-### Vertical Navigation - Search
+### Search
 
 Search Only: for a sticky search field, the sticky header area with separator is not needed. The search field can be sticky by applying <code>.fd-navigation__list-item--sticky</code> modifier class to the parent navigation list item.
-<br><br><strong>Note:</strong> The <code>.fd-navigation__list-item--home</code> class is still supported for backward compatibility and functions identically to <code>.fd-navigation__list-item--sticky</code>. It was originally intended specifically for Home navigation link, but <code>.fd-navigation__list-item--sticky</code> is now the recommended approach as it can be applied to any list item that needs to be sticky at the top.
+<br><br><strong>Note:</strong> The <code>.fd-navigation__list-item--home</code> class is still supported for backward compatibility and functions identically to <code>.fd-navigation__list-item--sticky</code>. It was originally intended specifically for Home navigation link, but <code>.fd-navigation__list-item--sticky</code> is now the recommended approach as it can be applied to any list item that needs to be sticky at the top.<br> <br>For more details, see <a href="https://www.sap.com/design-system/fiori-design-web/v1-151/ui-elements/side-navigation">SAP Design Guidelines</a>.
 
 ```html
 <div

package/data/components/side-nav.md

@@ -5,14 +5,23 @@ category: Components
 selector: fd-side-nav
 cssFile: side-nav.css
 sourcePath: packages/styles/stories/Components/side-navigation/side-navigation.stories.js
-tags: []
-dependencies: ["button","icon","navigation-list","popover","side-nav"]
-relatedComponents: ["button","icon","navigation-list","popover","side-nav"]
-stability: stable
+tags: ["deprecated"]
+dependencies: ["button","icon","message-strip","navigation-list","popover","side-nav"]
+relatedComponents: ["button","icon","message-strip","navigation-list","popover","side-nav"]
+stability: deprecated
 ---
 
 # Components/Side Navigation
 
+> **⚠️ DEPRECATED**: This component is deprecated and should not be used in new projects.
+
+<br><div  role="note" class="fd-message-strip fd-message-strip--warning"><div class="fd-message-strip__icon-container" aria-hidden="true">
+    <span class="sap-icon sap-icon--message-warning" role="presentation" aria-hidden="true"></span>
+  </div>
+  <p class="fd-message-strip__text" style="line-height: 1; margin: 0;">
+    The component has been deprecated, use <b>BTP Side Navigation</b> instead.
+  </p>
+</div>
 The Side Navigation is an additional option to add a navigation to an application. Same as the vertical navigation it offers the user easy access to multiple pages per space. Side Navigation is triggered by the Menu Icon in Shellbar and can be hidden, collapsed or expanded.
 
 ## Anatomy
@@ -51,6 +60,7 @@ This component depends on the following CSS files:
 
 - `button.css`
 - `icon.css`
+- `message-strip.css`
 - `navigation-list.css`
 - `popover.css`
 - `side-nav.css`
@@ -71,6 +81,7 @@ npm install fundamental-styles
 <!-- Include dependencies -->
 <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
 <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/message-strip.css" rel="stylesheet">
 <link href="node_modules/fundamental-styles/dist/navigation-list.css" rel="stylesheet">
 <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
 <link href="node_modules/fundamental-styles/dist/side-nav.css" rel="stylesheet">
@@ -375,6 +386,7 @@ This component works with or depends on:
 
 - `button`
 - `icon`
+- `message-strip`
 - `navigation-list`
 - `popover`
 - `side-nav`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundamental-styles/mcp",
-  "version": "0.42.0-rc.1",
+  "version": "0.42.0-rc.3",
   "mcpName": "io.github.sap/fundamental-styles-mcp",
   "description": "MCP server exposing fundamental-styles CSS component metadata for AI coding assistants",
   "license": "Apache-2.0",