@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/numeric-content.md ADDED
@@ -0,0 +1,317 @@
1
+ ---
2
+ component: fd-numeric-content
3
+ title: Dev/Numeric Content
4
+ category: Dev
5
+ selector: fd-numeric-content
6
+ cssFile: numeric-content.css
7
+ sourcePath: packages/styles/stories/Dev/numeric-content/numeric-content.stories.js
8
+ tags: []
9
+ dependencies: []
10
+ relatedComponents: []
11
+ stability: experimental
12
+ generatedAt: 2026-06-09T18:29:01.744Z
13
+ ---
14
+
15
+ # Dev/Numeric Content
16
+
17
+ > **🧪 EXPERIMENTAL**: This component is experimental and its API may change.
18
+
19
+
20
+
21
+ ## Installation
22
+
23
+ ```bash
24
+ npm install fundamental-styles
25
+ ```
26
+
27
+ ```html
28
+ <!-- Include theme -->
29
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
30
+
31
+ <!-- Include component CSS -->
32
+ <link href="node_modules/fundamental-styles/dist/numeric-content.css" rel="stylesheet">
33
+
34
+ ```
35
+
36
+ ## Basic Usage
37
+
38
+ ```html
39
+ <div class="tile-content-playground">
40
+ <div class="fd-numeric-content">
41
+ <div class="fd-numeric-content__kpi-container">
42
+ <div class="fd-numeric-content__kpi">1Ñç</div>
43
+ </div>
44
+ <div class="fd-numeric-content__scale-container">
45
+ <div class="fd-numeric-content__scale">
46
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
47
+ <span class="fd-numeric-content__scale-text">M</span>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ <div class="tile-content-small-playground">
53
+ <div class="fd-numeric-content fd-numeric-content--small-tile">
54
+ <div class="fd-numeric-content__kpi-container">
55
+ <div class="fd-numeric-content__kpi">1Ñç</div>
56
+ </div>
57
+ <div class="fd-numeric-content__scale-container">
58
+ <div class="fd-numeric-content__scale">
59
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
60
+ <span class="fd-numeric-content__scale-text">milçM</span>
61
+ </div>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ ```
66
+
67
+ ## Modifiers
68
+
69
+ | Class | Description |
70
+ |-------|-------------|
71
+ | `fd-numeric-content--m` | Style variant |
72
+ | `fd-numeric-content--s` | Style variant |
73
+ | `fd-numeric-content--small-tile` | Style variant |
74
+
75
+ ## BEM Elements
76
+
77
+ This component uses the following BEM elements:
78
+
79
+ - `fd-numeric-content__kpi`
80
+ - `fd-numeric-content__kpi--critical`
81
+ - `fd-numeric-content__kpi--informative`
82
+ - `fd-numeric-content__kpi--negative`
83
+ - `fd-numeric-content__kpi--positive`
84
+ - `fd-numeric-content__kpi-container`
85
+ - `fd-numeric-content__launch-icon`
86
+ - `fd-numeric-content__launch-icon-container`
87
+ - `fd-numeric-content__scale`
88
+ - `fd-numeric-content__scale--critical`
89
+ - `fd-numeric-content__scale--informative`
90
+ - `fd-numeric-content__scale--negative`
91
+ - `fd-numeric-content__scale--positive`
92
+ - `fd-numeric-content__scale-arrow`
93
+ - `fd-numeric-content__scale-container`
94
+ - `fd-numeric-content__scale-text`
95
+
96
+ ## Design Tokens
97
+
98
+ Key CSS variables used by this component:
99
+
100
+ - `--critical`
101
+ - `--informative`
102
+ - `--m`
103
+ - `--negative`
104
+ - `--positive`
105
+ - `--s`
106
+ - `--sapCriticalTextColor`
107
+ - `--sapInformativeTextColor`
108
+ - `--sapNegativeTextColor`
109
+ - `--sapNeutralTextColor`
110
+ - `--sapPositiveTextColor`
111
+ - `--sapTile_IconColor`
112
+ - `--small-tile`
113
+
114
+ ## Examples
115
+
116
+ ### Large
117
+
118
+ ```html
119
+ <div class="tile-content-playground">
120
+ <div class="fd-numeric-content">
121
+ <div class="fd-numeric-content__kpi-container">
122
+ <div class="fd-numeric-content__kpi">1Ñç</div>
123
+ </div>
124
+ <div class="fd-numeric-content__scale-container">
125
+ <div class="fd-numeric-content__scale">
126
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
127
+ <span class="fd-numeric-content__scale-text">M</span>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ <div class="tile-content-small-playground">
133
+ <div class="fd-numeric-content fd-numeric-content--small-tile">
134
+ <div class="fd-numeric-content__kpi-container">
135
+ <div class="fd-numeric-content__kpi">1Ñç</div>
136
+ </div>
137
+ <div class="fd-numeric-content__scale-container">
138
+ <div class="fd-numeric-content__scale">
139
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
140
+ <span class="fd-numeric-content__scale-text">milçM</span>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ ```
146
+
147
+ ### Medium
148
+
149
+ ```html
150
+ <div class="tile-content-playground">
151
+ <div class="fd-numeric-content fd-numeric-content--m">
152
+ <div class="fd-numeric-content__kpi-container">
153
+ <div class="fd-numeric-content__kpi fd-numeric-content__kpi--positive">123</div>
154
+ </div>
155
+ <div class="fd-numeric-content__scale-container">
156
+ <div class="fd-numeric-content__scale fd-numeric-content__scale--positive">
157
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ <div class="tile-content-small-playground">
163
+ <div class="fd-numeric-content fd-numeric-content--m fd-numeric-content--small-tile">
164
+ <div class="fd-numeric-content__kpi-container">
165
+ <div class="fd-numeric-content__kpi fd-numeric-content__kpi--negative">-889</div>
166
+ </div>
167
+ <div class="fd-numeric-content__scale-container">
168
+ <div class="fd-numeric-content__scale fd-numeric-content__scale--negative">
169
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ ```
175
+
176
+ ### Small
177
+
178
+ ```html
179
+ <div class="tile-content-playground">
180
+ <div class="fd-numeric-content fd-numeric-content--s">
181
+ <div class="fd-numeric-content__kpi-container">
182
+ <div class="fd-numeric-content__kpi fd-numeric-content__kpi--critical">12</div>
183
+ </div>
184
+ <div class="fd-numeric-content__scale-container">
185
+ <div class="fd-numeric-content__scale fd-numeric-content__scale--critical">
186
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
187
+ <span class="fd-numeric-content__scale-text">%</span>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ <div class="tile-content-small-playground">
193
+ <div class="fd-numeric-content fd-numeric-content--small-tile fd-numeric-content--m">
194
+ <div class="fd-numeric-content__kpi-container">
195
+ <div class="fd-numeric-content__kpi fd-numeric-content__kpi--informative">1.95</div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ ```
200
+
201
+ ### LaunchIconLarge
202
+
203
+ ```html
204
+ <div class="tile-content-playground">
205
+ <div class="fd-numeric-content">
206
+ <div class="fd-numeric-content__launch-icon-container">
207
+ <i class="fd-numeric-content__launch-icon sap-icon--line-charts" role="presentation"></i>
208
+ </div>
209
+ <div class="fd-numeric-content__kpi-container">
210
+ <div class="fd-numeric-content__kpi">123</div>
211
+ </div>
212
+ <div class="fd-numeric-content__scale-container">
213
+ <div class="fd-numeric-content__scale">
214
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
215
+ <span class="fd-numeric-content__scale-text">milçM</span>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ <div class="tile-content-small-playground">
221
+ <div class="fd-numeric-content fd-numeric-content--small-tile">
222
+ <div class="fd-numeric-content__launch-icon-container">
223
+ <i class="fd-numeric-content__launch-icon sap-icon--line-charts" role="presentation"></i>
224
+ </div>
225
+ <div class="fd-numeric-content__kpi-container">
226
+ <div class="fd-numeric-content__kpi fd-numeric-content__kpi--positive">1234</div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ ```
231
+
232
+ ### LaunchIconMedium
233
+
234
+ ```html
235
+ <div class="tile-content-playground">
236
+ <div class="fd-numeric-content fd-numeric-content--m">
237
+ <div class="fd-numeric-content__launch-icon-container">
238
+ <i class="fd-numeric-content__launch-icon sap-icon--line-charts" role="presentation"></i>
239
+ </div>
240
+ <div class="fd-numeric-content__kpi-container">
241
+ <div class="fd-numeric-content__kpi fd-numeric-content__kpi--negative">-889</div>
242
+ </div>
243
+ <div class="fd-numeric-content__scale-container">
244
+ <div class="fd-numeric-content__scale fd-numeric-content__scale--negative">
245
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
246
+ <span class="fd-numeric-content__scale-text">M</span>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ <div class="tile-content-small-playground">
252
+ <div class="fd-numeric-content fd-numeric-content--m fd-numeric-content--small-tile">
253
+ <div class="fd-numeric-content__launch-icon-container">
254
+ <i class="fd-numeric-content__launch-icon sap-icon--line-charts" role="presentation"></i>
255
+ </div>
256
+ <div class="fd-numeric-content__kpi-container">
257
+ <div class="fd-numeric-content__kpi fd-numeric-content__kpi--informative">-88 88</div>
258
+ </div>
259
+ <div class="fd-numeric-content__scale-container">
260
+ <div class="fd-numeric-content__scale fd-numeric-content__scale--informative">
261
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
262
+ <span class="fd-numeric-content__scale-text">milÇ</span>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ ```
268
+
269
+ ### LaunchIconSmall
270
+
271
+ ```html
272
+ <div class="tile-content-playground">
273
+ <div class="fd-numeric-content fd-numeric-content--s">
274
+ <div class="fd-numeric-content__launch-icon-container">
275
+ <i class="fd-numeric-content__launch-icon sap-icon--line-charts" role="presentation"></i>
276
+ </div>
277
+ <div class="fd-numeric-content__kpi-container">
278
+ <div class="fd-numeric-content__kpi fd-numeric-content__kpi--critical">123</div>
279
+ </div>
280
+ <div class="fd-numeric-content__scale-container">
281
+ <div class="fd-numeric-content__scale fd-numeric-content__scale--critical">
282
+ <i class="fd-numeric-content__scale-arrow sap-icon--up" aria-label="increase"></i>
283
+ <span class="fd-numeric-content__scale-text">ÑÇmlč</span>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ <div class="tile-content-small-playground">
289
+ <div class="fd-numeric-content fd-numeric-content--s fd-numeric-content--small-tile">
290
+ <div class="fd-numeric-content__launch-icon-container">
291
+ <i class="fd-numeric-content__launch-icon sap-icon--line-charts" role="presentation"></i>
292
+ </div>
293
+ <div class="fd-numeric-content__kpi-container">
294
+ <div class="fd-numeric-content__kpi fd-numeric-content__kpi--positive">123</div>
295
+ </div>
296
+ <div class="fd-numeric-content__scale-container">
297
+ <div class="fd-numeric-content__scale fd-numeric-content__scale--positive">
298
+ <i class="fd-numeric-content__scale-arrow sap-icon--down" aria-label="decrease"></i>
299
+ <span class="fd-numeric-content__scale-text">ÑÇmlč</span>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ ```
305
+
306
+ ## Accessibility
307
+
308
+ - Use semantic HTML elements where appropriate
309
+ - Include proper ARIA attributes for interactive elements
310
+ - Ensure keyboard navigation support
311
+ - Provide adequate color contrast
312
+
313
+ ## Source
314
+
315
+ This documentation was automatically generated from: `packages/styles/stories/Dev/numeric-content/numeric-content.stories.js`
316
+
317
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).
package/data/components/object-attribute.md ADDED
@@ -0,0 +1,96 @@
1
+ ---
2
+ component: fd-object-attribute
3
+ title: Dev/Object Attribute
4
+ category: Dev
5
+ selector: fd-object-attribute
6
+ cssFile: object-attribute.css
7
+ sourcePath: packages/styles/stories/Dev/object-attribute/object-attribute.stories.js
8
+ tags: []
9
+ dependencies: []
10
+ relatedComponents: []
11
+ stability: experimental
12
+ generatedAt: 2026-06-09T18:29:01.747Z
13
+ ---
14
+
15
+ # Dev/Object Attribute
16
+
17
+ > **🧪 EXPERIMENTAL**: This component is experimental and its API may change.
18
+
19
+
20
+
21
+ ## Installation
22
+
23
+ ```bash
24
+ npm install fundamental-styles
25
+ ```
26
+
27
+ ```html
28
+ <!-- Include theme -->
29
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
30
+
31
+ <!-- Include component CSS -->
32
+ <link href="node_modules/fundamental-styles/dist/object-attribute.css" rel="stylesheet">
33
+
34
+ ```
35
+
36
+ ## Basic Usage
37
+
38
+ ```html
39
+ <div class="fd-object-attribute" id="standardtext">Standard Object Attribute Text</div>
40
+ ```
41
+
42
+ ## Modifiers
43
+
44
+ | Class | Description |
45
+ |-------|-------------|
46
+ | `fd-object-attribute--link` | Style variant |
47
+
48
+ ## Design Tokens
49
+
50
+ Key CSS variables used by this component:
51
+
52
+ - `--link`
53
+ - `--sapContent_DisabledOpacity`
54
+ - `--sapContent_LabelColor`
55
+ - `--sapLinkColor`
56
+ - `--sapLink_Hover_Color`
57
+ - `--sapLink_Visited_Color`
58
+
59
+ ## Examples
60
+
61
+ ### Text
62
+
63
+ ```html
64
+ <div class="fd-object-attribute" id="standardtext">Standard Object Attribute Text</div>
65
+ ```
66
+
67
+ ### TextWithLink
68
+
69
+ ```html
70
+ <a id="textwithlink" href="#" class="fd-object-attribute--link" tabindex="0">Text With Link</a>
71
+ ```
72
+
73
+ ### DisabledLink
74
+
75
+ ```html
76
+ <a id="disabledlink" class="fd-object-attribute fd-object-attribute--link" aria-disabled="true">Disabled Object Attribute linked Text</a>
77
+ ```
78
+
79
+ ### TruncatedText
80
+
81
+ ```html
82
+ <span id="truncated" class="fd-object-attribute" title="Truncate Very long Object Attribute Text">Truncate Very long Object Attribute Text</span>
83
+ ```
84
+
85
+ ## Accessibility
86
+
87
+ - Use semantic HTML elements where appropriate
88
+ - Include proper ARIA attributes for interactive elements
89
+ - Ensure keyboard navigation support
90
+ - Provide adequate color contrast
91
+
92
+ ## Source
93
+
94
+ This documentation was automatically generated from: `packages/styles/stories/Dev/object-attribute/object-attribute.stories.js`
95
+
96
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).
package/data/components/object-identifier.md ADDED
@@ -0,0 +1,227 @@
1
+ ---
2
+ component: fd-object-identifier
3
+ title: Components/Object Identifier
4
+ category: Components
5
+ selector: fd-object-identifier
6
+ cssFile: object-identifier.css
7
+ sourcePath: packages/styles/stories/Components/object-identifier/object-identifier.stories.js
8
+ tags: []
9
+ dependencies: ["link","object-identifier","table"]
10
+ relatedComponents: ["link","object-identifier","table"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.625Z
13
+ ---
14
+
15
+ # Components/Object Identifier
16
+
17
+ The object identifier is a short text that represents the key identifier of an object, and can be displayed in various types of containers, tables, panels, popovers and more. The text wraps if there is insufficient horizontal space.
18
+
19
+ The object identifier should be easily read by the users, preferably displaying text instead of an ID. If it necessary to distinguish objects by their IDs, then it should appear as descriptive text below the title text.
20
+
21
+ **The object number comprises:**
22
+
23
+ - A title text
24
+ - An optional descriptive text
25
+ - An active state (if desired) which resembles a link that can trigger an event
26
+
27
+ ##Usage
28
+ **Use the object identifier if:**
29
+
30
+ - You want to indicate the key identifier on an object.
31
+
32
+ **Do not use the object identifier if:**
33
+
34
+ - You want to display system messages.
35
+ - They are for decorative purposes only.
36
+
37
+ ## Usage Guidelines
38
+
39
+ **Use the object identifier if:**
40
+
41
+ - You want to indicate the key identifier on an object.
42
+
43
+ ## When Not To Use
44
+
45
+ - You want to display system messages.
46
+ - They are for decorative purposes only.
47
+
48
+ ## Dependencies
49
+
50
+ This component depends on the following CSS files:
51
+
52
+ - `link.css`
53
+ - `object-identifier.css`
54
+ - `table.css`
55
+
56
+ ## Installation
57
+
58
+ ```bash
59
+ npm install fundamental-styles
60
+ ```
61
+
62
+ ```html
63
+ <!-- Include theme -->
64
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
65
+
66
+ <!-- Include component CSS -->
67
+ <link href="node_modules/fundamental-styles/dist/object-identifier.css" rel="stylesheet">
68
+
69
+ <!-- Include dependencies -->
70
+ <link href="node_modules/fundamental-styles/dist/link.css" rel="stylesheet">
71
+ <link href="node_modules/fundamental-styles/dist/object-identifier.css" rel="stylesheet">
72
+ <link href="node_modules/fundamental-styles/dist/table.css" rel="stylesheet">
73
+ ```
74
+
75
+ ## Basic Usage
76
+
77
+ ```html
78
+ <div class="fd-object-identifier">
79
+ <p class="fd-object-identifier__title">NoteBook Basic 15</p>
80
+ <span class="fd-object-identifier__sr-only">Object Identifier</span>
81
+ </div>
82
+ ```
83
+
84
+ ## Modifiers
85
+
86
+ | Class | Description |
87
+ |-------|-------------|
88
+ | `fd-object-identifier--medium` | To display the object identifier title in medium size, add the `fd-object-identifier--medium` modifier. |
89
+
90
+ ## BEM Elements
91
+
92
+ This component uses the following BEM elements:
93
+
94
+ - `fd-object-identifier__link`
95
+ - `fd-object-identifier__sr-only`
96
+ - `fd-object-identifier__text`
97
+ - `fd-object-identifier__title`
98
+ - `fd-object-identifier__title--bold`
99
+
100
+ ## Related Components
101
+
102
+ This component works with or depends on:
103
+
104
+ - `link`
105
+ - `object-identifier`
106
+ - `table`
107
+
108
+ ## Design Tokens
109
+
110
+ Key CSS variables used by this component:
111
+
112
+ - `--bold`
113
+ - `--fdObjectIdentifier_Font_Size`
114
+ - `--fdObjectIdentifier_Font_Weight`
115
+ - `--medium`
116
+ - `--sapContent_LabelColor`
117
+ - `--sapFontLargeSize`
118
+ - `--sapFontSize`
119
+ - `--sapList_TextColor`
120
+
121
+ ## Examples
122
+
123
+ ### Title
124
+
125
+ To display the object identifier as a title, add the `fd-object-identifier__title` modifier class to the main element.
126
+
127
+ ```html
128
+ <div class="fd-object-identifier">
129
+ <p class="fd-object-identifier__title">NoteBook Basic 15</p>
130
+ <span class="fd-object-identifier__sr-only">Object Identifier</span>
131
+ </div>
132
+ ```
133
+
134
+ ### Bold
135
+
136
+ To display the object identifier's title in bold, replace \
137
+
138
+ ```html
139
+ <div class="fd-object-identifier">
140
+ <p class="fd-object-identifier__title fd-object-identifier__title--bold">NoteBook Basic 15</p>
141
+ <span class="fd-object-identifier__sr-only">Object Identifier</span>
142
+ </div>
143
+ ```
144
+
145
+ ### Link
146
+
147
+ To display the object identifier as a link, use anchor element with `.fd-link .fd-object-identifier__link` classes.
148
+
149
+ ```html
150
+ <div class="fd-object-identifier">
151
+ <p class="fd-object-identifier__title">
152
+ <a href="#" tabindex="0" class="fd-link fd-object-identifier__link" aria-label="Object Identifier">
153
+ <span class="fd-link__content">NoteBook Basic 15</span>
154
+ </a>
155
+ </p>
156
+ </div>
157
+ <div class="fd-object-identifier">
158
+ <p class="fd-object-identifier__title fd-object-identifier__title--bold">
159
+ <a href="#" tabindex="0" class="fd-link fd-object-identifier__link" aria-label="Object Identifier">
160
+ <span class="fd-link__content">NoteBook Basic 15</span>
161
+ </a>
162
+ </p>
163
+ </div>
164
+ ```
165
+
166
+ ### Descriptive
167
+
168
+ To display the object identifier\
169
+
170
+ ```html
171
+ <div class="fd-object-identifier">
172
+ <p class="fd-object-identifier__title">NoteBook Basic 15</p>
173
+ <p class="fd-object-identifier__text">Notebook Basic 15 with 2,80 GHz quad core, 15" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro</p>
174
+ <span class="fd-object-identifier__sr-only">Object Identifier</span>
175
+ </div>
176
+
177
+ <div class="fd-object-identifier">
178
+ <p class="fd-object-identifier__title fd-object-identifier__title--bold">NoteBook Basic 15</p>
179
+ <p class="fd-object-identifier__text">Notebook Basic 15 with 2,80 GHz quad core, 15" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro</p>
180
+ <span class="fd-object-identifier__sr-only">Object Identifier</span>
181
+ </div>
182
+
183
+ <div class="fd-object-identifier">
184
+ <p class="fd-object-identifier__title">
185
+ <a href="#" tabindex="0" class="fd-link fd-object-identifier__link" aria-describedby="fd-object-identifier-desc-1 fd-object-identifier-text-1">
186
+ <span class="fd-link__content">NoteBook Basic 15</span>
187
+ </a>
188
+ </p>
189
+ <span class="fd-object-identifier__sr-only" aria-hidden="true" id="fd-object-identifier-desc-1">Object Identifier</span>
190
+ <p class="fd-object-identifier__text" id="fd-object-identifier-text-1">Notebook Basic 15 with 2,80 GHz quad core, 15" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro</p>
191
+ </div>
192
+
193
+ <div class="fd-object-identifier">
194
+ <p class="fd-object-identifier__title fd-object-identifier__title--bold">
195
+ <a href="#" tabindex="0" class="fd-link fd-object-identifier__link" aria-describedby="fd-object-identifier-desc-2 fd-object-identifier-text-2">
196
+ <span class="fd-link__content">NoteBook Basic 15</span>
197
+ </a>
198
+ </p>
199
+ <span class="fd-object-identifier__sr-only" aria-hidden="true" id="fd-object-identifier-desc-2">Object Identifier</span>
200
+ <p class="fd-object-identifier__text" id="fd-object-identifier-text-2">Notebook Basic 15 with 2,80 GHz quad core, 15" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro</p>
201
+ </div>
202
+ ```
203
+
204
+ ### MediumSize
205
+
206
+ To display the object identifier title in medium size, add the `fd-object-identifier--medium` modifier.
207
+
208
+ ```html
209
+ <div class="fd-object-identifier fd-object-identifier--medium">
210
+ <p class="fd-object-identifier__title">NoteBook Basic 15</p>
211
+ <p class="fd-object-identifier__text">Notebook Basic 15 with 2,80 GHz quad core, 15" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro</p>
212
+ <span class="fd-object-identifier__sr-only">Object Identifier</span>
213
+ </div>
214
+ ```
215
+
216
+ ## Accessibility
217
+
218
+ - Use semantic HTML elements where appropriate
219
+ - Include proper ARIA attributes for interactive elements
220
+ - Ensure keyboard navigation support
221
+ - Provide adequate color contrast
222
+
223
+ ## Source
224
+
225
+ This documentation was automatically generated from: `packages/styles/stories/Components/object-identifier/object-identifier.stories.js`
226
+
227
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).