@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/object-status.md ADDED
@@ -0,0 +1,1538 @@
1
+ ---
2
+ component: fd-object-status
3
+ title: Components/Object Status
4
+ category: Components
5
+ selector: fd-object-status
6
+ cssFile: object-status.css
7
+ sourcePath: packages/styles/stories/Components/object-status/object-status.stories.js
8
+ tags: []
9
+ dependencies: ["icon","object-status"]
10
+ relatedComponents: ["icon","object-status"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.574Z
13
+ ---
14
+
15
+ # Components/Object Status
16
+
17
+ Object Status is a short text that represents the semantic status of an object. It has a semantic
18
+ color and an optional icon. Typically, the object status is used in the dynamic page header and as a status
19
+ attribute of a line item in a table.
20
+
21
+ ## Dependencies
22
+
23
+ This component depends on the following CSS files:
24
+
25
+ - `icon.css`
26
+ - `object-status.css`
27
+
28
+ ## Installation
29
+
30
+ ```bash
31
+ npm install fundamental-styles
32
+ ```
33
+
34
+ ```html
35
+ <!-- Include theme -->
36
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
37
+
38
+ <!-- Include component CSS -->
39
+ <link href="node_modules/fundamental-styles/dist/object-status.css" rel="stylesheet">
40
+
41
+ <!-- Include dependencies -->
42
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
43
+ <link href="node_modules/fundamental-styles/dist/object-status.css" rel="stylesheet">
44
+ ```
45
+
46
+ ## Basic Usage
47
+
48
+ ```html
49
+ <span class="fd-object-status fd-object-status--negative">
50
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
51
+ <span class="fd-object-status__text">Negative</span>
52
+ <span class="fd-object-status__sr-only">Object Status</span>
53
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
54
+ </span>
55
+ <span class="fd-object-status fd-object-status--critical">
56
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
57
+ <span class="fd-object-status__text">Critical</span>
58
+ <span class="fd-object-status__sr-only">Object Status</span>
59
+ <span class="fd-object-status__sr-only">Warning issued</span>
60
+ </span>
61
+ <span class="fd-object-status fd-object-status--positive">
62
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
63
+ <span class="fd-object-status__text">Positive</span>
64
+ <span class="fd-object-status__sr-only">Object Status</span>
65
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
66
+ </span>
67
+ <span class="fd-object-status fd-object-status--informative">
68
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
69
+ <span class="fd-object-status__text">Info</span>
70
+ <span class="fd-object-status__sr-only">Object Status</span>
71
+ <span class="fd-object-status__sr-only">Informative entry</span>
72
+ </span>
73
+ ```
74
+
75
+ ## Modifiers
76
+
77
+ | Class | Description |
78
+ |-------|-------------|
79
+ | `fd-object-status--critical` | Style variant |
80
+ | `fd-object-status--icon-only` | Object status icon only |
81
+ | `fd-object-status--indication-` | Object Status with Generic Indication Colors |
82
+ | `fd-object-status--informative` | Style variant |
83
+ | `fd-object-status--inverted` | Inverted Object Status(optional inverted visualization) determines whether the background color reflects the set state
84
+ instead of the control's text |
85
+ | `fd-object-status--large` | Style variant |
86
+ | `fd-object-status--link` | If the object status is used as a link, a hover effect is shown on non-touch devices |
87
+ | `fd-object-status--negative` | Object Status can display the semantic status of an object: negative (class: \ |
88
+ | `fd-object-status--neutral` | Style variant |
89
+ | `fd-object-status--positive` | Style variant |
90
+ | `fd-object-status--truncate` | By default, Object Status text goes on multiple lines based on the max width that is set for the element |
91
+
92
+ ## States
93
+
94
+ | Class | Description |
95
+ |-------|-------------|
96
+ | `is-active` | Active state |
97
+ | `is-focus` | Focus state |
98
+ | `is-hover` | Hover state |
99
+ | `is-visited` | Visited state |
100
+
101
+ ## BEM Elements
102
+
103
+ This component uses the following BEM elements:
104
+
105
+ - `fd-object-status__icon`
106
+ - `fd-object-status__sr-only`
107
+ - `fd-object-status__text`
108
+
109
+ ## Related Components
110
+
111
+ This component works with or depends on:
112
+
113
+ - `icon`
114
+ - `object-status`
115
+
116
+ ## Design Tokens
117
+
118
+ Key CSS variables used by this component:
119
+
120
+ - `--fdElementIconColor`
121
+ - `--fdElementTextColor`
122
+ - `--fdObjectStatus_Accent_Color_1_Focus`
123
+ - `--fdObjectStatus_Accent_Color_2_Focus`
124
+ - `--fdObjectStatus_Accent_Color_3_Focus`
125
+ - `--fdObjectStatus_Accent_Color_4_Focus`
126
+ - `--fdObjectStatus_Accent_Color_5_Focus`
127
+ - `--fdObjectStatus_Accent_Color_6_Focus`
128
+ - `--fdObjectStatus_Accent_Color_7_Focus`
129
+ - `--fdObjectStatus_Accent_Color_8_Focus`
130
+ - `--fdObjectStatus_Active_Text_Indication_Color_1`
131
+ - `--fdObjectStatus_Active_Text_Indication_Color_10`
132
+ - `--fdObjectStatus_Active_Text_Indication_Color_2`
133
+ - `--fdObjectStatus_Active_Text_Indication_Color_3`
134
+ - `--fdObjectStatus_Active_Text_Indication_Color_4`
135
+
136
+ *...and 5 more*
137
+
138
+ ## Examples
139
+
140
+ ### Primary
141
+
142
+ Object Status can display the semantic status of an object: negative (class: \
143
+
144
+ ```html
145
+ <span class="fd-object-status fd-object-status--negative">
146
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
147
+ <span class="fd-object-status__text">Negative</span>
148
+ <span class="fd-object-status__sr-only">Object Status</span>
149
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
150
+ </span>
151
+ <span class="fd-object-status fd-object-status--critical">
152
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
153
+ <span class="fd-object-status__text">Critical</span>
154
+ <span class="fd-object-status__sr-only">Object Status</span>
155
+ <span class="fd-object-status__sr-only">Warning issued</span>
156
+ </span>
157
+ <span class="fd-object-status fd-object-status--positive">
158
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
159
+ <span class="fd-object-status__text">Positive</span>
160
+ <span class="fd-object-status__sr-only">Object Status</span>
161
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
162
+ </span>
163
+ <span class="fd-object-status fd-object-status--informative">
164
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
165
+ <span class="fd-object-status__text">Info</span>
166
+ <span class="fd-object-status__sr-only">Object Status</span>
167
+ <span class="fd-object-status__sr-only">Informative entry</span>
168
+ </span>
169
+ ```
170
+
171
+ ### Icon
172
+
173
+ Object status icon only
174
+
175
+ ```html
176
+ <span class="fd-object-status fd-object-status--negative">
177
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
178
+ <span class="fd-object-status__sr-only">Object Status</span>
179
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
180
+ </span>
181
+ <span class="fd-object-status fd-object-status--critical">
182
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
183
+ <span class="fd-object-status__sr-only">Object Status</span>
184
+ <span class="fd-object-status__sr-only">Warning issued</span>
185
+ </span>
186
+ <span class="fd-object-status fd-object-status--positive">
187
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
188
+ <span class="fd-object-status__sr-only">Object Status</span>
189
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
190
+ </span>
191
+ <span class="fd-object-status fd-object-status--informative">
192
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
193
+ <span class="fd-object-status__sr-only">Object Status</span>
194
+ <span class="fd-object-status__sr-only">Informative entry</span>
195
+ </span>
196
+ ```
197
+
198
+ ### Text
199
+
200
+ Object status text only
201
+
202
+ ```html
203
+ <span class="fd-object-status fd-object-status--negative">
204
+ <span class="fd-object-status__text">Negative</span>
205
+ <span class="fd-object-status__sr-only">Object Status</span>
206
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
207
+ </span>
208
+ <span class="fd-object-status fd-object-status--critical">
209
+ <span class="fd-object-status__text">Critical</span>
210
+ <span class="fd-object-status__sr-only">Object Status</span>
211
+ <span class="fd-object-status__sr-only">Warning issued</span>
212
+ </span>
213
+ <span class="fd-object-status fd-object-status--positive">
214
+ <span class="fd-object-status__text">Positive</span>
215
+ <span class="fd-object-status__sr-only">Object Status</span>
216
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
217
+ </span>
218
+ <span class="fd-object-status fd-object-status--informative">
219
+ <span class="fd-object-status__text">Info</span>
220
+ <span class="fd-object-status__sr-only">Object Status</span>
221
+ <span class="fd-object-status__sr-only">Informative entry</span>
222
+ </span>
223
+ <span class="fd-object-status">
224
+ <span class="fd-object-status__text">Neutral</span>
225
+ <span class="fd-object-status__sr-only">Object Status</span>
226
+ </span>
227
+ ```
228
+
229
+ ### IconAndText
230
+
231
+ Object status icon and text
232
+
233
+ ```html
234
+ <span class="fd-object-status fd-object-status--negative">
235
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
236
+ <span class="fd-object-status__text">Negative</span>
237
+ <span class="fd-object-status__sr-only">Object Status</span>
238
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
239
+ </span>
240
+ <span class="fd-object-status fd-object-status--critical">
241
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
242
+ <span class="fd-object-status__text">Critical</span>
243
+ <span class="fd-object-status__sr-only">Object Status</span>
244
+ <span class="fd-object-status__sr-only">Warning issued</span>
245
+ </span>
246
+ <span class="fd-object-status fd-object-status--positive">
247
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
248
+ <span class="fd-object-status__text">Positive</span>
249
+ <span class="fd-object-status__sr-only">Object Status</span>
250
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
251
+ </span>
252
+ <span class="fd-object-status fd-object-status--informative">
253
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
254
+ <span class="fd-object-status__text">Info</span>
255
+ <span class="fd-object-status__sr-only">Object Status</span>
256
+ <span class="fd-object-status__sr-only">Informative entry</span>
257
+ </span>
258
+ <span class="fd-object-status fd-object-status--neutral">
259
+ <i class="fd-object-status__icon sap-icon--circle-task-2" role="presentation" aria-hidden="true"></i>
260
+ <span class="fd-object-status__text">Neutral</span>
261
+ <span class="fd-object-status__sr-only">Object Status</span>
262
+ </span>
263
+ ```
264
+
265
+ ### GenericIndicationColors
266
+
267
+ Object Status with Generic Indication Colors
268
+
269
+ ```html
270
+ <span class="fd-object-status fd-object-status--indication-1">
271
+ <span class="fd-object-status__text">Dark Red</span>
272
+ <span class="fd-object-status__sr-only">Object Status</span>
273
+ <span class="fd-object-status__sr-only">Indication Color 1</span>
274
+ </span>
275
+ <span class="fd-object-status fd-object-status--indication-2">
276
+ <span class="fd-object-status__text">Red</span>
277
+ <span class="fd-object-status__sr-only">Object Status</span>
278
+ <span class="fd-object-status__sr-only">Indication Color 2</span>
279
+ </span>
280
+ <span class="fd-object-status fd-object-status--indication-3">
281
+ <span class="fd-object-status__text">Yellow</span>
282
+ <span class="fd-object-status__sr-only">Object Status</span>
283
+ <span class="fd-object-status__sr-only">Indication Color 3</span>
284
+ </span>
285
+ <span class="fd-object-status fd-object-status--indication-4">
286
+ <span class="fd-object-status__text">Green</span>
287
+ <span class="fd-object-status__sr-only">Object Status</span>
288
+ <span class="fd-object-status__sr-only">Indication Color 4</span>
289
+ </span>
290
+ <span class="fd-object-status fd-object-status--indication-5">
291
+ <span class="fd-object-status__text">Blue</span>
292
+ <span class="fd-object-status__sr-only">Object Status</span>
293
+ <span class="fd-object-status__sr-only">Indication Color 5</span>
294
+ </span>
295
+ <span class="fd-object-status fd-object-status--indication-6">
296
+ <span class="fd-object-status__text">Teal</span>
297
+ <span class="fd-object-status__sr-only">Object Status</span>
298
+ <span class="fd-object-status__sr-only">Indication Color 6</span>
299
+ </span>
300
+ <span class="fd-object-status fd-object-status--indication-7">
301
+ <span class="fd-object-status__text">Purple</span>
302
+ <span class="fd-object-status__sr-only">Object Status</span>
303
+ <span class="fd-object-status__sr-only">Indication Color 7</span>
304
+ </span>
305
+ <span class="fd-object-status fd-object-status--indication-8">
306
+ <span class="fd-object-status__text">Pink</span>
307
+ <span class="fd-object-status__sr-only">Object Status</span>
308
+ <span class="fd-object-status__sr-only">Indication Color 8</span>
309
+ </span>
310
+ ```
311
+
312
+ ### ClickableObjectStatus
313
+
314
+ If the object status is used as a link, a hover effect is shown on non-touch devices.
315
+ If the object status is shown using a combination of icon and text, there is no hover effect for the icon.
316
+ If Object Status has to be clicked/tabbed by the user add the \
317
+
318
+ ```html
319
+ <h3>Regular State</h3>
320
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--negative fd-object-status--link">
321
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
322
+ <span class="fd-object-status__text">Negative</span>
323
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
324
+ </div>
325
+
326
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--critical fd-object-status--link">
327
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
328
+ <span class="fd-object-status__text">Critical</span>
329
+ <span class="fd-object-status__sr-only">Warning issued</span>
330
+ </div>
331
+
332
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--positive fd-object-status--link">
333
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
334
+ <span class="fd-object-status__text">Positive</span>
335
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
336
+ </div>
337
+
338
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--informative fd-object-status--link" tabindex="0">
339
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
340
+ <span class="fd-object-status__text">Info</span>
341
+ <span class="fd-object-status__sr-only">Informative entry</span>
342
+ </div>
343
+
344
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link" tabindex="0">
345
+ <span class="fd-object-status__text">Neutral</span>
346
+ <span class="fd-object-status__sr-only">Neutral entry</span>
347
+ </div>
348
+
349
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-1">
350
+ <span class="fd-object-status__text">Dark Red</span>
351
+ <span class="fd-object-status__sr-only">Indication Color 1</span>
352
+ </div>
353
+
354
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-2">
355
+ <span class="fd-object-status__text">Red</span>
356
+ <span class="fd-object-status__sr-only">Indication Color 2</span>
357
+ </div>
358
+
359
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-3">
360
+ <span class="fd-object-status__text">Yellow</span>
361
+ <span class="fd-object-status__sr-only">Indication Color 3</span>
362
+ </div>
363
+
364
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-4">
365
+ <span class="fd-object-status__text">Green</span>
366
+ <span class="fd-object-status__sr-only">Indication Color 4</span>
367
+ </div>
368
+
369
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-5">
370
+ <span class="fd-object-status__text">Blue</span>
371
+ <span class="fd-object-status__sr-only">Indication Color 5</span>
372
+ </div>
373
+
374
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-6" tabindex="0">
375
+ <span class="fd-object-status__text">Teal</span>
376
+ <span class="fd-object-status__sr-only">Indication Color 6</span>
377
+ </div>
378
+
379
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-7" tabindex="0">
380
+ <span class="fd-object-status__text">Purple</span>
381
+ <span class="fd-object-status__sr-only">Indication Color 7</span>
382
+ </div>
383
+
384
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-8" tabindex="0">
385
+ <span class="fd-object-status__text">Pink</span>
386
+ <span class="fd-object-status__sr-only">Indication Color 8</span>
387
+ </div>
388
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--negative fd-object-status--link is-hover">
389
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
390
+ <span class="fd-object-status__text">Negative</span>
391
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
392
+ </div>
393
+
394
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--critical fd-object-status--link is-hover">
395
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
396
+ <span class="fd-object-status__text">Critical</span>
397
+ <span class="fd-object-status__sr-only">Warning issued</span>
398
+ </div>
399
+
400
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--positive fd-object-status--link is-hover">
401
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
402
+ <span class="fd-object-status__text">Positive</span>
403
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
404
+ </div>
405
+
406
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--informative fd-object-status--link is-hover" tabindex="0">
407
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
408
+ <span class="fd-object-status__text">Info</span>
409
+ <span class="fd-object-status__sr-only">Informative entry</span>
410
+ </div>
411
+
412
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link is-hover" tabindex="0">
413
+ <span class="fd-object-status__text">Neutral</span>
414
+ <span class="fd-object-status__sr-only">Neutral entry</span>
415
+ </div>
416
+
417
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-1 is-hover">
418
+ <span class="fd-object-status__text">Dark Red</span>
419
+ <span class="fd-object-status__sr-only">Indication Color 1</span>
420
+ </div>
421
+
422
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-2 is-hover">
423
+ <span class="fd-object-status__text">Red</span>
424
+ <span class="fd-object-status__sr-only">Indication Color 2</span>
425
+ </div>
426
+
427
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-3 is-hover">
428
+ <span class="fd-object-status__text">Yellow</span>
429
+ <span class="fd-object-status__sr-only">Indication Color 3</span>
430
+ </div>
431
+
432
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-4 is-hover">
433
+ <span class="fd-object-status__text">Green</span>
434
+ <span class="fd-object-status__sr-only">Indication Color 4</span>
435
+ </div>
436
+
437
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-5 is-hover">
438
+ <span class="fd-object-status__text">Blue</span>
439
+ <span class="fd-object-status__sr-only">Indication Color 5</span>
440
+ </div>
441
+
442
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-6 is-hover" tabindex="0">
443
+ <span class="fd-object-status__text">Teal</span>
444
+ <span class="fd-object-status__sr-only">Indication Color 6</span>
445
+ </div>
446
+
447
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-7 is-hover" tabindex="0">
448
+ <span class="fd-object-status__text">Purple</span>
449
+ <span class="fd-object-status__sr-only">Indication Color 7</span>
450
+ </div>
451
+
452
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-8 is-hover" tabindex="0">
453
+ <span class="fd-object-status__text">Pink</span>
454
+ <span class="fd-object-status__sr-only">Indication Color 8</span>
455
+ </div>
456
+ <h3>Down State</h3>
457
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--negative fd-object-status--link is-active">
458
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
459
+ <span class="fd-object-status__text">Negative</span>
460
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
461
+ </div>
462
+
463
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--critical fd-object-status--link is-active">
464
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
465
+ <span class="fd-object-status__text">Critical</span>
466
+ <span class="fd-object-status__sr-only">Warning issued</span>
467
+ </div>
468
+
469
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--positive fd-object-status--link is-active">
470
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
471
+ <span class="fd-object-status__text">Positive</span>
472
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
473
+ </div>
474
+
475
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--informative fd-object-status--link is-active" tabindex="0">
476
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
477
+ <span class="fd-object-status__text">Info</span>
478
+ <span class="fd-object-status__sr-only">Informative entry</span>
479
+ </div>
480
+
481
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link is-active" tabindex="0">
482
+ <span class="fd-object-status__text">Neutral</span>
483
+ <span class="fd-object-status__sr-only">Neutral entry</span>
484
+ </div>
485
+
486
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-1 is-active">
487
+ <span class="fd-object-status__text">Dark Red</span>
488
+ <span class="fd-object-status__sr-only">Indication Color 1</span>
489
+ </div>
490
+
491
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-2 is-active">
492
+ <span class="fd-object-status__text">Red</span>
493
+ <span class="fd-object-status__sr-only">Indication Color 2</span>
494
+ </div>
495
+
496
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-3 is-active">
497
+ <span class="fd-object-status__text">Yellow</span>
498
+ <span class="fd-object-status__sr-only">Indication Color 3</span>
499
+ </div>
500
+
501
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-4 is-active">
502
+ <span class="fd-object-status__text">Green</span>
503
+ <span class="fd-object-status__sr-only">Indication Color 4</span>
504
+ </div>
505
+
506
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-5 is-active">
507
+ <span class="fd-object-status__text">Blue</span>
508
+ <span class="fd-object-status__sr-only">Indication Color 5</span>
509
+ </div>
510
+
511
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-6 is-active" tabindex="0">
512
+ <span class="fd-object-status__text">Teal</span>
513
+ <span class="fd-object-status__sr-only">Indication Color 6</span>
514
+ </div>
515
+
516
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-7 is-active" tabindex="0">
517
+ <span class="fd-object-status__text">Purple</span>
518
+ <span class="fd-object-status__sr-only">Indication Color 7</span>
519
+ </div>
520
+
521
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-8 is-active" tabindex="0">
522
+ <span class="fd-object-status__text">Pink</span>
523
+ <span class="fd-object-status__sr-only">Indication Color 8</span>
524
+ </div>
525
+ <h3>Visited State</h3>
526
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--negative fd-object-status--link is-visited">
527
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
528
+ <span class="fd-object-status__text">Negative</span>
529
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
530
+ </div>
531
+
532
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--critical fd-object-status--link is-visited">
533
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
534
+ <span class="fd-object-status__text">Critical</span>
535
+ <span class="fd-object-status__sr-only">Warning issued</span>
536
+ </div>
537
+
538
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--positive fd-object-status--link is-visited">
539
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
540
+ <span class="fd-object-status__text">Positive</span>
541
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
542
+ </div>
543
+
544
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--informative fd-object-status--link is-visited" tabindex="0">
545
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
546
+ <span class="fd-object-status__text">Info</span>
547
+ <span class="fd-object-status__sr-only">Informative entry</span>
548
+ </div>
549
+
550
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link is-visited" tabindex="0">
551
+ <span class="fd-object-status__text">Neutral</span>
552
+ <span class="fd-object-status__sr-only">Neutral entry</span>
553
+ </div>
554
+
555
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-1 is-visited">
556
+ <span class="fd-object-status__text">Dark Red</span>
557
+ <span class="fd-object-status__sr-only">Indication Color 1</span>
558
+ </div>
559
+
560
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-2 is-visited">
561
+ <span class="fd-object-status__text">Red</span>
562
+ <span class="fd-object-status__sr-only">Indication Color 2</span>
563
+ </div>
564
+
565
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-3 is-visited">
566
+ <span class="fd-object-status__text">Yellow</span>
567
+ <span class="fd-object-status__sr-only">Indication Color 3</span>
568
+ </div>
569
+
570
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-4 is-visited">
571
+ <span class="fd-object-status__text">Green</span>
572
+ <span class="fd-object-status__sr-only">Indication Color 4</span>
573
+ </div>
574
+
575
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-5 is-visited">
576
+ <span class="fd-object-status__text">Blue</span>
577
+ <span class="fd-object-status__sr-only">Indication Color 5</span>
578
+ </div>
579
+
580
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-6 is-visited" tabindex="0">
581
+ <span class="fd-object-status__text">Teal</span>
582
+ <span class="fd-object-status__sr-only">Indication Color 6</span>
583
+ </div>
584
+
585
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-7 is-visited" tabindex="0">
586
+ <span class="fd-object-status__text">Purple</span>
587
+ <span class="fd-object-status__sr-only">Indication Color 7</span>
588
+ </div>
589
+
590
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-8 is-visited" tabindex="0">
591
+ <span class="fd-object-status__text">Pink</span>
592
+ <span class="fd-object-status__sr-only">Indication Color 8</span>
593
+ </div>
594
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--negative fd-object-status--link is-focus">
595
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
596
+ <span class="fd-object-status__text">Negative</span>
597
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
598
+ </div>
599
+
600
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--critical fd-object-status--link is-focus">
601
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
602
+ <span class="fd-object-status__text">Critical</span>
603
+ <span class="fd-object-status__sr-only">Warning issued</span>
604
+ </div>
605
+
606
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--positive fd-object-status--link is-focus">
607
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
608
+ <span class="fd-object-status__text">Positive</span>
609
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
610
+ </div>
611
+
612
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--informative fd-object-status--link is-focus" tabindex="0">
613
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
614
+ <span class="fd-object-status__text">Info</span>
615
+ <span class="fd-object-status__sr-only">Informative entry</span>
616
+ </div>
617
+
618
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link is-focus" tabindex="0">
619
+ <span class="fd-object-status__text">Neutral</span>
620
+ <span class="fd-object-status__sr-only">Neutral entry</span>
621
+ </div>
622
+
623
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-1 is-focus">
624
+ <span class="fd-object-status__text">Dark Red</span>
625
+ <span class="fd-object-status__sr-only">Indication Color 1</span>
626
+ </div>
627
+
628
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-2 is-focus">
629
+ <span class="fd-object-status__text">Red</span>
630
+ <span class="fd-object-status__sr-only">Indication Color 2</span>
631
+ </div>
632
+
633
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-3 is-focus">
634
+ <span class="fd-object-status__text">Yellow</span>
635
+ <span class="fd-object-status__sr-only">Indication Color 3</span>
636
+ </div>
637
+
638
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-4 is-focus">
639
+ <span class="fd-object-status__text">Green</span>
640
+ <span class="fd-object-status__sr-only">Indication Color 4</span>
641
+ </div>
642
+
643
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-5 is-focus">
644
+ <span class="fd-object-status__text">Blue</span>
645
+ <span class="fd-object-status__sr-only">Indication Color 5</span>
646
+ </div>
647
+
648
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-6 is-focus" tabindex="0">
649
+ <span class="fd-object-status__text">Teal</span>
650
+ <span class="fd-object-status__sr-only">Indication Color 6</span>
651
+ </div>
652
+
653
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-7 is-focus" tabindex="0">
654
+ <span class="fd-object-status__text">Purple</span>
655
+ <span class="fd-object-status__sr-only">Indication Color 7</span>
656
+ </div>
657
+
658
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--link fd-object-status--indication-8 is-focus" tabindex="0">
659
+ <span class="fd-object-status__text">Pink</span>
660
+ <span class="fd-object-status__sr-only">Indication Color 8</span>
661
+ </div>
662
+ ```
663
+
664
+ ### LargeObjectStatus
665
+
666
+ ```html
667
+ <span class="fd-object-status fd-object-status--large fd-object-status--negative">
668
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
669
+ <span class="fd-object-status__text">Negative</span>
670
+ <span class="fd-object-status__sr-only">Object Status</span>
671
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
672
+ </span>
673
+ <span class="fd-object-status fd-object-status--large fd-object-status--critical">
674
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
675
+ <span class="fd-object-status__text">Critical</span>
676
+ <span class="fd-object-status__sr-only">Object Status</span>
677
+ <span class="fd-object-status__sr-only">Warning issued</span>
678
+ </span>
679
+ <span class="fd-object-status fd-object-status--large fd-object-status--positive">
680
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
681
+ <span class="fd-object-status__text">Positive</span>
682
+ <span class="fd-object-status__sr-only">Object Status</span>
683
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
684
+ </span>
685
+ <span class="fd-object-status fd-object-status--large fd-object-status--informative">
686
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
687
+ <span class="fd-object-status__text">Info</span>
688
+ <span class="fd-object-status__sr-only">Object Status</span>
689
+ <span class="fd-object-status__sr-only">Informative Entry</span>
690
+ </span>
691
+ <span class="fd-object-status fd-object-status--large">
692
+ <span class="fd-object-status__text">Neutral</span>
693
+ <span class="fd-object-status__sr-only">Object Status</span>
694
+ </span>
695
+ ```
696
+
697
+ ### Inverted
698
+
699
+ Inverted Object Status(optional inverted visualization) determines whether the background color reflects the set state
700
+ instead of the control's text. Use the inverted object status if the information is crucial for the user’s actions and needs to stand out visually.
701
+ Inverted Object Status is achieved by adding the \
702
+
703
+ ```html
704
+ <span class="fd-object-status fd-object-status--negative fd-object-status--inverted">
705
+ <span class="fd-object-status__text">Inverted Negative</span>
706
+ <span class="fd-object-status__sr-only">Object Status</span>
707
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
708
+ </span>
709
+ <span class="fd-object-status fd-object-status--critical fd-object-status--inverted">
710
+ <span class="fd-object-status__text">Inverted Warning</span>
711
+ <span class="fd-object-status__sr-only">Object Status</span>
712
+ <span class="fd-object-status__sr-only">Warning issued</span>
713
+ </span>
714
+ <span class="fd-object-status fd-object-status--positive fd-object-status--inverted">
715
+ <span class="fd-object-status__text">Inverted Success</span>
716
+ <span class="fd-object-status__sr-only">Object Status</span>
717
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
718
+ </span>
719
+ <span class="fd-object-status fd-object-status--informative fd-object-status--inverted">
720
+ <span class="fd-object-status__text">Inverted informative</span>
721
+ <span class="fd-object-status__sr-only">Object Status</span>
722
+ <span class="fd-object-status__sr-only">Informative entry</span>
723
+ </span>
724
+ <span class="fd-object-status fd-object-status--inverted">
725
+ <span class="fd-object-status__text">Inverted Neutral</span>
726
+ <span class="fd-object-status__sr-only">Object Status</span>
727
+ </span>
728
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--negative">
729
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
730
+ </span>
731
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--negative">
732
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
733
+ <span class="fd-object-status__text">Negative</span>
734
+ <span class="fd-object-status__sr-only">Object Status</span>
735
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
736
+ </span>
737
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--critical">
738
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
739
+ <span class="fd-object-status__text">Critical</span>
740
+ <span class="fd-object-status__sr-only">Object Status</span>
741
+ <span class="fd-object-status__sr-only">Warning issued</span>
742
+ </span>
743
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--positive">
744
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
745
+ <span class="fd-object-status__text">Positive</span>
746
+ <span class="fd-object-status__sr-only">Object Status</span>
747
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
748
+ </span>
749
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--informative">
750
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
751
+ <span class="fd-object-status__text">Informative</span>
752
+ <span class="fd-object-status__sr-only">Object Status</span>
753
+ <span class="fd-object-status__sr-only">Informative entry</span>
754
+ </span>
755
+ <span class="fd-object-status fd-object-status--inverted">
756
+ <span class="fd-object-status__text">Neutral</span>
757
+ <span class="fd-object-status__sr-only">Object Status</span>
758
+ </span>
759
+
760
+ <h4>Large Inverted Object Status</h4>
761
+ <span class="fd-object-status fd-object-status--negative fd-object-status--inverted fd-object-status--large">
762
+ <span class="fd-object-status__text">Inverted Negative</span>
763
+ <span class="fd-object-status__sr-only">Object Status</span>
764
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
765
+ </span>
766
+ <span class="fd-object-status fd-object-status--critical fd-object-status--inverted fd-object-status--large">
767
+ <span class="fd-object-status__text">Inverted Warning</span>
768
+ <span class="fd-object-status__sr-only">Object Status</span>
769
+ <span class="fd-object-status__sr-only">Warning issued</span>
770
+ </span>
771
+ <span class="fd-object-status fd-object-status--positive fd-object-status--inverted fd-object-status--large">
772
+ <span class="fd-object-status__text">Inverted Success</span>
773
+ <span class="fd-object-status__sr-only">Object Status</span>
774
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
775
+ </span>
776
+ <span class="fd-object-status fd-object-status--informative fd-object-status--inverted fd-object-status--large">
777
+ <span class="fd-object-status__text">Inverted informative</span>
778
+ <span class="fd-object-status__sr-only">Object Status</span>
779
+ <span class="fd-object-status__sr-only">Informative entry</span>
780
+ </span>
781
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--large">
782
+ <span class="fd-object-status__text">Inverted Neutral</span>
783
+ <span class="fd-object-status__sr-only">Object Status</span>
784
+ </span>
785
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--negative fd-object-status--large fd-object-status--icon-only">
786
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
787
+ </span>
788
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--negative fd-object-status--large">
789
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
790
+ <span class="fd-object-status__text">Negative</span>
791
+ <span class="fd-object-status__sr-only">Object Status</span>
792
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
793
+ </span>
794
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--critical fd-object-status--large">
795
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
796
+ <span class="fd-object-status__text">Critical</span>
797
+ <span class="fd-object-status__sr-only">Object Status</span>
798
+ <span class="fd-object-status__sr-only">Warning issued</span>
799
+ </span>
800
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--positive fd-object-status--large">
801
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
802
+ <span class="fd-object-status__text">Positive</span>
803
+ <span class="fd-object-status__sr-only">Object Status</span>
804
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
805
+ </span>
806
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--informative fd-object-status--large">
807
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
808
+ <span class="fd-object-status__text">Informative</span>
809
+ <span class="fd-object-status__sr-only">Object Status</span>
810
+ <span class="fd-object-status__sr-only">Informative entry</span>
811
+ </span>
812
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--large">
813
+ <span class="fd-object-status__text">Neutral</span>
814
+ <span class="fd-object-status__sr-only">Object Status</span>
815
+ </span>
816
+ ```
817
+
818
+ ### InvertedStates
819
+
820
+ ```html
821
+ <h4>Regular</h4>
822
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link">
823
+ <span class="fd-object-status__text">Neutral</span>
824
+ <span class="fd-object-status__sr-only">Neutral Entry</span>
825
+ </div>
826
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--informative">
827
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
828
+ <span class="fd-object-status__text">Information</span>
829
+ <span class="fd-object-status__sr-only">Informative Entry</span>
830
+ </div>
831
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--critical">
832
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
833
+ <span class="fd-object-status__text">Information</span>
834
+ <span class="fd-object-status__sr-only">Warning issued</span>
835
+ </div>
836
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--positive">
837
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
838
+ <span class="fd-object-status__text">Information</span>
839
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
840
+ </div>
841
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--negative">
842
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
843
+ <span class="fd-object-status__text">Information</span>
844
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
845
+ </div>
846
+
847
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link is-hover">
848
+ <span class="fd-object-status__text">Neutral</span>
849
+ <span class="fd-object-status__sr-only">Neutral Entry</span>
850
+ </div>
851
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--informative is-hover">
852
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
853
+ <span class="fd-object-status__text">Information</span>
854
+ <span class="fd-object-status__sr-only">Informative Entry</span>
855
+ </div>
856
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--critical is-hover">
857
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
858
+ <span class="fd-object-status__text">Information</span>
859
+ <span class="fd-object-status__sr-only">Warning issued</span>
860
+ </div>
861
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--positive is-hover">
862
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
863
+ <span class="fd-object-status__text">Information</span>
864
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
865
+ </div>
866
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--negative is-hover">
867
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
868
+ <span class="fd-object-status__text">Information</span>
869
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
870
+ </div>
871
+
872
+ <h4>Down</h4>
873
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link is-active">
874
+ <span class="fd-object-status__text">Neutral</span>
875
+ <span class="fd-object-status__sr-only">Neutral Entry</span>
876
+ </div>
877
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--informative is-active">
878
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
879
+ <span class="fd-object-status__text">Information</span>
880
+ <span class="fd-object-status__sr-only">Informative Entry</span>
881
+ </div>
882
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--critical is-active">
883
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
884
+ <span class="fd-object-status__text">Information</span>
885
+ <span class="fd-object-status__sr-only">Warning issued</span>
886
+ </div>
887
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--positive is-active">
888
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
889
+ <span class="fd-object-status__text">Information</span>
890
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
891
+ </div>
892
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--negative is-active">
893
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
894
+ <span class="fd-object-status__text">Information</span>
895
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
896
+ </div>
897
+
898
+ <h4>Regular, Focus</h4>
899
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link is-focus">
900
+ <span class="fd-object-status__text">Neutral</span>
901
+ <span class="fd-object-status__sr-only">Neutral Entry</span>
902
+ </div>
903
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--informative is-focus">
904
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
905
+ <span class="fd-object-status__text">Information</span>
906
+ <span class="fd-object-status__sr-only">Informative Entry</span>
907
+ </div>
908
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--critical is-focus">
909
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
910
+ <span class="fd-object-status__text">Information</span>
911
+ <span class="fd-object-status__sr-only">Warning issued</span>
912
+ </div>
913
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--positive is-focus">
914
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
915
+ <span class="fd-object-status__text">Information</span>
916
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
917
+ </div>
918
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--negative is-focus">
919
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
920
+ <span class="fd-object-status__text">Information</span>
921
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
922
+ </div>
923
+
924
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link is-hover is-focus">
925
+ <span class="fd-object-status__text">Neutral</span>
926
+ <span class="fd-object-status__sr-only">Neutral Entry</span>
927
+ </div>
928
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--informative is-hover is-focus">
929
+ <i class="fd-object-status__icon sap-icon--information" role="presentation" aria-hidden="true"></i>
930
+ <span class="fd-object-status__text">Information</span>
931
+ <span class="fd-object-status__sr-only">Informative Entry</span>
932
+ </div>
933
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--critical is-hover is-focus">
934
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
935
+ <span class="fd-object-status__text">Information</span>
936
+ <span class="fd-object-status__sr-only">Warning issued</span>
937
+ </div>
938
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--positive is-hover is-focus">
939
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
940
+ <span class="fd-object-status__text">Information</span>
941
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
942
+ </div>
943
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--negative is-hover is-focus">
944
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
945
+ <span class="fd-object-status__text">Information</span>
946
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
947
+ </div>
948
+ ```
949
+
950
+ ### InvertedIndication
951
+
952
+ Inverted indication colors
953
+
954
+ ```html
955
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-1">
956
+ <span class="fd-object-status__text">Indication1</span>
957
+ <span class="fd-object-status__sr-only">Object Status</span>
958
+ <span class="fd-object-status__sr-only">Indication Color 1</span>
959
+ </span>
960
+
961
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-2">
962
+ <span class="fd-object-status__text">Indication2</span>
963
+ <span class="fd-object-status__sr-only">Object Status</span>
964
+ <span class="fd-object-status__sr-only">Indication Color 2</span>
965
+ </span>
966
+
967
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-3">
968
+ <span class="fd-object-status__text">Indication3</span>
969
+ <span class="fd-object-status__sr-only">Object Status</span>
970
+ <span class="fd-object-status__sr-only">Indication Color 3</span>
971
+ </span>
972
+
973
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-4">
974
+ <span class="fd-object-status__text">Indication4</span>
975
+ <span class="fd-object-status__sr-only">Object Status</span>
976
+ <span class="fd-object-status__sr-only">Indication Color 4</span>
977
+ </span>
978
+
979
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-5">
980
+ <span class="fd-object-status__text">Indication5</span>
981
+ <span class="fd-object-status__sr-only">Object Status</span>
982
+ <span class="fd-object-status__sr-only">Indication Color 5</span>
983
+ </span>
984
+
985
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-6">
986
+ <span class="fd-object-status__text">Indication6</span>
987
+ <span class="fd-object-status__sr-only">Object Status</span>
988
+ <span class="fd-object-status__sr-only">Indication Color 6</span>
989
+ </span>
990
+
991
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-7">
992
+ <span class="fd-object-status__text">Indication7</span>
993
+ <span class="fd-object-status__sr-only">Object Status</span>
994
+ <span class="fd-object-status__sr-only">Indication Color 7</span>
995
+ </span>
996
+
997
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-8">
998
+ <span class="fd-object-status__text">Indication8</span>
999
+ <span class="fd-object-status__sr-only">Object Status</span>
1000
+ <span class="fd-object-status__sr-only">Indication Color 8</span>
1001
+ </span>
1002
+
1003
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-9">
1004
+ <span class="fd-object-status__text">Indication9</span>
1005
+ <span class="fd-object-status__sr-only">Object Status</span>
1006
+ <span class="fd-object-status__sr-only">Indication Color 9</span>
1007
+ </span>
1008
+
1009
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-10">
1010
+ <span class="fd-object-status__text">Indication10</span>
1011
+ <span class="fd-object-status__sr-only">Object Status</span>
1012
+ <span class="fd-object-status__sr-only">Indication Color 10</span>
1013
+ </span>
1014
+ <h4>Clickable Inverted Object Status (Regular)</h4>
1015
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-1" >
1016
+ <span class="fd-object-status__text">Indication1</span>
1017
+ <span class="fd-object-status__sr-only">Indication Color 1</span>
1018
+ </div>
1019
+
1020
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-2" >
1021
+ <span class="fd-object-status__text">Indication2</span>
1022
+ <span class="fd-object-status__sr-only">Indication Color 2</span>
1023
+ </div>
1024
+
1025
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-3" >
1026
+ <span class="fd-object-status__text">Indication3</span>
1027
+ <span class="fd-object-status__sr-only">Indication Color 3</span>
1028
+ </div>
1029
+
1030
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-4" >
1031
+ <span class="fd-object-status__text">Indication4</span>
1032
+ <span class="fd-object-status__sr-only">Indication Color 4</span>
1033
+ </div>
1034
+
1035
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-5" >
1036
+ <span class="fd-object-status__text">Indication5</span>
1037
+ <span class="fd-object-status__sr-only">Indication Color 5</span>
1038
+ </div>
1039
+
1040
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-6" >
1041
+ <span class="fd-object-status__text">Indication6</span>
1042
+ <span class="fd-object-status__sr-only">Indication Color 6</span>
1043
+ </div>
1044
+
1045
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-7" >
1046
+ <span class="fd-object-status__text">Indication7</span>
1047
+ <span class="fd-object-status__sr-only">Indication Color 7</span>
1048
+ </div>
1049
+
1050
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-8" >
1051
+ <span class="fd-object-status__text">Indication8</span>
1052
+ <span class="fd-object-status__sr-only">Indication Color 8</span>
1053
+ </div>
1054
+
1055
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-9" >
1056
+ <span class="fd-object-status__text">Indication9</span>
1057
+ <span class="fd-object-status__sr-only">Indication Color 9</span>
1058
+ </div>
1059
+
1060
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-10" >
1061
+ <span class="fd-object-status__text">Indication10</span>
1062
+ <span class="fd-object-status__sr-only">Indication Color 10</span>
1063
+ </div>
1064
+
1065
+ <h4>Clickable Inverted Object Status (Hover)</h4>
1066
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-1 is-hover" >
1067
+ <span class="fd-object-status__text">Indication1</span>
1068
+ <span class="fd-object-status__sr-only">Indication Color 1</span>
1069
+ </div>
1070
+
1071
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-2 is-hover" >
1072
+ <span class="fd-object-status__text">Indication2</span>
1073
+ <span class="fd-object-status__sr-only">Indication Color 2</span>
1074
+ </div>
1075
+
1076
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-3 is-hover" >
1077
+ <span class="fd-object-status__text">Indication3</span>
1078
+ <span class="fd-object-status__sr-only">Indication Color 3</span>
1079
+ </div>
1080
+
1081
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-4 is-hover" >
1082
+ <span class="fd-object-status__text">Indication4</span>
1083
+ <span class="fd-object-status__sr-only">Indication Color 4</span>
1084
+ </div>
1085
+
1086
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-5 is-hover" >
1087
+ <span class="fd-object-status__text">Indication5</span>
1088
+ <span class="fd-object-status__sr-only">Indication Color 5</span>
1089
+ </div>
1090
+
1091
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-6 is-hover" >
1092
+ <span class="fd-object-status__text">Indication6</span>
1093
+ <span class="fd-object-status__sr-only">Indication Color 6</span>
1094
+ </div>
1095
+
1096
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-7 is-hover" >
1097
+ <span class="fd-object-status__text">Indication7</span>
1098
+ <span class="fd-object-status__sr-only">Indication Color 7</span>
1099
+ </div>
1100
+
1101
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-8 is-hover" >
1102
+ <span class="fd-object-status__text">Indication8</span>
1103
+ <span class="fd-object-status__sr-only">Indication Color 8</span>
1104
+ </div>
1105
+
1106
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-9 is-hover" >
1107
+ <span class="fd-object-status__text">Indication9</span>
1108
+ <span class="fd-object-status__sr-only">Indication Color 9</span>
1109
+ </div>
1110
+
1111
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-10 is-hover" >
1112
+ <span class="fd-object-status__text">Indication10</span>
1113
+ <span class="fd-object-status__sr-only">Indication Color 10</span>
1114
+ </div>
1115
+
1116
+ <h4>Clickable Inverted Object Status (Active/Down)</h4>
1117
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-1 is-active" >
1118
+ <span class="fd-object-status__text">Indication1</span>
1119
+ <span class="fd-object-status__sr-only">Indication Color 1</span>
1120
+ </div>
1121
+
1122
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-2 is-active" >
1123
+ <span class="fd-object-status__text">Indication2</span>
1124
+ <span class="fd-object-status__sr-only">Indication Color 2</span>
1125
+ </div>
1126
+
1127
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-3 is-active" >
1128
+ <span class="fd-object-status__text">Indication3</span>
1129
+ <span class="fd-object-status__sr-only">Indication Color 3</span>
1130
+ </div>
1131
+
1132
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-4 is-active" >
1133
+ <span class="fd-object-status__text">Indication4</span>
1134
+ <span class="fd-object-status__sr-only">Indication Color 4</span>
1135
+ </div>
1136
+
1137
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-5 is-active" >
1138
+ <span class="fd-object-status__text">Indication5</span>
1139
+ <span class="fd-object-status__sr-only">Indication Color 5</span>
1140
+ </div>
1141
+
1142
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-6 is-active" >
1143
+ <span class="fd-object-status__text">Indication6</span>
1144
+ <span class="fd-object-status__sr-only">Indication Color 6</span>
1145
+ </div>
1146
+
1147
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-7 is-active" >
1148
+ <span class="fd-object-status__text">Indication7</span>
1149
+ <span class="fd-object-status__sr-only">Indication Color 7</span>
1150
+ </div>
1151
+
1152
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-8 is-active" >
1153
+ <span class="fd-object-status__text">Indication8</span>
1154
+ <span class="fd-object-status__sr-only">Indication Color 8</span>
1155
+ </div>
1156
+
1157
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-9 is-active" >
1158
+ <span class="fd-object-status__text">Indication9</span>
1159
+ <span class="fd-object-status__sr-only">Indication Color 9</span>
1160
+ </div>
1161
+
1162
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-10 is-active" >
1163
+ <span class="fd-object-status__text">Indication10</span>
1164
+ <span class="fd-object-status__sr-only">Indication Color 10</span>
1165
+ </div>
1166
+
1167
+ <h4>Clickable Inverted Object Status (Focus)</h4>
1168
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-1 is-focus" >
1169
+ <span class="fd-object-status__text">Indication1</span>
1170
+ <span class="fd-object-status__sr-only">Indication Color 1</span>
1171
+ </div>
1172
+
1173
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-2 is-focus" >
1174
+ <span class="fd-object-status__text">Indication2</span>
1175
+ <span class="fd-object-status__sr-only">Indication Color 2</span>
1176
+ </div>
1177
+
1178
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-3 is-focus" >
1179
+ <span class="fd-object-status__text">Indication3</span>
1180
+ <span class="fd-object-status__sr-only">Indication Color 3</span>
1181
+ </div>
1182
+
1183
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-4 is-focus" >
1184
+ <span class="fd-object-status__text">Indication4</span>
1185
+ <span class="fd-object-status__sr-only">Indication Color 4</span>
1186
+ </div>
1187
+
1188
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-5 is-focus" >
1189
+ <span class="fd-object-status__text">Indication5</span>
1190
+ <span class="fd-object-status__sr-only">Indication Color 5</span>
1191
+ </div>
1192
+
1193
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-6 is-focus" >
1194
+ <span class="fd-object-status__text">Indication6</span>
1195
+ <span class="fd-object-status__sr-only">Indication Color 6</span>
1196
+ </div>
1197
+
1198
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-7 is-focus" >
1199
+ <span class="fd-object-status__text">Indication7</span>
1200
+ <span class="fd-object-status__sr-only">Indication Color 7</span>
1201
+ </div>
1202
+
1203
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-8 is-focus" >
1204
+ <span class="fd-object-status__text">Indication8</span>
1205
+ <span class="fd-object-status__sr-only">Indication Color 8</span>
1206
+ </div>
1207
+
1208
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-9 is-focus" >
1209
+ <span class="fd-object-status__text">Indication9</span>
1210
+ <span class="fd-object-status__sr-only">Indication Color 9</span>
1211
+ </div>
1212
+
1213
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-10 is-focus" >
1214
+ <span class="fd-object-status__text">Indication10</span>
1215
+ <span class="fd-object-status__sr-only">Indication Color 10</span>
1216
+ </div>
1217
+ ```
1218
+
1219
+ ### InvertedIndicationSecondary
1220
+
1221
+ Secondary Set of Inverted indication colors
1222
+
1223
+ ```html
1224
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-1b">
1225
+ <span class="fd-object-status__text">Indication1b</span>
1226
+ <span class="fd-object-status__sr-only">Object Status</span>
1227
+ <span class="fd-object-status__sr-only">Indication Color 1b</span>
1228
+ </span>
1229
+
1230
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-2b">
1231
+ <span class="fd-object-status__text">Indication2b</span>
1232
+ <span class="fd-object-status__sr-only">Object Status</span>
1233
+ <span class="fd-object-status__sr-only">Indication Color 2b</span>
1234
+ </span>
1235
+
1236
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-3b">
1237
+ <span class="fd-object-status__text">Indication3b</span>
1238
+ <span class="fd-object-status__sr-only">Object Status</span>
1239
+ <span class="fd-object-status__sr-only">Indication Color 3b</span>
1240
+ </span>
1241
+
1242
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-4b">
1243
+ <span class="fd-object-status__text">Indication4b</span>
1244
+ <span class="fd-object-status__sr-only">Object Status</span>
1245
+ <span class="fd-object-status__sr-only">Indication Color 4b</span>
1246
+ </span>
1247
+
1248
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-5b">
1249
+ <span class="fd-object-status__text">Indication5b</span>
1250
+ <span class="fd-object-status__sr-only">Object Status</span>
1251
+ <span class="fd-object-status__sr-only">Indication Color 5b</span>
1252
+ </span>
1253
+
1254
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-6b">
1255
+ <span class="fd-object-status__text">Indication6b</span>
1256
+ <span class="fd-object-status__sr-only">Object Status</span>
1257
+ <span class="fd-object-status__sr-only">Indication Color 6b</span>
1258
+ </span>
1259
+
1260
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-7b">
1261
+ <span class="fd-object-status__text">Indication7b</span>
1262
+ <span class="fd-object-status__sr-only">Object Status</span>
1263
+ <span class="fd-object-status__sr-only">Indication Color 7b</span>
1264
+ </span>
1265
+
1266
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-8b">
1267
+ <span class="fd-object-status__text">Indication8b</span>
1268
+ <span class="fd-object-status__sr-only">Object Status</span>
1269
+ <span class="fd-object-status__sr-only">Indication Color 8b</span>
1270
+ </span>
1271
+
1272
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-9b">
1273
+ <span class="fd-object-status__text">Indication9b</span>
1274
+ <span class="fd-object-status__sr-only">Object Status</span>
1275
+ <span class="fd-object-status__sr-only">Indication Color 9b</span>
1276
+ </span>
1277
+
1278
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-1b0">
1279
+ <span class="fd-object-status__text">Indication10b</span>
1280
+ <span class="fd-object-status__sr-only">Object Status</span>
1281
+ <span class="fd-object-status__sr-only">Indication Color 10b</span>
1282
+ </span>
1283
+ <h4>Clickable Inverted Object Status (Regular)</h4>
1284
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-1b" >
1285
+ <span class="fd-object-status__text">Indication1b</span>
1286
+ <span class="fd-object-status__sr-only">Indication Color 1b</span>
1287
+ </div>
1288
+
1289
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-2b" >
1290
+ <span class="fd-object-status__text">Indication2b</span>
1291
+ <span class="fd-object-status__sr-only">Indication Color 2b</span>
1292
+ </div>
1293
+
1294
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-3b" >
1295
+ <span class="fd-object-status__text">Indication3b</span>
1296
+ <span class="fd-object-status__sr-only">Indication Color 3b</span>
1297
+ </div>
1298
+
1299
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-4b" >
1300
+ <span class="fd-object-status__text">Indication4b</span>
1301
+ <span class="fd-object-status__sr-only">Indication Color 4b</span>
1302
+ </div>
1303
+
1304
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-5b" >
1305
+ <span class="fd-object-status__text">Indication5b</span>
1306
+ <span class="fd-object-status__sr-only">Indication Color 5b</span>
1307
+ </div>
1308
+
1309
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-6b" >
1310
+ <span class="fd-object-status__text">Indication6b</span>
1311
+ <span class="fd-object-status__sr-only">Indication Color 6b</span>
1312
+ </div>
1313
+
1314
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-7b" >
1315
+ <span class="fd-object-status__text">Indication7b</span>
1316
+ <span class="fd-object-status__sr-only">Indication Color 7b</span>
1317
+ </div>
1318
+
1319
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-8b" >
1320
+ <span class="fd-object-status__text">Indication8b</span>
1321
+ <span class="fd-object-status__sr-only">Indication Color 8b</span>
1322
+ </div>
1323
+
1324
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-9b" >
1325
+ <span class="fd-object-status__text">Indication9b</span>
1326
+ <span class="fd-object-status__sr-only">Indication Color 9b</span>
1327
+ </div>
1328
+
1329
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-1b0" >
1330
+ <span class="fd-object-status__text">Indication10b</span>
1331
+ <span class="fd-object-status__sr-only">Indication Color 10b</span>
1332
+ </div>
1333
+
1334
+ <h4>Clickable Inverted Object Status (Hover)</h4>
1335
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-1b is-hover" >
1336
+ <span class="fd-object-status__text">Indication1b</span>
1337
+ <span class="fd-object-status__sr-only">Indication Color 1b</span>
1338
+ </div>
1339
+
1340
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-2b is-hover" >
1341
+ <span class="fd-object-status__text">Indication2b</span>
1342
+ <span class="fd-object-status__sr-only">Indication Color 2b</span>
1343
+ </div>
1344
+
1345
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-3b is-hover" >
1346
+ <span class="fd-object-status__text">Indication3b</span>
1347
+ <span class="fd-object-status__sr-only">Indication Color 3b</span>
1348
+ </div>
1349
+
1350
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-4b is-hover" >
1351
+ <span class="fd-object-status__text">Indication4b</span>
1352
+ <span class="fd-object-status__sr-only">Indication Color 4b</span>
1353
+ </div>
1354
+
1355
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-5b is-hover" >
1356
+ <span class="fd-object-status__text">Indication5b</span>
1357
+ <span class="fd-object-status__sr-only">Indication Color 5b</span>
1358
+ </div>
1359
+
1360
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-6b is-hover" >
1361
+ <span class="fd-object-status__text">Indication6b</span>
1362
+ <span class="fd-object-status__sr-only">Indication Color 6b</span>
1363
+ </div>
1364
+
1365
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-7b is-hover" >
1366
+ <span class="fd-object-status__text">Indication7b</span>
1367
+ <span class="fd-object-status__sr-only">Indication Color 7b</span>
1368
+ </div>
1369
+
1370
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-8b is-hover" >
1371
+ <span class="fd-object-status__text">Indication8b</span>
1372
+ <span class="fd-object-status__sr-only">Indication Color 8b</span>
1373
+ </div>
1374
+
1375
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-9b is-hover" >
1376
+ <span class="fd-object-status__text">Indication9b</span>
1377
+ <span class="fd-object-status__sr-only">Indication Color 9b</span>
1378
+ </div>
1379
+
1380
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-1b0 is-hover" >
1381
+ <span class="fd-object-status__text">Indication10b</span>
1382
+ <span class="fd-object-status__sr-only">Indication Color 10b</span>
1383
+ </div>
1384
+
1385
+ <h4>Clickable Inverted Object Status (Active/Down)</h4>
1386
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-1b is-active" >
1387
+ <span class="fd-object-status__text">Indication1b</span>
1388
+ <span class="fd-object-status__sr-only">Indication Color 1b</span>
1389
+ </div>
1390
+
1391
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-2b is-active" >
1392
+ <span class="fd-object-status__text">Indication2b</span>
1393
+ <span class="fd-object-status__sr-only">Indication Color 2b</span>
1394
+ </div>
1395
+
1396
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-3b is-active" >
1397
+ <span class="fd-object-status__text">Indication3b</span>
1398
+ <span class="fd-object-status__sr-only">Indication Color 3b</span>
1399
+ </div>
1400
+
1401
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-4b is-active" >
1402
+ <span class="fd-object-status__text">Indication4b</span>
1403
+ <span class="fd-object-status__sr-only">Indication Color 4b</span>
1404
+ </div>
1405
+
1406
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-5b is-active" >
1407
+ <span class="fd-object-status__text">Indication5b</span>
1408
+ <span class="fd-object-status__sr-only">Indication Color 5b</span>
1409
+ </div>
1410
+
1411
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-6b is-active" >
1412
+ <span class="fd-object-status__text">Indication6b</span>
1413
+ <span class="fd-object-status__sr-only">Indication Color 6b</span>
1414
+ </div>
1415
+
1416
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-7b is-active" >
1417
+ <span class="fd-object-status__text">Indication7b</span>
1418
+ <span class="fd-object-status__sr-only">Indication Color 7b</span>
1419
+ </div>
1420
+
1421
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-8b is-active" >
1422
+ <span class="fd-object-status__text">Indication8b</span>
1423
+ <span class="fd-object-status__sr-only">Indication Color 8b</span>
1424
+ </div>
1425
+
1426
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-9b is-active" >
1427
+ <span class="fd-object-status__text">Indication9b</span>
1428
+ <span class="fd-object-status__sr-only">Indication Color 9b</span>
1429
+ </div>
1430
+
1431
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-1b0 is-active" >
1432
+ <span class="fd-object-status__text">Indication10b</span>
1433
+ <span class="fd-object-status__sr-only">Indication Color 10b</span>
1434
+ </div>
1435
+
1436
+ <h4>Clickable Inverted Object Status (Focus)</h4>
1437
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-1b is-focus" >
1438
+ <span class="fd-object-status__text">Indication1b</span>
1439
+ <span class="fd-object-status__sr-only">Indication Color 1b</span>
1440
+ </div>
1441
+
1442
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-2b is-focus" >
1443
+ <span class="fd-object-status__text">Indication2b</span>
1444
+ <span class="fd-object-status__sr-only">Indication Color 2b</span>
1445
+ </div>
1446
+
1447
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-3b is-focus" >
1448
+ <span class="fd-object-status__text">Indication3b</span>
1449
+ <span class="fd-object-status__sr-only">Indication Color 3b</span>
1450
+ </div>
1451
+
1452
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-4b is-focus" >
1453
+ <span class="fd-object-status__text">Indication4b</span>
1454
+ <span class="fd-object-status__sr-only">Indication Color 4b</span>
1455
+ </div>
1456
+
1457
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-5b is-focus" >
1458
+ <span class="fd-object-status__text">Indication5b</span>
1459
+ <span class="fd-object-status__sr-only">Indication Color 5b</span>
1460
+ </div>
1461
+
1462
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-6b is-focus" >
1463
+ <span class="fd-object-status__text">Indication6b</span>
1464
+ <span class="fd-object-status__sr-only">Indication Color 6b</span>
1465
+ </div>
1466
+
1467
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-7b is-focus" >
1468
+ <span class="fd-object-status__text">Indication7b</span>
1469
+ <span class="fd-object-status__sr-only">Indication Color 7b</span>
1470
+ </div>
1471
+
1472
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-8b is-focus" >
1473
+ <span class="fd-object-status__text">Indication8b</span>
1474
+ <span class="fd-object-status__sr-only">Indication Color 8b</span>
1475
+ </div>
1476
+
1477
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-9b is-focus" >
1478
+ <span class="fd-object-status__text">Indication9b</span>
1479
+ <span class="fd-object-status__sr-only">Indication Color 9b</span>
1480
+ </div>
1481
+
1482
+ <div role="button" tabindex="0" aria-roledescription="Object Status Button" class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-1b0 is-focus" >
1483
+ <span class="fd-object-status__text">Indication10b</span>
1484
+ <span class="fd-object-status__sr-only">Indication Color 10b</span>
1485
+ </div>
1486
+ ```
1487
+
1488
+ ### Object Status with single line text with ellipsis
1489
+
1490
+ By default, Object Status text goes on multiple lines based on the max width that is set for the element. For a single line text with ellipsis add the <code>fd-object-status--truncate</code> modifier class to the <code>fd-object-status</code> base class.
1491
+
1492
+ ```html
1493
+ <span class="fd-object-status fd-object-status--negative">
1494
+ <i class="fd-object-status__icon sap-icon--error" role="presentation" aria-hidden="true"></i>
1495
+ <span class="fd-object-status__text">Default behaviour of Object Status with very long text. The text goes on multiple lines.</span>
1496
+ <span class="fd-object-status__sr-only">Object Status</span>
1497
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
1498
+ </span>
1499
+
1500
+ <span class="fd-object-status fd-object-status--critical fd-object-status--truncate">
1501
+ <i class="fd-object-status__icon sap-icon--alert" role="presentation" aria-hidden="true"></i>
1502
+ <span class="fd-object-status__text">Object Status with text truncation with ellipsis</span>
1503
+ <span class="fd-object-status__sr-only">Object Status</span>
1504
+ <span class="fd-object-status__sr-only">Warning issued</span>
1505
+ </span>
1506
+
1507
+ <span class="fd-object-status fd-object-status--negative fd-object-status--inverted fd-object-status--truncate">
1508
+ <span class="fd-object-status__text">Inverted Negative with very, very long text which truncates</span>
1509
+ <span class="fd-object-status__sr-only">Object Status</span>
1510
+ <span class="fd-object-status__sr-only">Invalid Entry</span>
1511
+ </span>
1512
+
1513
+ <span class="fd-object-status fd-object-status--large fd-object-status--positive fd-object-status--truncate">
1514
+ <i class="fd-object-status__icon sap-icon--sys-enter-2" role="presentation" aria-hidden="true"></i>
1515
+ <span class="fd-object-status__text">Positive with very, very long text which truncates</span>
1516
+ <span class="fd-object-status__sr-only">Object Status</span>
1517
+ <span class="fd-object-status__sr-only">Entry successfully validated</span>
1518
+ </span>
1519
+
1520
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--link fd-object-status--indication-8 fd-object-status--truncate" tabindex="0">
1521
+ <span class="fd-object-status__text">Indication8 with very, very long text which truncates</span>
1522
+ <span class="fd-object-status__sr-only">Object Status</span>
1523
+ <span class="fd-object-status__sr-only">Indication Color 8</span>
1524
+ </span>
1525
+ ```
1526
+
1527
+ ## Accessibility
1528
+
1529
+ - Use semantic HTML elements where appropriate
1530
+ - Include proper ARIA attributes for interactive elements
1531
+ - Ensure keyboard navigation support
1532
+ - Provide adequate color contrast
1533
+
1534
+ ## Source
1535
+
1536
+ This documentation was automatically generated from: `packages/styles/stories/Components/object-status/object-status.stories.js`
1537
+
1538
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).