@fundamental-styles/mcp 0.41.7-rc.8 → 0.41.7

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 (215) hide show
  1. package/data/AI_USAGE.md +425 -0
  2. package/data/CHANGELOG.md +53 -3
  3. package/data/component-catalog.json +62 -209
  4. package/data/components/README.md +281 -0
  5. package/data/components/action-bar.md +443 -0
  6. package/data/components/ai-busy-indicator.md +79 -0
  7. package/data/components/ai-loading-bar.md +66 -0
  8. package/data/components/avatar-btp.md +198 -0
  9. package/data/components/avatar-group.md +2660 -0
  10. package/data/components/avatar-product-switch.md +476 -0
  11. package/data/components/avatar.md +993 -0
  12. package/data/components/bar.md +574 -0
  13. package/data/components/border-radius.md +148 -0
  14. package/data/components/border.md +412 -0
  15. package/data/components/breadcrumb.md +546 -0
  16. package/data/components/button-2.md +440 -0
  17. package/data/components/button-action-sheet.md +292 -0
  18. package/data/components/button-ai.md +730 -0
  19. package/data/components/button-btp.md +223 -0
  20. package/data/components/button-button.md +233 -0
  21. package/data/components/button-counter.md +176 -0
  22. package/data/components/button-patterns.md +731 -0
  23. package/data/components/button-split.md +459 -0
  24. package/data/components/button.md +469 -0
  25. package/data/components/calendar.md +5784 -0
  26. package/data/components/card-card-media.md +707 -0
  27. package/data/components/card-card.md +2426 -0
  28. package/data/components/card-layouts.md +1201 -0
  29. package/data/components/card.md +2404 -0
  30. package/data/components/carousel.md +1506 -0
  31. package/data/components/code.md +139 -0
  32. package/data/components/component-reset.md +272 -0
  33. package/data/components/components-icons-businesssuiteinappsymbol-icons.md +85 -0
  34. package/data/components/components-icons-sap-icons.md +147 -0
  35. package/data/components/components-icons-tnt-icons.md +85 -0
  36. package/data/components/container-queries.md +221 -0
  37. package/data/components/container.md +227 -0
  38. package/data/components/dialog-docs-static-busy-indicator.md +165 -0
  39. package/data/components/dialog-docs-static-dialog.md +949 -0
  40. package/data/components/dialog-docs-static-patterns.md +147 -0
  41. package/data/components/dialog-docs-static-settings.md +528 -0
  42. package/data/components/dialog-docs-static.md +982 -0
  43. package/data/components/dialog.md +606 -0
  44. package/data/components/dynamic-page-dynamic-page.md +1914 -0
  45. package/data/components/dynamic-page.md +973 -0
  46. package/data/components/dynamic-side.md +197 -0
  47. package/data/components/elevation.md +110 -0
  48. package/data/components/feed-input.md +346 -0
  49. package/data/components/feed-list.md +580 -0
  50. package/data/components/fieldset-2.md +292 -0
  51. package/data/components/fieldset-forms.md +169 -0
  52. package/data/components/fieldset.md +381 -0
  53. package/data/components/flexible-column-layout.md +205 -0
  54. package/data/components/form-group.md +287 -0
  55. package/data/components/form-header.md +71 -0
  56. package/data/components/form-item-2.md +98 -0
  57. package/data/components/form-item-3.md +134 -0
  58. package/data/components/form-item-4.md +556 -0
  59. package/data/components/form-item-5.md +182 -0
  60. package/data/components/form-item-6.md +539 -0
  61. package/data/components/form-item-7.md +239 -0
  62. package/data/components/form-item-ai.md +158 -0
  63. package/data/components/form-item-file-uploader.md +445 -0
  64. package/data/components/form-item-forms.md +234 -0
  65. package/data/components/form-item-patterns.md +426 -0
  66. package/data/components/form-item.md +464 -0
  67. package/data/components/form-label-ai.md +126 -0
  68. package/data/components/form-label-layouts.md +306 -0
  69. package/data/components/form-label-patterns.md +1175 -0
  70. package/data/components/form-label-status-indicator.md +1083 -0
  71. package/data/components/form-label-step-input.md +620 -0
  72. package/data/components/form-label.md +2876 -0
  73. package/data/components/generic-tag.md +747 -0
  74. package/data/components/grid-list-grid-list.md +1185 -0
  75. package/data/components/grid-list.md +1449 -0
  76. package/data/components/heading.md +66 -0
  77. package/data/components/horizontal-navigation.md +568 -0
  78. package/data/components/icon-tab-bar-dev.md +190 -0
  79. package/data/components/icon-tab-bar.md +2620 -0
  80. package/data/components/icon.md +171 -0
  81. package/data/components/iconBusinessSuite.md +92 -0
  82. package/data/components/iconTnt.md +92 -0
  83. package/data/components/illustrated-message.md +439 -0
  84. package/data/components/info-label.md +348 -0
  85. package/data/components/input-group.md +2068 -0
  86. package/data/components/label.md +66 -0
  87. package/data/components/layout-grid.md +447 -0
  88. package/data/components/layout-panel.md +261 -0
  89. package/data/components/layouts-layout-grid.md +608 -0
  90. package/data/components/layouts-paddings.md +133 -0
  91. package/data/components/layouts-section.md +287 -0
  92. package/data/components/list-2.md +148 -0
  93. package/data/components/list-3.md +735 -0
  94. package/data/components/list-list.md +790 -0
  95. package/data/components/list-object-list.md +1225 -0
  96. package/data/components/list.md +1286 -0
  97. package/data/components/media-queries.md +168 -0
  98. package/data/components/menu.md +946 -0
  99. package/data/components/message-box-docs-static-ai.md +149 -0
  100. package/data/components/message-box-docs-static.md +527 -0
  101. package/data/components/message-page-upload-collection.md +678 -0
  102. package/data/components/message-page.md +256 -0
  103. package/data/components/message-strip.md +977 -0
  104. package/data/components/message-toast.md +119 -0
  105. package/data/components/micro-process-flow.md +991 -0
  106. package/data/components/navigation-menu.md +366 -0
  107. package/data/components/navigation-navigation.md +1245 -0
  108. package/data/components/navigation.md +2604 -0
  109. package/data/components/numeric-content.md +317 -0
  110. package/data/components/object-attribute.md +96 -0
  111. package/data/components/object-identifier.md +227 -0
  112. package/data/components/object-marker.md +202 -0
  113. package/data/components/object-number.md +327 -0
  114. package/data/components/object-status.md +1538 -0
  115. package/data/components/off-screen.md +87 -0
  116. package/data/components/overflow.md +97 -0
  117. package/data/components/padding.md +122 -0
  118. package/data/components/paddings.md +130 -0
  119. package/data/components/page.md +300 -0
  120. package/data/components/pagination.md +672 -0
  121. package/data/components/panel-layouts.md +345 -0
  122. package/data/components/panel.md +514 -0
  123. package/data/components/patterns-label.md +74 -0
  124. package/data/components/popover-2.md +906 -0
  125. package/data/components/popover-ai.md +466 -0
  126. package/data/components/popover-btp.md +886 -0
  127. package/data/components/popover-deprecated.md +308 -0
  128. package/data/components/popover-message-popover.md +683 -0
  129. package/data/components/popover-notification.md +1511 -0
  130. package/data/components/popover-patterns.md +1100 -0
  131. package/data/components/popover-popover.md +1862 -0
  132. package/data/components/popover-quick-view.md +385 -0
  133. package/data/components/popover-timepicker.md +1836 -0
  134. package/data/components/popover-user-menu.md +1303 -0
  135. package/data/components/popover.md +1938 -0
  136. package/data/components/progress-indicator.md +351 -0
  137. package/data/components/prompt-input-ai.md +226 -0
  138. package/data/components/prompt-input.md +226 -0
  139. package/data/components/rating-indicator.md +1469 -0
  140. package/data/components/resizable-card-layout.md +951 -0
  141. package/data/components/scrollbar.md +86 -0
  142. package/data/components/search-field.md +287 -0
  143. package/data/components/section.md +250 -0
  144. package/data/components/segmented-button.md +324 -0
  145. package/data/components/shellbar.md +2183 -0
  146. package/data/components/side-nav.md +1562 -0
  147. package/data/components/skeleton.md +243 -0
  148. package/data/components/slider.md +395 -0
  149. package/data/components/splitter.md +353 -0
  150. package/data/components/table.md +2749 -0
  151. package/data/components/tabs.md +658 -0
  152. package/data/components/text-text.md +380 -0
  153. package/data/components/text.md +253 -0
  154. package/data/components/tile.md +1132 -0
  155. package/data/components/time.md +818 -0
  156. package/data/components/title.md +153 -0
  157. package/data/components/titles.md +83 -0
  158. package/data/components/token.md +311 -0
  159. package/data/components/tokenizer.md +398 -0
  160. package/data/components/tool-header.md +1352 -0
  161. package/data/components/tool-layout.md +199 -0
  162. package/data/components/toolbar-ai.md +174 -0
  163. package/data/components/toolbar-btp.md +526 -0
  164. package/data/components/toolbar-title-bar.md +473 -0
  165. package/data/components/toolbar.md +432 -0
  166. package/data/components/tree.md +1031 -0
  167. package/data/components/typography.md +435 -0
  168. package/data/components/variant-management.md +360 -0
  169. package/data/components/vertical-nav.md +589 -0
  170. package/data/components/wizard.md +1429 -0
  171. package/data/examples/Components/dialog/device-specifications.example.html +39 -30
  172. package/data/examples/Components/shellbar/optional-items.example.html +210 -157
  173. package/data/examples/Components/shellbar/overflow-toolbar.example.html +202 -177
  174. package/data/examples/Components/shellbar/responsive-paddings.example.html +217 -146
  175. package/data/examples/Components/shellbar/responsiveness.example.html +825 -613
  176. package/data/examples/Components/user-menu/default.example.html +241 -83
  177. package/data/schemas/badge.schema.json +1 -1
  178. package/data/schemas/button-split.schema.json +1 -1
  179. package/data/schemas/component-frontmatter.schema.json +123 -0
  180. package/data/schemas/component-markdown.schema.json +81 -0
  181. package/data/schemas/counter.schema.json +1 -1
  182. package/data/schemas/dynamic-page.schema.json +1 -1
  183. package/data/schemas/dynamic-side-content.schema.json +1 -1
  184. package/data/schemas/facet.schema.json +1 -1
  185. package/data/schemas/fieldset.schema.json +1 -1
  186. package/data/schemas/flexible-column-layout.schema.json +1 -1
  187. package/data/schemas/form-group.schema.json +3 -2
  188. package/data/schemas/form-header.schema.json +1 -1
  189. package/data/schemas/form-label.schema.json +1 -0
  190. package/data/schemas/form-message.schema.json +1 -1
  191. package/data/schemas/grid-list.schema.json +1 -1
  192. package/data/schemas/input-group.schema.json +1 -1
  193. package/data/schemas/layout-panel.schema.json +1 -1
  194. package/data/schemas/page.schema.json +1 -1
  195. package/data/schemas/quick-view.schema.json +2 -1
  196. package/data/schemas/section.schema.json +1 -1
  197. package/data/schemas/side-nav.schema.json +1 -1
  198. package/data/schemas/splitter.schema.json +1 -1
  199. package/data/schemas/tabs.schema.json +1 -1
  200. package/data/schemas/tile.schema.json +1 -1
  201. package/data/schemas/tool-layout.schema.json +1 -1
  202. package/data/schemas/user-menu.schema.json +10 -0
  203. package/data/schemas/wizard.schema.json +1 -1
  204. package/package.json +1 -1
  205. package/src/data/load-catalog.d.ts +2 -0
  206. package/src/data/load-catalog.js +5 -1
  207. package/src/data/load-catalog.js.map +1 -1
  208. package/src/data/load-markdown-docs.d.ts +44 -0
  209. package/src/data/load-markdown-docs.js +179 -0
  210. package/src/data/load-markdown-docs.js.map +1 -0
  211. package/src/data/markdown-cache.d.ts +60 -0
  212. package/src/data/markdown-cache.js +218 -0
  213. package/src/data/markdown-cache.js.map +1 -0
  214. package/src/server.js +72 -1
  215. package/src/server.js.map +1 -1
package/data/components/toolbar-title-bar.md ADDED
@@ -0,0 +1,473 @@
1
+ ---
2
+ component: fd-toolbar
3
+ title: BTP/Title Bar
4
+ category: BTP
5
+ selector: fd-toolbar
6
+ cssFile: toolbar.css
7
+ sourcePath: packages/styles/stories/BTP/title-bar/title-bar.stories.js
8
+ generatedAt: 2026-05-28T16:01:41.608Z
9
+ ---
10
+
11
+ # BTP/Title Bar
12
+
13
+ Title Bar is a composite control that uses a toolbar as a container and a title for labeling. It varies from the standard title control in its bold visual state and text size. In addition, the title bar comes in three variants:
14
+
15
+ - <b>Standard</b>&nbsp;- similar to the Fiori title but visually different
16
+ - <b>Title and Subtitle</b>&nbsp;- when an additional line of text is displayed below the title
17
+ - <b>Title and Info Icon</b>&nbsp;- when an additional icon is displayed right after the title
18
+
19
+ ## Installation
20
+
21
+ ```bash
22
+ npm install fundamental-styles
23
+ ```
24
+
25
+ ```html
26
+ <!-- Include theme -->
27
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
28
+
29
+ <!-- Include component CSS -->
30
+ <link href="node_modules/fundamental-styles/dist/toolbar.css" rel="stylesheet">
31
+ ```
32
+
33
+ ## Basic Usage
34
+
35
+ ```html
36
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
37
+ <div class="fd-title-bar">
38
+ <div class="fd-title-bar__container">
39
+ <div class="fd-title-bar__title-container">
40
+ <h4 class="fd-title-bar__title">Title</h4>
41
+ </div>
42
+ </div>
43
+ </div>
44
+ <span class="fd-toolbar__spacer"></span>
45
+ <div class="fd-segmented-button" role="group" aria-label="Group label">
46
+ <button class="fd-button fd-button--compact">View 1</button>
47
+ <button class="fd-button fd-button--compact fd-button--toggled" aria-pressed="true">View 2</button>
48
+ <button class="fd-button fd-button--compact">View 3</button>
49
+ </div>
50
+ <span class="fd-toolbar__spacer"></span>
51
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Filter">
52
+ <i class="sap-icon--filter" role="presentation"></i>
53
+ </button>
54
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Sort">
55
+ <i class="sap-icon--sort" role="presentation"></i>
56
+ </button>
57
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Group">
58
+ <i class="sap-icon--group-2" role="presentation"></i>
59
+ </button>
60
+ </div>
61
+
62
+ <br><br>
63
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
64
+ <div class="fd-title-bar">
65
+ <div class="fd-title-bar__container">
66
+ <div class="fd-title-bar__title-container">
67
+ <h4 class="fd-title-bar__title">Title</h4>
68
+ <button class="fd-button fd-button--nested" aria-label="information">
69
+ <i class="sap-icon--hint" role="presentation"></i>
70
+ </button>
71
+ </div>
72
+ <span class="fd-title-bar__subtitle">Subtitle, byline, description</span>
73
+ </div>
74
+ </div>
75
+ <span class="fd-toolbar__spacer"></span>
76
+ <div class="fd-segmented-button" role="group" aria-label="Group label">
77
+ <button class="fd-button fd-button--compact">View 1</button>
78
+ <button class="fd-button fd-button--compact fd-button--toggled" aria-pressed="true">View 2</button>
79
+ <button class="fd-button fd-button--compact">View 3</button>
80
+ </div>
81
+ <span class="fd-toolbar__spacer"></span>
82
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Filter">
83
+ <i class="sap-icon--filter" role="presentation"></i>
84
+ </button>
85
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Sort">
86
+ <i class="sap-icon--sort" role="presentation"></i>
87
+ </button>
88
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Group">
89
+ <i class="sap-icon--group-2" role="presentation"></i>
90
+ </button>
91
+ </div>
92
+
93
+ <br><br>
94
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
95
+ <div class="fd-title-bar">
96
+ <div class="fd-title-bar__button-container">
97
+ <button class="fd-button fd-button--compact fd-button--nested" aria-label="Back">
98
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
99
+ </button>
100
+ </div>
101
+ <div class="fd-title-bar__container">
102
+ <div class="fd-title-bar__title-container">
103
+ <h4 class="fd-title-bar__title">Title</h4>
104
+ <button class="fd-button fd-button--nested" aria-label="information">
105
+ <i class="sap-icon--hint" role="presentation"></i>
106
+ </button>
107
+ </div>
108
+ <span class="fd-title-bar__subtitle">Subtitle, byline, description</span>
109
+ </div>
110
+ </div>
111
+ <span class="fd-toolbar__spacer"></span>
112
+ <div class="fd-segmented-button" role="group" aria-label="Group label">
113
+ <button class="fd-button fd-button--compact">View 1</button>
114
+ <button class="fd-button fd-button--compact fd-button--toggled" aria-pressed="true">View 2</button>
115
+ <button class="fd-button fd-button--compact">View 3</button>
116
+ </div>
117
+ <span class="fd-toolbar__spacer"></span>
118
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Filter">
119
+ <i class="sap-icon--filter" role="presentation"></i>
120
+ </button>
121
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Sort">
122
+ <i class="sap-icon--sort" role="presentation"></i>
123
+ </button>
124
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Group">
125
+ <i class="sap-icon--group-2" role="presentation"></i>
126
+ </button>
127
+ </div>
128
+
129
+ <br><br>
130
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
131
+ <div class="fd-title-bar">
132
+ <div class="fd-title-bar__container">
133
+ <ul class="fd-breadcrumb">
134
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Products</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
135
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Suppliers</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
136
+ </ul>
137
+ <div class="fd-title-bar__title-container">
138
+ <h4 class="fd-title-bar__title">Title</h4>
139
+ <button class="fd-button fd-button--nested" aria-label="information">
140
+ <i class="sap-icon--hint" role="presentation"></i>
141
+ </button>
142
+ </div>
143
+ <span class="fd-title-bar__subtitle">Subtitle, byline, description</span>
144
+ </div>
145
+ </div>
146
+ <span class="fd-toolbar__spacer"></span>
147
+ <div class="fd-segmented-button" role="group" aria-label="Group label">
148
+ <button class="fd-button fd-button--compact">View 1</button>
149
+ <button class="fd-button fd-button--compact fd-button--toggled" aria-pressed="true">View 2</button>
150
+ <button class="fd-button fd-button--compact">View 3</button>
151
+ </div>
152
+ <span class="fd-toolbar__spacer"></span>
153
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Filter">
154
+ <i class="sap-icon--filter" role="presentation"></i>
155
+ </button>
156
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Sort">
157
+ <i class="sap-icon--sort" role="presentation"></i>
158
+ </button>
159
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Group">
160
+ <i class="sap-icon--group-2" role="presentation"></i>
161
+ </button>
162
+ </div>
163
+
164
+ <br><br>
165
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
166
+ <div class="fd-title-bar">
167
+ <div class="fd-title-bar__button-container">
168
+ <button class="fd-button fd-button--compact fd-button--nested" aria-label="Back">
169
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
170
+ </button>
171
+ </div>
172
+ <div class="fd-title-bar__container">
173
+ <ul class="fd-breadcrumb">
174
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Products</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
175
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Suppliers</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
176
+ </ul>
177
+ <div class="fd-title-bar__title-container">
178
+ <h4 class="fd-title-bar__title">Title</h4>
179
+ <button class="fd-button fd-button--nested" aria-label="information">
180
+ <i class="sap-icon--hint" role="presentation"></i>
181
+ </button>
182
+ </div>
183
+ <span class="fd-title-bar__subtitle">Subtitle, byline, description</span>
184
+ </div>
185
+ </div>
186
+ <span class="fd-toolbar__spacer"></span>
187
+ <div class="fd-segmented-button" role="group" aria-label="Group label">
188
+ <button class="fd-button fd-button--compact">View 1</button>
189
+ <button class="fd-button fd-button--compact fd-button--toggled" aria-pressed="true">View 2</button>
190
+ <button class="fd-button fd-button--compact">View 3</button>
191
+ </div>
192
+ <span class="fd-toolbar__spacer"></span>
193
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Filter">
194
+ <i class="sap-icon--filter" role="presentation"></i>
195
+ </button>
196
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Sort">
197
+ <i class="sap-icon--sort" role="presentation"></i>
198
+ </button>
199
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Group">
200
+ <i class="sap-icon--group-2" role="presentation"></i>
201
+ </button>
202
+ </div>
203
+ ```
204
+
205
+ ## Modifiers
206
+
207
+ | Class | Description |
208
+ |-------|-------------|
209
+ | `fd-toolbar--clear` | Style variant |
210
+ | `fd-toolbar--title-bar` | Style variant |
211
+
212
+ ## Examples
213
+
214
+ ### Desktop
215
+
216
+ ```html
217
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
218
+ <div class="fd-title-bar">
219
+ <div class="fd-title-bar__container">
220
+ <div class="fd-title-bar__title-container">
221
+ <h4 class="fd-title-bar__title">Title</h4>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ <span class="fd-toolbar__spacer"></span>
226
+ <div class="fd-segmented-button" role="group" aria-label="Group label">
227
+ <button class="fd-button fd-button--compact">View 1</button>
228
+ <button class="fd-button fd-button--compact fd-button--toggled" aria-pressed="true">View 2</button>
229
+ <button class="fd-button fd-button--compact">View 3</button>
230
+ </div>
231
+ <span class="fd-toolbar__spacer"></span>
232
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Filter">
233
+ <i class="sap-icon--filter" role="presentation"></i>
234
+ </button>
235
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Sort">
236
+ <i class="sap-icon--sort" role="presentation"></i>
237
+ </button>
238
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Group">
239
+ <i class="sap-icon--group-2" role="presentation"></i>
240
+ </button>
241
+ </div>
242
+
243
+ <br><br>
244
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
245
+ <div class="fd-title-bar">
246
+ <div class="fd-title-bar__container">
247
+ <div class="fd-title-bar__title-container">
248
+ <h4 class="fd-title-bar__title">Title</h4>
249
+ <button class="fd-button fd-button--nested" aria-label="information">
250
+ <i class="sap-icon--hint" role="presentation"></i>
251
+ </button>
252
+ </div>
253
+ <span class="fd-title-bar__subtitle">Subtitle, byline, description</span>
254
+ </div>
255
+ </div>
256
+ <span class="fd-toolbar__spacer"></span>
257
+ <div class="fd-segmented-button" role="group" aria-label="Group label">
258
+ <button class="fd-button fd-button--compact">View 1</button>
259
+ <button class="fd-button fd-button--compact fd-button--toggled" aria-pressed="true">View 2</button>
260
+ <button class="fd-button fd-button--compact">View 3</button>
261
+ </div>
262
+ <span class="fd-toolbar__spacer"></span>
263
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Filter">
264
+ <i class="sap-icon--filter" role="presentation"></i>
265
+ </button>
266
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Sort">
267
+ <i class="sap-icon--sort" role="presentation"></i>
268
+ </button>
269
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Group">
270
+ <i class="sap-icon--group-2" role="presentation"></i>
271
+ </button>
272
+ </div>
273
+
274
+ <br><br>
275
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
276
+ <div class="fd-title-bar">
277
+ <div class="fd-title-bar__button-container">
278
+ <button class="fd-button fd-button--compact fd-button--nested" aria-label="Back">
279
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
280
+ </button>
281
+ </div>
282
+ <div class="fd-title-bar__container">
283
+ <div class="fd-title-bar__title-container">
284
+ <h4 class="fd-title-bar__title">Title</h4>
285
+ <button class="fd-button fd-button--nested" aria-label="information">
286
+ <i class="sap-icon--hint" role="presentation"></i>
287
+ </button>
288
+ </div>
289
+ <span class="fd-title-bar__subtitle">Subtitle, byline, description</span>
290
+ </div>
291
+ </div>
292
+ <span class="fd-toolbar__spacer"></span>
293
+ <div class="fd-segmented-button" role="group" aria-label="Group label">
294
+ <button class="fd-button fd-button--compact">View 1</button>
295
+ <button class="fd-button fd-button--compact fd-button--toggled" aria-pressed="true">View 2</button>
296
+ <button class="fd-button fd-button--compact">View 3</button>
297
+ </div>
298
+ <span class="fd-toolbar__spacer"></span>
299
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Filter">
300
+ <i class="sap-icon--filter" role="presentation"></i>
301
+ </button>
302
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Sort">
303
+ <i class="sap-icon--sort" role="presentation"></i>
304
+ </button>
305
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Group">
306
+ <i class="sap-icon--group-2" role="presentation"></i>
307
+ </button>
308
+ </div>
309
+
310
+ <br><br>
311
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
312
+ <div class="fd-title-bar">
313
+ <div class="fd-title-bar__container">
314
+ <ul class="fd-breadcrumb">
315
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Products</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
316
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Suppliers</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
317
+ </ul>
318
+ <div class="fd-title-bar__title-container">
319
+ <h4 class="fd-title-bar__title">Title</h4>
320
+ <button class="fd-button fd-button--nested" aria-label="information">
321
+ <i class="sap-icon--hint" role="presentation"></i>
322
+ </button>
323
+ </div>
324
+ <span class="fd-title-bar__subtitle">Subtitle, byline, description</span>
325
+ </div>
326
+ </div>
327
+ <span class="fd-toolbar__spacer"></span>
328
+ <div class="fd-segmented-button" role="group" aria-label="Group label">
329
+ <button class="fd-button fd-button--compact">View 1</button>
330
+ <button class="fd-button fd-button--compact fd-button--toggled" aria-pressed="true">View 2</button>
331
+ <button class="fd-button fd-button--compact">View 3</button>
332
+ </div>
333
+ <span class="fd-toolbar__spacer"></span>
334
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Filter">
335
+ <i class="sap-icon--filter" role="presentation"></i>
336
+ </button>
337
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Sort">
338
+ <i class="sap-icon--sort" role="presentation"></i>
339
+ </button>
340
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Group">
341
+ <i class="sap-icon--group-2" role="presentation"></i>
342
+ </button>
343
+ </div>
344
+
345
+ <br><br>
346
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
347
+ <div class="fd-title-bar">
348
+ <div class="fd-title-bar__button-container">
349
+ <button class="fd-button fd-button--compact fd-button--nested" aria-label="Back">
350
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
351
+ </button>
352
+ </div>
353
+ <div class="fd-title-bar__container">
354
+ <ul class="fd-breadcrumb">
355
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Products</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
356
+ <li class="fd-breadcrumb__item"><a class="fd-link" tabindex="0" href="#"><span class="fd-link__content">Suppliers</span></a><span class="fd-breadcrumb__separator" aria-hidden="true"></span></li>
357
+ </ul>
358
+ <div class="fd-title-bar__title-container">
359
+ <h4 class="fd-title-bar__title">Title</h4>
360
+ <button class="fd-button fd-button--nested" aria-label="information">
361
+ <i class="sap-icon--hint" role="presentation"></i>
362
+ </button>
363
+ </div>
364
+ <span class="fd-title-bar__subtitle">Subtitle, byline, description</span>
365
+ </div>
366
+ </div>
367
+ <span class="fd-toolbar__spacer"></span>
368
+ <div class="fd-segmented-button" role="group" aria-label="Group label">
369
+ <button class="fd-button fd-button--compact">View 1</button>
370
+ <button class="fd-button fd-button--compact fd-button--toggled" aria-pressed="true">View 2</button>
371
+ <button class="fd-button fd-button--compact">View 3</button>
372
+ </div>
373
+ <span class="fd-toolbar__spacer"></span>
374
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Filter">
375
+ <i class="sap-icon--filter" role="presentation"></i>
376
+ </button>
377
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Sort">
378
+ <i class="sap-icon--sort" role="presentation"></i>
379
+ </button>
380
+ <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Group">
381
+ <i class="sap-icon--group-2" role="presentation"></i>
382
+ </button>
383
+ </div>
384
+ ```
385
+
386
+ ### Tablet
387
+
388
+ ```html
389
+ <div style="max-width: 860px;">
390
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
391
+ <div class="fd-title-bar">
392
+ <div class="fd-title-bar__button-container">
393
+ <button class="fd-button fd-button--nested" aria-label="Back">
394
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
395
+ </button>
396
+ </div>
397
+ <div class="fd-title-bar__container">
398
+ <div class="fd-title-bar__title-container">
399
+ <h4 class="fd-title-bar__title">Title</h4>
400
+ <button class="fd-button fd-button--nested" aria-label="information">
401
+ <i class="sap-icon--hint" role="presentation"></i>
402
+ </button>
403
+ </div>
404
+ <span class="fd-title-bar__subtitle">Subtitle, byline, description</span>
405
+ </div>
406
+ </div>
407
+ <span class="fd-toolbar__spacer"></span>
408
+ <div class="fd-segmented-button" role="group" aria-label="Group label">
409
+ <button class="fd-button">View 1</button>
410
+ <button class="fd-button fd-button--toggled" aria-pressed="true">View 2</button>
411
+ <button class="fd-button">View 3</button>
412
+ </div>
413
+ <button class="fd-button fd-button--transparent" aria-label="Filter">
414
+ <i class="sap-icon--filter" role="presentation"></i>
415
+ </button>
416
+ <button class="fd-button fd-button--transparent" aria-label="Sort">
417
+ <i class="sap-icon--sort" role="presentation"></i>
418
+ </button>
419
+ <button class="fd-button fd-button--transparent" aria-label="Group">
420
+ <i class="sap-icon--group-2" role="presentation"></i>
421
+ </button>
422
+ </div>
423
+ </div>
424
+ ```
425
+
426
+ ### Mobile
427
+
428
+ ```html
429
+ <div style="max-width: 600px;">
430
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--title-bar" role="toolbar" aria-label="Left, center, and right-aligned toolbar">
431
+ <div class="fd-title-bar">
432
+ <div class="fd-title-bar__button-container">
433
+ <button class="fd-button fd-button--nested" aria-label="Back">
434
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
435
+ </button>
436
+ </div>
437
+ <div class="fd-title-bar__container">
438
+ <div class="fd-title-bar__title-container">
439
+ <h4 class="fd-title-bar__title">Title</h4>
440
+ <button class="fd-button fd-button--nested" aria-label="information">
441
+ <i class="sap-icon--hint" role="presentation"></i>
442
+ </button>
443
+ </div>
444
+ <span class="fd-title-bar__subtitle">Subtitle, byline, description</span>
445
+ </div>
446
+ </div>
447
+ <span class="fd-toolbar__spacer"></span>
448
+
449
+ <button class="fd-button fd-button--transparent" aria-label="Filter">
450
+ <i class="sap-icon--filter" role="presentation"></i>
451
+ </button>
452
+ <button class="fd-button fd-button--transparent" aria-label="Sort">
453
+ <i class="sap-icon--sort" role="presentation"></i>
454
+ </button>
455
+ <button class="fd-button fd-button--transparent" aria-label="Overflow">
456
+ <i class="sap-icon--overflow" role="presentation"></i>
457
+ </button>
458
+ </div>
459
+ </div>
460
+ ```
461
+
462
+ ## Accessibility
463
+
464
+ - Use semantic HTML elements where appropriate
465
+ - Include proper ARIA attributes for interactive elements
466
+ - Ensure keyboard navigation support
467
+ - Provide adequate color contrast
468
+
469
+ ## Source
470
+
471
+ This documentation was automatically generated from: `packages/styles/stories/BTP/title-bar/title-bar.stories.js`
472
+
473
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).