@patternfly/patternfly 6.5.0-prerelease.23 → 6.5.0-prerelease.25

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 (10) hide show
  1. package/components/Compass/compass.css +42 -6
  2. package/components/Compass/compass.scss +43 -7
  3. package/components/_index.css +42 -6
  4. package/docs/components/Compass/examples/Compass.md +22 -5
  5. package/docs/demos/Compass/examples/Compass.md +1048 -708
  6. package/package.json +2 -2
  7. package/patternfly-no-globals.css +42 -6
  8. package/patternfly.css +42 -6
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/docs/demos/Compass/examples/Compass.md CHANGED
@@ -108,198 +108,278 @@ wrapperTag: div
108
108
  </svg>
109
109
  </div>
110
110
  <div class="pf-v6-c-compass__nav">
111
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
112
- <nav
113
- class="pf-v6-c-tabs pf-m-nav pf-m-inset-xl"
114
- aria-label="Primary nav"
115
- >
116
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
111
+ <div class="pf-v6-c-compass__panel pf-m-pill">
112
+ <div class="pf-v6-c-compass__nav-content">
113
+ <div class="pf-v6-c-compass__nav-home">
117
114
  <button
118
- class="pf-v6-c-button pf-m-small pf-m-plain"
115
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
119
116
  type="button"
120
- aria-label="Scroll left"
121
- disabled
117
+ aria-label="Home"
122
118
  >
123
119
  <span class="pf-v6-c-button__icon">
124
- <i class="fas fa-angle-left" aria-hidden="true"></i>
120
+ <svg
121
+ fill="none"
122
+ width="1em"
123
+ height="1em"
124
+ class="pf-v6-svg"
125
+ viewBox="0 0 20 20"
126
+ xmlns="http://www.w3.org/2000/svg"
127
+ aria-hidden="true"
128
+ >
129
+ <path
130
+ d="M8.33268 13.334H11.666"
131
+ stroke="currentcolor"
132
+ stroke-width="1.5"
133
+ stroke-linecap="round"
134
+ stroke-linejoin="round"
135
+ />
136
+ <path
137
+ d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
138
+ stroke="currentcolor"
139
+ stroke-width="1.5"
140
+ stroke-linecap="round"
141
+ stroke-linejoin="round"
142
+ />
143
+ <path
144
+ d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
145
+ stroke="currentcolor"
146
+ stroke-width="1.5"
147
+ stroke-linecap="round"
148
+ stroke-linejoin="round"
149
+ />
150
+ </svg>
125
151
  </span>
126
152
  </button>
127
153
  </div>
128
- <ul class="pf-v6-c-tabs__list" role="tablist">
129
- <li class="pf-v6-c-tabs__item" role="presentation">
130
- <a
131
- class="pf-v6-c-tabs__link"
132
- href="#"
133
- role="tab"
134
- id="primary-nav-users-link"
135
- >
136
- <span class="pf-v6-c-tabs__item-text">Users</span>
137
- </a>
138
- </li>
139
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
140
- <a
141
- class="pf-v6-c-tabs__link"
142
- href="#"
143
- role="tab"
144
- id="primary-nav-containers-link"
145
- >
146
- <span class="pf-v6-c-tabs__item-text">Containers</span>
147
- </a>
148
- </li>
149
- <li class="pf-v6-c-tabs__item" role="presentation">
150
- <a
151
- class="pf-v6-c-tabs__link"
152
- href="#"
153
- role="tab"
154
- id="primary-nav-database-link"
155
- >
156
- <span class="pf-v6-c-tabs__item-text">Database</span>
157
- </a>
158
- </li>
154
+ <div class="pf-v6-c-compass__nav-main">
155
+ <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Primary nav">
156
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
157
+ <button
158
+ class="pf-v6-c-button pf-m-small pf-m-plain"
159
+ type="button"
160
+ aria-label="Scroll left"
161
+ disabled
162
+ >
163
+ <span class="pf-v6-c-button__icon">
164
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
165
+ </span>
166
+ </button>
167
+ </div>
168
+ <ul class="pf-v6-c-tabs__list" role="tablist">
169
+ <li class="pf-v6-c-tabs__item" role="presentation">
170
+ <a
171
+ class="pf-v6-c-tabs__link"
172
+ href="#"
173
+ role="tab"
174
+ id="primary-nav-users-link"
175
+ >
176
+ <span class="pf-v6-c-tabs__item-text">Users</span>
177
+ </a>
178
+ </li>
179
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
180
+ <a
181
+ class="pf-v6-c-tabs__link"
182
+ href="#"
183
+ role="tab"
184
+ id="primary-nav-containers-link"
185
+ >
186
+ <span class="pf-v6-c-tabs__item-text">Containers</span>
187
+ </a>
188
+ </li>
189
+ <li class="pf-v6-c-tabs__item" role="presentation">
190
+ <a
191
+ class="pf-v6-c-tabs__link"
192
+ href="#"
193
+ role="tab"
194
+ id="primary-nav-database-link"
195
+ >
196
+ <span class="pf-v6-c-tabs__item-text">Database</span>
197
+ </a>
198
+ </li>
159
199
 
160
- <li class="pf-v6-c-tabs__item" role="presentation">
161
- <a
162
- class="pf-v6-c-tabs__link"
163
- href="#"
164
- role="tab"
165
- id="primary-nav-server-link"
166
- >
167
- <span class="pf-v6-c-tabs__item-text">Server</span>
168
- </a>
169
- </li>
170
- <li class="pf-v6-c-tabs__item" role="presentation">
171
- <a
172
- class="pf-v6-c-tabs__link"
173
- href="#"
174
- role="tab"
175
- id="primary-nav-system-link"
176
- >
177
- <span class="pf-v6-c-tabs__item-text">System</span>
178
- </a>
179
- </li>
180
- <li class="pf-v6-c-tabs__item" role="presentation">
181
- <a
182
- class="pf-v6-c-tabs__link"
183
- href="#"
184
- role="tab"
185
- id="primary-nav-network-wired-link"
186
- >
187
- <span class="pf-v6-c-tabs__item-text">Network</span>
188
- </a>
189
- </li>
190
- </ul>
200
+ <li class="pf-v6-c-tabs__item" role="presentation">
201
+ <a
202
+ class="pf-v6-c-tabs__link"
203
+ href="#"
204
+ role="tab"
205
+ id="primary-nav-server-link"
206
+ >
207
+ <span class="pf-v6-c-tabs__item-text">Server</span>
208
+ </a>
209
+ </li>
210
+ <li class="pf-v6-c-tabs__item" role="presentation">
211
+ <a
212
+ class="pf-v6-c-tabs__link"
213
+ href="#"
214
+ role="tab"
215
+ id="primary-nav-system-link"
216
+ >
217
+ <span class="pf-v6-c-tabs__item-text">System</span>
218
+ </a>
219
+ </li>
220
+ <li class="pf-v6-c-tabs__item" role="presentation">
221
+ <a
222
+ class="pf-v6-c-tabs__link"
223
+ href="#"
224
+ role="tab"
225
+ id="primary-nav-network-wired-link"
226
+ >
227
+ <span class="pf-v6-c-tabs__item-text">Network</span>
228
+ </a>
229
+ </li>
230
+ </ul>
191
231
 
192
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
232
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
233
+ <button
234
+ class="pf-v6-c-button pf-m-small pf-m-plain"
235
+ type="button"
236
+ aria-label="Scroll right"
237
+ disabled
238
+ >
239
+ <span class="pf-v6-c-button__icon">
240
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
241
+ </span>
242
+ </button>
243
+ </div>
244
+ </nav>
245
+ </div>
246
+ <div class="pf-v6-c-compass__nav-search">
193
247
  <button
194
- class="pf-v6-c-button pf-m-small pf-m-plain"
248
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
195
249
  type="button"
196
- aria-label="Scroll right"
197
- disabled
250
+ aria-label="Search"
198
251
  >
199
252
  <span class="pf-v6-c-button__icon">
200
- <i class="fas fa-angle-right" aria-hidden="true"></i>
253
+ <svg
254
+ fill="none"
255
+ width="1em"
256
+ height="1em"
257
+ class="pf-v6-svg"
258
+ viewBox="0 0 20 20"
259
+ xmlns="http://www.w3.org/2000/svg"
260
+ aria-hidden="true"
261
+ >
262
+ <path
263
+ d="M14.166 14.166L17.4993 17.4993"
264
+ stroke="currentcolor"
265
+ stroke-width="1.5"
266
+ stroke-linecap="round"
267
+ stroke-linejoin="round"
268
+ />
269
+ <path
270
+ d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
271
+ stroke="currentcolor"
272
+ stroke-width="1.5"
273
+ stroke-linecap="round"
274
+ stroke-linejoin="round"
275
+ />
276
+ </svg>
201
277
  </span>
202
278
  </button>
203
279
  </div>
204
- </nav>
280
+ </div>
205
281
  </div>
206
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
207
- <nav
208
- class="pf-v6-c-tabs pf-m-nav pf-m-subtab pf-m-inset-xl"
209
- aria-label="Secondary nav"
210
- >
211
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
212
- <button
213
- class="pf-v6-c-button pf-m-small pf-m-plain"
214
- type="button"
215
- aria-label="Scroll left"
216
- disabled
282
+ <div class="pf-v6-c-compass__panel pf-m-pill">
283
+ <div class="pf-v6-c-compass__nav-content">
284
+ <div class="pf-v6-c-compass__nav-main">
285
+ <nav
286
+ class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
287
+ aria-label="Secondary nav"
217
288
  >
218
- <span class="pf-v6-c-button__icon">
219
- <i class="fas fa-angle-left" aria-hidden="true"></i>
220
- </span>
221
- </button>
222
- </div>
223
- <ul class="pf-v6-c-tabs__list" role="tablist">
224
- <li class="pf-v6-c-tabs__item" role="presentation">
225
- <a
226
- class="pf-v6-c-tabs__link"
227
- href="#"
228
- role="tab"
229
- id="secondary-nav-sub-1-link"
230
- >
231
- <span class="pf-v6-c-tabs__item-text">Item 1</span>
232
- </a>
233
- </li>
234
- <li class="pf-v6-c-tabs__item" role="presentation">
235
- <a
236
- class="pf-v6-c-tabs__link"
237
- href="#"
238
- role="tab"
239
- id="secondary-nav-sub-2-link"
240
- >
241
- <span class="pf-v6-c-tabs__item-text">Item 2</span>
242
- </a>
243
- </li>
244
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
245
- <a
246
- class="pf-v6-c-tabs__link"
247
- href="#"
248
- role="tab"
249
- id="secondary-nav-sub-3-link"
250
- >
251
- <span class="pf-v6-c-tabs__item-text">Item 3</span>
252
- </a>
253
- </li>
289
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
290
+ <button
291
+ class="pf-v6-c-button pf-m-small pf-m-plain"
292
+ type="button"
293
+ aria-label="Scroll left"
294
+ disabled
295
+ >
296
+ <span class="pf-v6-c-button__icon">
297
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
298
+ </span>
299
+ </button>
300
+ </div>
301
+ <ul class="pf-v6-c-tabs__list" role="tablist">
302
+ <li class="pf-v6-c-tabs__item" role="presentation">
303
+ <a
304
+ class="pf-v6-c-tabs__link"
305
+ href="#"
306
+ role="tab"
307
+ id="secondary-nav-sub-1-link"
308
+ >
309
+ <span class="pf-v6-c-tabs__item-text">Item 1</span>
310
+ </a>
311
+ </li>
312
+ <li class="pf-v6-c-tabs__item" role="presentation">
313
+ <a
314
+ class="pf-v6-c-tabs__link"
315
+ href="#"
316
+ role="tab"
317
+ id="secondary-nav-sub-2-link"
318
+ >
319
+ <span class="pf-v6-c-tabs__item-text">Item 2</span>
320
+ </a>
321
+ </li>
322
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
323
+ <a
324
+ class="pf-v6-c-tabs__link"
325
+ href="#"
326
+ role="tab"
327
+ id="secondary-nav-sub-3-link"
328
+ >
329
+ <span class="pf-v6-c-tabs__item-text">Item 3</span>
330
+ </a>
331
+ </li>
254
332
 
255
- <li class="pf-v6-c-tabs__item" role="presentation">
256
- <a
257
- class="pf-v6-c-tabs__link pf-m-disabled"
258
- aria-disabled="true"
259
- tabindex="-1"
260
- href="#"
261
- role="tab"
262
- id="secondary-nav-sub-disabled-link"
263
- >
264
- <span class="pf-v6-c-tabs__item-text">Disabled</span>
265
- </a>
266
- </li>
267
- <li class="pf-v6-c-tabs__item" role="presentation">
268
- <a
269
- class="pf-v6-c-tabs__link pf-m-aria-disabled"
270
- aria-disabled="true"
271
- href="#"
272
- role="tab"
273
- id="secondary-nav-sub-aria-disabled-link"
274
- >
275
- <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
276
- </a>
277
- </li>
278
- <li class="pf-v6-c-tabs__item" role="presentation">
279
- <a
280
- class="pf-v6-c-tabs__link"
281
- href="#"
282
- role="tab"
283
- id="secondary-nav-sub-6-link"
284
- >
285
- <span class="pf-v6-c-tabs__item-text">Item 6</span>
286
- </a>
287
- </li>
288
- </ul>
333
+ <li class="pf-v6-c-tabs__item" role="presentation">
334
+ <a
335
+ class="pf-v6-c-tabs__link pf-m-disabled"
336
+ aria-disabled="true"
337
+ tabindex="-1"
338
+ href="#"
339
+ role="tab"
340
+ id="secondary-nav-sub-disabled-link"
341
+ >
342
+ <span class="pf-v6-c-tabs__item-text">Disabled</span>
343
+ </a>
344
+ </li>
345
+ <li class="pf-v6-c-tabs__item" role="presentation">
346
+ <a
347
+ class="pf-v6-c-tabs__link pf-m-aria-disabled"
348
+ aria-disabled="true"
349
+ href="#"
350
+ role="tab"
351
+ id="secondary-nav-sub-aria-disabled-link"
352
+ >
353
+ <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
354
+ </a>
355
+ </li>
356
+ <li class="pf-v6-c-tabs__item" role="presentation">
357
+ <a
358
+ class="pf-v6-c-tabs__link"
359
+ href="#"
360
+ role="tab"
361
+ id="secondary-nav-sub-6-link"
362
+ >
363
+ <span class="pf-v6-c-tabs__item-text">Item 6</span>
364
+ </a>
365
+ </li>
366
+ </ul>
289
367
 
290
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
291
- <button
292
- class="pf-v6-c-button pf-m-small pf-m-plain"
293
- type="button"
294
- aria-label="Scroll right"
295
- disabled
296
- >
297
- <span class="pf-v6-c-button__icon">
298
- <i class="fas fa-angle-right" aria-hidden="true"></i>
299
- </span>
300
- </button>
368
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
369
+ <button
370
+ class="pf-v6-c-button pf-m-small pf-m-plain"
371
+ type="button"
372
+ aria-label="Scroll right"
373
+ disabled
374
+ >
375
+ <span class="pf-v6-c-button__icon">
376
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
377
+ </span>
378
+ </button>
379
+ </div>
380
+ </nav>
301
381
  </div>
302
- </nav>
382
+ </div>
303
383
  </div>
304
384
  </div>
305
385
  <div class="pf-v6-c-compass__profile">
@@ -1132,6 +1212,13 @@ wrapperTag: div
1132
1212
  </div>
1133
1213
  </div>
1134
1214
  </div>
1215
+ <div class="pf-v6-c-compass__main-footer">
1216
+ <div class="pf-v6-c-compass__message-bar">
1217
+ <div
1218
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
1219
+ >chatbot message bar</div>
1220
+ </div>
1221
+ </div>
1135
1222
  </div>
1136
1223
  <div class="pf-v6-c-compass__sidebar pf-m-end">
1137
1224
  <div class="pf-v6-c-compass__panel pf-m-pill">
@@ -1208,11 +1295,6 @@ wrapperTag: div
1208
1295
  </div>
1209
1296
  </div>
1210
1297
  </div>
1211
- <div class="pf-v6-c-compass__footer">
1212
- <div
1213
- class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
1214
- >chatbot message bar</div>
1215
- </div>
1216
1298
  </div>
1217
1299
 
1218
1300
  ```
@@ -1320,198 +1402,278 @@ wrapperTag: div
1320
1402
  </svg>
1321
1403
  </div>
1322
1404
  <div class="pf-v6-c-compass__nav">
1323
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
1324
- <nav
1325
- class="pf-v6-c-tabs pf-m-nav pf-m-inset-xl"
1326
- aria-label="Primary nav"
1327
- >
1328
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1405
+ <div class="pf-v6-c-compass__panel pf-m-pill">
1406
+ <div class="pf-v6-c-compass__nav-content">
1407
+ <div class="pf-v6-c-compass__nav-home">
1329
1408
  <button
1330
- class="pf-v6-c-button pf-m-small pf-m-plain"
1409
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1331
1410
  type="button"
1332
- aria-label="Scroll left"
1333
- disabled
1411
+ aria-label="Home"
1334
1412
  >
1335
1413
  <span class="pf-v6-c-button__icon">
1336
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1414
+ <svg
1415
+ fill="none"
1416
+ width="1em"
1417
+ height="1em"
1418
+ class="pf-v6-svg"
1419
+ viewBox="0 0 20 20"
1420
+ xmlns="http://www.w3.org/2000/svg"
1421
+ aria-hidden="true"
1422
+ >
1423
+ <path
1424
+ d="M8.33268 13.334H11.666"
1425
+ stroke="currentcolor"
1426
+ stroke-width="1.5"
1427
+ stroke-linecap="round"
1428
+ stroke-linejoin="round"
1429
+ />
1430
+ <path
1431
+ d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
1432
+ stroke="currentcolor"
1433
+ stroke-width="1.5"
1434
+ stroke-linecap="round"
1435
+ stroke-linejoin="round"
1436
+ />
1437
+ <path
1438
+ d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
1439
+ stroke="currentcolor"
1440
+ stroke-width="1.5"
1441
+ stroke-linecap="round"
1442
+ stroke-linejoin="round"
1443
+ />
1444
+ </svg>
1337
1445
  </span>
1338
1446
  </button>
1339
1447
  </div>
1340
- <ul class="pf-v6-c-tabs__list" role="tablist">
1341
- <li class="pf-v6-c-tabs__item" role="presentation">
1342
- <a
1343
- class="pf-v6-c-tabs__link"
1344
- href="#"
1345
- role="tab"
1346
- id="primary-nav-users-link"
1347
- >
1348
- <span class="pf-v6-c-tabs__item-text">Users</span>
1349
- </a>
1350
- </li>
1351
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1352
- <a
1353
- class="pf-v6-c-tabs__link"
1354
- href="#"
1355
- role="tab"
1356
- id="primary-nav-containers-link"
1357
- >
1358
- <span class="pf-v6-c-tabs__item-text">Containers</span>
1359
- </a>
1360
- </li>
1361
- <li class="pf-v6-c-tabs__item" role="presentation">
1362
- <a
1363
- class="pf-v6-c-tabs__link"
1364
- href="#"
1365
- role="tab"
1366
- id="primary-nav-database-link"
1367
- >
1368
- <span class="pf-v6-c-tabs__item-text">Database</span>
1369
- </a>
1370
- </li>
1448
+ <div class="pf-v6-c-compass__nav-main">
1449
+ <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Primary nav">
1450
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1451
+ <button
1452
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1453
+ type="button"
1454
+ aria-label="Scroll left"
1455
+ disabled
1456
+ >
1457
+ <span class="pf-v6-c-button__icon">
1458
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1459
+ </span>
1460
+ </button>
1461
+ </div>
1462
+ <ul class="pf-v6-c-tabs__list" role="tablist">
1463
+ <li class="pf-v6-c-tabs__item" role="presentation">
1464
+ <a
1465
+ class="pf-v6-c-tabs__link"
1466
+ href="#"
1467
+ role="tab"
1468
+ id="primary-nav-users-link"
1469
+ >
1470
+ <span class="pf-v6-c-tabs__item-text">Users</span>
1471
+ </a>
1472
+ </li>
1473
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1474
+ <a
1475
+ class="pf-v6-c-tabs__link"
1476
+ href="#"
1477
+ role="tab"
1478
+ id="primary-nav-containers-link"
1479
+ >
1480
+ <span class="pf-v6-c-tabs__item-text">Containers</span>
1481
+ </a>
1482
+ </li>
1483
+ <li class="pf-v6-c-tabs__item" role="presentation">
1484
+ <a
1485
+ class="pf-v6-c-tabs__link"
1486
+ href="#"
1487
+ role="tab"
1488
+ id="primary-nav-database-link"
1489
+ >
1490
+ <span class="pf-v6-c-tabs__item-text">Database</span>
1491
+ </a>
1492
+ </li>
1371
1493
 
1372
- <li class="pf-v6-c-tabs__item" role="presentation">
1373
- <a
1374
- class="pf-v6-c-tabs__link"
1375
- href="#"
1376
- role="tab"
1377
- id="primary-nav-server-link"
1378
- >
1379
- <span class="pf-v6-c-tabs__item-text">Server</span>
1380
- </a>
1381
- </li>
1382
- <li class="pf-v6-c-tabs__item" role="presentation">
1383
- <a
1384
- class="pf-v6-c-tabs__link"
1385
- href="#"
1386
- role="tab"
1387
- id="primary-nav-system-link"
1388
- >
1389
- <span class="pf-v6-c-tabs__item-text">System</span>
1390
- </a>
1391
- </li>
1392
- <li class="pf-v6-c-tabs__item" role="presentation">
1393
- <a
1394
- class="pf-v6-c-tabs__link"
1395
- href="#"
1396
- role="tab"
1397
- id="primary-nav-network-wired-link"
1398
- >
1399
- <span class="pf-v6-c-tabs__item-text">Network</span>
1400
- </a>
1401
- </li>
1402
- </ul>
1494
+ <li class="pf-v6-c-tabs__item" role="presentation">
1495
+ <a
1496
+ class="pf-v6-c-tabs__link"
1497
+ href="#"
1498
+ role="tab"
1499
+ id="primary-nav-server-link"
1500
+ >
1501
+ <span class="pf-v6-c-tabs__item-text">Server</span>
1502
+ </a>
1503
+ </li>
1504
+ <li class="pf-v6-c-tabs__item" role="presentation">
1505
+ <a
1506
+ class="pf-v6-c-tabs__link"
1507
+ href="#"
1508
+ role="tab"
1509
+ id="primary-nav-system-link"
1510
+ >
1511
+ <span class="pf-v6-c-tabs__item-text">System</span>
1512
+ </a>
1513
+ </li>
1514
+ <li class="pf-v6-c-tabs__item" role="presentation">
1515
+ <a
1516
+ class="pf-v6-c-tabs__link"
1517
+ href="#"
1518
+ role="tab"
1519
+ id="primary-nav-network-wired-link"
1520
+ >
1521
+ <span class="pf-v6-c-tabs__item-text">Network</span>
1522
+ </a>
1523
+ </li>
1524
+ </ul>
1403
1525
 
1404
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1526
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1527
+ <button
1528
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1529
+ type="button"
1530
+ aria-label="Scroll right"
1531
+ disabled
1532
+ >
1533
+ <span class="pf-v6-c-button__icon">
1534
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1535
+ </span>
1536
+ </button>
1537
+ </div>
1538
+ </nav>
1539
+ </div>
1540
+ <div class="pf-v6-c-compass__nav-search">
1405
1541
  <button
1406
- class="pf-v6-c-button pf-m-small pf-m-plain"
1542
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1407
1543
  type="button"
1408
- aria-label="Scroll right"
1409
- disabled
1544
+ aria-label="Search"
1410
1545
  >
1411
1546
  <span class="pf-v6-c-button__icon">
1412
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1547
+ <svg
1548
+ fill="none"
1549
+ width="1em"
1550
+ height="1em"
1551
+ class="pf-v6-svg"
1552
+ viewBox="0 0 20 20"
1553
+ xmlns="http://www.w3.org/2000/svg"
1554
+ aria-hidden="true"
1555
+ >
1556
+ <path
1557
+ d="M14.166 14.166L17.4993 17.4993"
1558
+ stroke="currentcolor"
1559
+ stroke-width="1.5"
1560
+ stroke-linecap="round"
1561
+ stroke-linejoin="round"
1562
+ />
1563
+ <path
1564
+ d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
1565
+ stroke="currentcolor"
1566
+ stroke-width="1.5"
1567
+ stroke-linecap="round"
1568
+ stroke-linejoin="round"
1569
+ />
1570
+ </svg>
1413
1571
  </span>
1414
1572
  </button>
1415
1573
  </div>
1416
- </nav>
1574
+ </div>
1417
1575
  </div>
1418
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
1419
- <nav
1420
- class="pf-v6-c-tabs pf-m-nav pf-m-subtab pf-m-inset-xl"
1421
- aria-label="Secondary nav"
1422
- >
1423
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1424
- <button
1425
- class="pf-v6-c-button pf-m-small pf-m-plain"
1426
- type="button"
1427
- aria-label="Scroll left"
1428
- disabled
1576
+ <div class="pf-v6-c-compass__panel pf-m-pill">
1577
+ <div class="pf-v6-c-compass__nav-content">
1578
+ <div class="pf-v6-c-compass__nav-main">
1579
+ <nav
1580
+ class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
1581
+ aria-label="Secondary nav"
1429
1582
  >
1430
- <span class="pf-v6-c-button__icon">
1431
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1432
- </span>
1433
- </button>
1434
- </div>
1435
- <ul class="pf-v6-c-tabs__list" role="tablist">
1436
- <li class="pf-v6-c-tabs__item" role="presentation">
1437
- <a
1438
- class="pf-v6-c-tabs__link"
1439
- href="#"
1440
- role="tab"
1441
- id="secondary-nav-sub-1-link"
1442
- >
1443
- <span class="pf-v6-c-tabs__item-text">Item 1</span>
1444
- </a>
1445
- </li>
1446
- <li class="pf-v6-c-tabs__item" role="presentation">
1447
- <a
1448
- class="pf-v6-c-tabs__link"
1449
- href="#"
1450
- role="tab"
1451
- id="secondary-nav-sub-2-link"
1452
- >
1453
- <span class="pf-v6-c-tabs__item-text">Item 2</span>
1454
- </a>
1455
- </li>
1456
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1457
- <a
1458
- class="pf-v6-c-tabs__link"
1459
- href="#"
1460
- role="tab"
1461
- id="secondary-nav-sub-3-link"
1462
- >
1463
- <span class="pf-v6-c-tabs__item-text">Item 3</span>
1464
- </a>
1465
- </li>
1583
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1584
+ <button
1585
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1586
+ type="button"
1587
+ aria-label="Scroll left"
1588
+ disabled
1589
+ >
1590
+ <span class="pf-v6-c-button__icon">
1591
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1592
+ </span>
1593
+ </button>
1594
+ </div>
1595
+ <ul class="pf-v6-c-tabs__list" role="tablist">
1596
+ <li class="pf-v6-c-tabs__item" role="presentation">
1597
+ <a
1598
+ class="pf-v6-c-tabs__link"
1599
+ href="#"
1600
+ role="tab"
1601
+ id="secondary-nav-sub-1-link"
1602
+ >
1603
+ <span class="pf-v6-c-tabs__item-text">Item 1</span>
1604
+ </a>
1605
+ </li>
1606
+ <li class="pf-v6-c-tabs__item" role="presentation">
1607
+ <a
1608
+ class="pf-v6-c-tabs__link"
1609
+ href="#"
1610
+ role="tab"
1611
+ id="secondary-nav-sub-2-link"
1612
+ >
1613
+ <span class="pf-v6-c-tabs__item-text">Item 2</span>
1614
+ </a>
1615
+ </li>
1616
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1617
+ <a
1618
+ class="pf-v6-c-tabs__link"
1619
+ href="#"
1620
+ role="tab"
1621
+ id="secondary-nav-sub-3-link"
1622
+ >
1623
+ <span class="pf-v6-c-tabs__item-text">Item 3</span>
1624
+ </a>
1625
+ </li>
1466
1626
 
1467
- <li class="pf-v6-c-tabs__item" role="presentation">
1468
- <a
1469
- class="pf-v6-c-tabs__link pf-m-disabled"
1470
- aria-disabled="true"
1471
- tabindex="-1"
1472
- href="#"
1473
- role="tab"
1474
- id="secondary-nav-sub-disabled-link"
1475
- >
1476
- <span class="pf-v6-c-tabs__item-text">Disabled</span>
1477
- </a>
1478
- </li>
1479
- <li class="pf-v6-c-tabs__item" role="presentation">
1480
- <a
1481
- class="pf-v6-c-tabs__link pf-m-aria-disabled"
1482
- aria-disabled="true"
1483
- href="#"
1484
- role="tab"
1485
- id="secondary-nav-sub-aria-disabled-link"
1486
- >
1487
- <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
1488
- </a>
1489
- </li>
1490
- <li class="pf-v6-c-tabs__item" role="presentation">
1491
- <a
1492
- class="pf-v6-c-tabs__link"
1493
- href="#"
1494
- role="tab"
1495
- id="secondary-nav-sub-6-link"
1496
- >
1497
- <span class="pf-v6-c-tabs__item-text">Item 6</span>
1498
- </a>
1499
- </li>
1500
- </ul>
1627
+ <li class="pf-v6-c-tabs__item" role="presentation">
1628
+ <a
1629
+ class="pf-v6-c-tabs__link pf-m-disabled"
1630
+ aria-disabled="true"
1631
+ tabindex="-1"
1632
+ href="#"
1633
+ role="tab"
1634
+ id="secondary-nav-sub-disabled-link"
1635
+ >
1636
+ <span class="pf-v6-c-tabs__item-text">Disabled</span>
1637
+ </a>
1638
+ </li>
1639
+ <li class="pf-v6-c-tabs__item" role="presentation">
1640
+ <a
1641
+ class="pf-v6-c-tabs__link pf-m-aria-disabled"
1642
+ aria-disabled="true"
1643
+ href="#"
1644
+ role="tab"
1645
+ id="secondary-nav-sub-aria-disabled-link"
1646
+ >
1647
+ <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
1648
+ </a>
1649
+ </li>
1650
+ <li class="pf-v6-c-tabs__item" role="presentation">
1651
+ <a
1652
+ class="pf-v6-c-tabs__link"
1653
+ href="#"
1654
+ role="tab"
1655
+ id="secondary-nav-sub-6-link"
1656
+ >
1657
+ <span class="pf-v6-c-tabs__item-text">Item 6</span>
1658
+ </a>
1659
+ </li>
1660
+ </ul>
1501
1661
 
1502
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1503
- <button
1504
- class="pf-v6-c-button pf-m-small pf-m-plain"
1505
- type="button"
1506
- aria-label="Scroll right"
1507
- disabled
1508
- >
1509
- <span class="pf-v6-c-button__icon">
1510
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1511
- </span>
1512
- </button>
1662
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1663
+ <button
1664
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1665
+ type="button"
1666
+ aria-label="Scroll right"
1667
+ disabled
1668
+ >
1669
+ <span class="pf-v6-c-button__icon">
1670
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1671
+ </span>
1672
+ </button>
1673
+ </div>
1674
+ </nav>
1513
1675
  </div>
1514
- </nav>
1676
+ </div>
1515
1677
  </div>
1516
1678
  </div>
1517
1679
  <div class="pf-v6-c-compass__profile">
@@ -2570,6 +2732,13 @@ wrapperTag: div
2570
2732
  </div>
2571
2733
  </div>
2572
2734
  </div>
2735
+ <div class="pf-v6-c-compass__main-footer">
2736
+ <div class="pf-v6-c-compass__message-bar">
2737
+ <div
2738
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
2739
+ >chatbot message bar</div>
2740
+ </div>
2741
+ </div>
2573
2742
  </div>
2574
2743
  <div class="pf-v6-c-compass__sidebar pf-m-end">
2575
2744
  <div class="pf-v6-c-compass__panel pf-m-pill">
@@ -2646,11 +2815,6 @@ wrapperTag: div
2646
2815
  </div>
2647
2816
  </div>
2648
2817
  </div>
2649
- <div class="pf-v6-c-compass__footer">
2650
- <div
2651
- class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
2652
- >chatbot message bar</div>
2653
- </div>
2654
2818
  </div>
2655
2819
 
2656
2820
  ```
@@ -2758,198 +2922,278 @@ wrapperTag: div
2758
2922
  </svg>
2759
2923
  </div>
2760
2924
  <div class="pf-v6-c-compass__nav">
2761
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
2762
- <nav
2763
- class="pf-v6-c-tabs pf-m-nav pf-m-inset-xl"
2764
- aria-label="Primary nav"
2765
- >
2766
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2925
+ <div class="pf-v6-c-compass__panel pf-m-pill">
2926
+ <div class="pf-v6-c-compass__nav-content">
2927
+ <div class="pf-v6-c-compass__nav-home">
2767
2928
  <button
2768
- class="pf-v6-c-button pf-m-small pf-m-plain"
2929
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
2769
2930
  type="button"
2770
- aria-label="Scroll left"
2771
- disabled
2931
+ aria-label="Home"
2772
2932
  >
2773
2933
  <span class="pf-v6-c-button__icon">
2774
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2934
+ <svg
2935
+ fill="none"
2936
+ width="1em"
2937
+ height="1em"
2938
+ class="pf-v6-svg"
2939
+ viewBox="0 0 20 20"
2940
+ xmlns="http://www.w3.org/2000/svg"
2941
+ aria-hidden="true"
2942
+ >
2943
+ <path
2944
+ d="M8.33268 13.334H11.666"
2945
+ stroke="currentcolor"
2946
+ stroke-width="1.5"
2947
+ stroke-linecap="round"
2948
+ stroke-linejoin="round"
2949
+ />
2950
+ <path
2951
+ d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
2952
+ stroke="currentcolor"
2953
+ stroke-width="1.5"
2954
+ stroke-linecap="round"
2955
+ stroke-linejoin="round"
2956
+ />
2957
+ <path
2958
+ d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
2959
+ stroke="currentcolor"
2960
+ stroke-width="1.5"
2961
+ stroke-linecap="round"
2962
+ stroke-linejoin="round"
2963
+ />
2964
+ </svg>
2775
2965
  </span>
2776
2966
  </button>
2777
2967
  </div>
2778
- <ul class="pf-v6-c-tabs__list" role="tablist">
2779
- <li class="pf-v6-c-tabs__item" role="presentation">
2780
- <a
2781
- class="pf-v6-c-tabs__link"
2782
- href="#"
2783
- role="tab"
2784
- id="primary-nav-users-link"
2785
- >
2786
- <span class="pf-v6-c-tabs__item-text">Users</span>
2787
- </a>
2788
- </li>
2789
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
2790
- <a
2791
- class="pf-v6-c-tabs__link"
2792
- href="#"
2793
- role="tab"
2794
- id="primary-nav-containers-link"
2795
- >
2796
- <span class="pf-v6-c-tabs__item-text">Containers</span>
2797
- </a>
2798
- </li>
2799
- <li class="pf-v6-c-tabs__item" role="presentation">
2800
- <a
2801
- class="pf-v6-c-tabs__link"
2802
- href="#"
2803
- role="tab"
2804
- id="primary-nav-database-link"
2805
- >
2806
- <span class="pf-v6-c-tabs__item-text">Database</span>
2807
- </a>
2808
- </li>
2968
+ <div class="pf-v6-c-compass__nav-main">
2969
+ <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Primary nav">
2970
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2971
+ <button
2972
+ class="pf-v6-c-button pf-m-small pf-m-plain"
2973
+ type="button"
2974
+ aria-label="Scroll left"
2975
+ disabled
2976
+ >
2977
+ <span class="pf-v6-c-button__icon">
2978
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2979
+ </span>
2980
+ </button>
2981
+ </div>
2982
+ <ul class="pf-v6-c-tabs__list" role="tablist">
2983
+ <li class="pf-v6-c-tabs__item" role="presentation">
2984
+ <a
2985
+ class="pf-v6-c-tabs__link"
2986
+ href="#"
2987
+ role="tab"
2988
+ id="primary-nav-users-link"
2989
+ >
2990
+ <span class="pf-v6-c-tabs__item-text">Users</span>
2991
+ </a>
2992
+ </li>
2993
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
2994
+ <a
2995
+ class="pf-v6-c-tabs__link"
2996
+ href="#"
2997
+ role="tab"
2998
+ id="primary-nav-containers-link"
2999
+ >
3000
+ <span class="pf-v6-c-tabs__item-text">Containers</span>
3001
+ </a>
3002
+ </li>
3003
+ <li class="pf-v6-c-tabs__item" role="presentation">
3004
+ <a
3005
+ class="pf-v6-c-tabs__link"
3006
+ href="#"
3007
+ role="tab"
3008
+ id="primary-nav-database-link"
3009
+ >
3010
+ <span class="pf-v6-c-tabs__item-text">Database</span>
3011
+ </a>
3012
+ </li>
2809
3013
 
2810
- <li class="pf-v6-c-tabs__item" role="presentation">
2811
- <a
2812
- class="pf-v6-c-tabs__link"
2813
- href="#"
2814
- role="tab"
2815
- id="primary-nav-server-link"
2816
- >
2817
- <span class="pf-v6-c-tabs__item-text">Server</span>
2818
- </a>
2819
- </li>
2820
- <li class="pf-v6-c-tabs__item" role="presentation">
2821
- <a
2822
- class="pf-v6-c-tabs__link"
2823
- href="#"
2824
- role="tab"
2825
- id="primary-nav-system-link"
2826
- >
2827
- <span class="pf-v6-c-tabs__item-text">System</span>
2828
- </a>
2829
- </li>
2830
- <li class="pf-v6-c-tabs__item" role="presentation">
2831
- <a
2832
- class="pf-v6-c-tabs__link"
2833
- href="#"
2834
- role="tab"
2835
- id="primary-nav-network-wired-link"
2836
- >
2837
- <span class="pf-v6-c-tabs__item-text">Network</span>
2838
- </a>
2839
- </li>
2840
- </ul>
3014
+ <li class="pf-v6-c-tabs__item" role="presentation">
3015
+ <a
3016
+ class="pf-v6-c-tabs__link"
3017
+ href="#"
3018
+ role="tab"
3019
+ id="primary-nav-server-link"
3020
+ >
3021
+ <span class="pf-v6-c-tabs__item-text">Server</span>
3022
+ </a>
3023
+ </li>
3024
+ <li class="pf-v6-c-tabs__item" role="presentation">
3025
+ <a
3026
+ class="pf-v6-c-tabs__link"
3027
+ href="#"
3028
+ role="tab"
3029
+ id="primary-nav-system-link"
3030
+ >
3031
+ <span class="pf-v6-c-tabs__item-text">System</span>
3032
+ </a>
3033
+ </li>
3034
+ <li class="pf-v6-c-tabs__item" role="presentation">
3035
+ <a
3036
+ class="pf-v6-c-tabs__link"
3037
+ href="#"
3038
+ role="tab"
3039
+ id="primary-nav-network-wired-link"
3040
+ >
3041
+ <span class="pf-v6-c-tabs__item-text">Network</span>
3042
+ </a>
3043
+ </li>
3044
+ </ul>
2841
3045
 
2842
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3046
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3047
+ <button
3048
+ class="pf-v6-c-button pf-m-small pf-m-plain"
3049
+ type="button"
3050
+ aria-label="Scroll right"
3051
+ disabled
3052
+ >
3053
+ <span class="pf-v6-c-button__icon">
3054
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3055
+ </span>
3056
+ </button>
3057
+ </div>
3058
+ </nav>
3059
+ </div>
3060
+ <div class="pf-v6-c-compass__nav-search">
2843
3061
  <button
2844
- class="pf-v6-c-button pf-m-small pf-m-plain"
3062
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
2845
3063
  type="button"
2846
- aria-label="Scroll right"
2847
- disabled
3064
+ aria-label="Search"
2848
3065
  >
2849
3066
  <span class="pf-v6-c-button__icon">
2850
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3067
+ <svg
3068
+ fill="none"
3069
+ width="1em"
3070
+ height="1em"
3071
+ class="pf-v6-svg"
3072
+ viewBox="0 0 20 20"
3073
+ xmlns="http://www.w3.org/2000/svg"
3074
+ aria-hidden="true"
3075
+ >
3076
+ <path
3077
+ d="M14.166 14.166L17.4993 17.4993"
3078
+ stroke="currentcolor"
3079
+ stroke-width="1.5"
3080
+ stroke-linecap="round"
3081
+ stroke-linejoin="round"
3082
+ />
3083
+ <path
3084
+ d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
3085
+ stroke="currentcolor"
3086
+ stroke-width="1.5"
3087
+ stroke-linecap="round"
3088
+ stroke-linejoin="round"
3089
+ />
3090
+ </svg>
2851
3091
  </span>
2852
3092
  </button>
2853
3093
  </div>
2854
- </nav>
3094
+ </div>
2855
3095
  </div>
2856
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
2857
- <nav
2858
- class="pf-v6-c-tabs pf-m-nav pf-m-subtab pf-m-inset-xl"
2859
- aria-label="Secondary nav"
2860
- >
2861
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2862
- <button
2863
- class="pf-v6-c-button pf-m-small pf-m-plain"
2864
- type="button"
2865
- aria-label="Scroll left"
2866
- disabled
3096
+ <div class="pf-v6-c-compass__panel pf-m-pill">
3097
+ <div class="pf-v6-c-compass__nav-content">
3098
+ <div class="pf-v6-c-compass__nav-main">
3099
+ <nav
3100
+ class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
3101
+ aria-label="Secondary nav"
2867
3102
  >
2868
- <span class="pf-v6-c-button__icon">
2869
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2870
- </span>
2871
- </button>
2872
- </div>
2873
- <ul class="pf-v6-c-tabs__list" role="tablist">
2874
- <li class="pf-v6-c-tabs__item" role="presentation">
2875
- <a
2876
- class="pf-v6-c-tabs__link"
2877
- href="#"
2878
- role="tab"
2879
- id="secondary-nav-sub-1-link"
2880
- >
2881
- <span class="pf-v6-c-tabs__item-text">Item 1</span>
2882
- </a>
2883
- </li>
2884
- <li class="pf-v6-c-tabs__item" role="presentation">
2885
- <a
2886
- class="pf-v6-c-tabs__link"
2887
- href="#"
2888
- role="tab"
2889
- id="secondary-nav-sub-2-link"
2890
- >
2891
- <span class="pf-v6-c-tabs__item-text">Item 2</span>
2892
- </a>
2893
- </li>
2894
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
2895
- <a
2896
- class="pf-v6-c-tabs__link"
2897
- href="#"
2898
- role="tab"
2899
- id="secondary-nav-sub-3-link"
2900
- >
2901
- <span class="pf-v6-c-tabs__item-text">Item 3</span>
2902
- </a>
2903
- </li>
3103
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3104
+ <button
3105
+ class="pf-v6-c-button pf-m-small pf-m-plain"
3106
+ type="button"
3107
+ aria-label="Scroll left"
3108
+ disabled
3109
+ >
3110
+ <span class="pf-v6-c-button__icon">
3111
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3112
+ </span>
3113
+ </button>
3114
+ </div>
3115
+ <ul class="pf-v6-c-tabs__list" role="tablist">
3116
+ <li class="pf-v6-c-tabs__item" role="presentation">
3117
+ <a
3118
+ class="pf-v6-c-tabs__link"
3119
+ href="#"
3120
+ role="tab"
3121
+ id="secondary-nav-sub-1-link"
3122
+ >
3123
+ <span class="pf-v6-c-tabs__item-text">Item 1</span>
3124
+ </a>
3125
+ </li>
3126
+ <li class="pf-v6-c-tabs__item" role="presentation">
3127
+ <a
3128
+ class="pf-v6-c-tabs__link"
3129
+ href="#"
3130
+ role="tab"
3131
+ id="secondary-nav-sub-2-link"
3132
+ >
3133
+ <span class="pf-v6-c-tabs__item-text">Item 2</span>
3134
+ </a>
3135
+ </li>
3136
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
3137
+ <a
3138
+ class="pf-v6-c-tabs__link"
3139
+ href="#"
3140
+ role="tab"
3141
+ id="secondary-nav-sub-3-link"
3142
+ >
3143
+ <span class="pf-v6-c-tabs__item-text">Item 3</span>
3144
+ </a>
3145
+ </li>
2904
3146
 
2905
- <li class="pf-v6-c-tabs__item" role="presentation">
2906
- <a
2907
- class="pf-v6-c-tabs__link pf-m-disabled"
2908
- aria-disabled="true"
2909
- tabindex="-1"
2910
- href="#"
2911
- role="tab"
2912
- id="secondary-nav-sub-disabled-link"
2913
- >
2914
- <span class="pf-v6-c-tabs__item-text">Disabled</span>
2915
- </a>
2916
- </li>
2917
- <li class="pf-v6-c-tabs__item" role="presentation">
2918
- <a
2919
- class="pf-v6-c-tabs__link pf-m-aria-disabled"
2920
- aria-disabled="true"
2921
- href="#"
2922
- role="tab"
2923
- id="secondary-nav-sub-aria-disabled-link"
2924
- >
2925
- <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
2926
- </a>
2927
- </li>
2928
- <li class="pf-v6-c-tabs__item" role="presentation">
2929
- <a
2930
- class="pf-v6-c-tabs__link"
2931
- href="#"
2932
- role="tab"
2933
- id="secondary-nav-sub-6-link"
2934
- >
2935
- <span class="pf-v6-c-tabs__item-text">Item 6</span>
2936
- </a>
2937
- </li>
2938
- </ul>
3147
+ <li class="pf-v6-c-tabs__item" role="presentation">
3148
+ <a
3149
+ class="pf-v6-c-tabs__link pf-m-disabled"
3150
+ aria-disabled="true"
3151
+ tabindex="-1"
3152
+ href="#"
3153
+ role="tab"
3154
+ id="secondary-nav-sub-disabled-link"
3155
+ >
3156
+ <span class="pf-v6-c-tabs__item-text">Disabled</span>
3157
+ </a>
3158
+ </li>
3159
+ <li class="pf-v6-c-tabs__item" role="presentation">
3160
+ <a
3161
+ class="pf-v6-c-tabs__link pf-m-aria-disabled"
3162
+ aria-disabled="true"
3163
+ href="#"
3164
+ role="tab"
3165
+ id="secondary-nav-sub-aria-disabled-link"
3166
+ >
3167
+ <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
3168
+ </a>
3169
+ </li>
3170
+ <li class="pf-v6-c-tabs__item" role="presentation">
3171
+ <a
3172
+ class="pf-v6-c-tabs__link"
3173
+ href="#"
3174
+ role="tab"
3175
+ id="secondary-nav-sub-6-link"
3176
+ >
3177
+ <span class="pf-v6-c-tabs__item-text">Item 6</span>
3178
+ </a>
3179
+ </li>
3180
+ </ul>
2939
3181
 
2940
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2941
- <button
2942
- class="pf-v6-c-button pf-m-small pf-m-plain"
2943
- type="button"
2944
- aria-label="Scroll right"
2945
- disabled
2946
- >
2947
- <span class="pf-v6-c-button__icon">
2948
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2949
- </span>
2950
- </button>
3182
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3183
+ <button
3184
+ class="pf-v6-c-button pf-m-small pf-m-plain"
3185
+ type="button"
3186
+ aria-label="Scroll right"
3187
+ disabled
3188
+ >
3189
+ <span class="pf-v6-c-button__icon">
3190
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3191
+ </span>
3192
+ </button>
3193
+ </div>
3194
+ </nav>
2951
3195
  </div>
2952
- </nav>
3196
+ </div>
2953
3197
  </div>
2954
3198
  </div>
2955
3199
  <div class="pf-v6-c-compass__profile">
@@ -4455,6 +4699,13 @@ wrapperTag: div
4455
4699
  </div>
4456
4700
  </div>
4457
4701
  </div>
4702
+ <div class="pf-v6-c-compass__main-footer">
4703
+ <div class="pf-v6-c-compass__message-bar">
4704
+ <div
4705
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
4706
+ >chatbot message bar</div>
4707
+ </div>
4708
+ </div>
4458
4709
  </div>
4459
4710
  <div class="pf-v6-c-compass__sidebar pf-m-end">
4460
4711
  <div class="pf-v6-c-compass__panel pf-m-pill">
@@ -4531,11 +4782,6 @@ wrapperTag: div
4531
4782
  </div>
4532
4783
  </div>
4533
4784
  </div>
4534
- <div class="pf-v6-c-compass__footer">
4535
- <div
4536
- class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
4537
- >chatbot message bar</div>
4538
- </div>
4539
4785
  </div>
4540
4786
 
4541
4787
  ```
@@ -4647,204 +4893,296 @@ wrapperTag: div
4647
4893
  </svg>
4648
4894
  </div>
4649
4895
  <div class="pf-v6-c-compass__nav">
4650
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
4651
- <nav
4652
- class="pf-v6-c-tabs pf-m-nav pf-m-inset-xl"
4653
- aria-label="Primary nav"
4654
- >
4655
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
4896
+ <div class="pf-v6-c-compass__panel pf-m-pill">
4897
+ <div class="pf-v6-c-compass__nav-content">
4898
+ <div class="pf-v6-c-compass__nav-home">
4656
4899
  <button
4657
- class="pf-v6-c-button pf-m-small pf-m-plain"
4900
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
4658
4901
  type="button"
4659
- aria-label="Scroll left"
4660
- disabled
4902
+ aria-label="Home"
4661
4903
  >
4662
4904
  <span class="pf-v6-c-button__icon">
4663
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4905
+ <svg
4906
+ fill="none"
4907
+ width="1em"
4908
+ height="1em"
4909
+ class="pf-v6-svg"
4910
+ viewBox="0 0 20 20"
4911
+ xmlns="http://www.w3.org/2000/svg"
4912
+ aria-hidden="true"
4913
+ >
4914
+ <path
4915
+ d="M8.33268 13.334H11.666"
4916
+ stroke="currentcolor"
4917
+ stroke-width="1.5"
4918
+ stroke-linecap="round"
4919
+ stroke-linejoin="round"
4920
+ />
4921
+ <path
4922
+ d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
4923
+ stroke="currentcolor"
4924
+ stroke-width="1.5"
4925
+ stroke-linecap="round"
4926
+ stroke-linejoin="round"
4927
+ />
4928
+ <path
4929
+ d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
4930
+ stroke="currentcolor"
4931
+ stroke-width="1.5"
4932
+ stroke-linecap="round"
4933
+ stroke-linejoin="round"
4934
+ />
4935
+ </svg>
4664
4936
  </span>
4665
4937
  </button>
4666
4938
  </div>
4667
- <ul class="pf-v6-c-tabs__list" role="tablist">
4668
- <li class="pf-v6-c-tabs__item" role="presentation">
4669
- <a
4670
- class="pf-v6-c-tabs__link"
4671
- href="#"
4672
- role="tab"
4673
- id="primary-nav-users-link"
4674
- >
4675
- <span class="pf-v6-c-tabs__item-text">Users</span>
4676
- </a>
4677
- </li>
4678
- <li
4679
- class="pf-v6-c-tabs__item pf-m-current"
4680
- role="presentation"
4681
- >
4682
- <a
4683
- class="pf-v6-c-tabs__link"
4684
- href="#"
4685
- role="tab"
4686
- id="primary-nav-containers-link"
4687
- >
4688
- <span class="pf-v6-c-tabs__item-text">Containers</span>
4689
- </a>
4690
- </li>
4691
- <li class="pf-v6-c-tabs__item" role="presentation">
4692
- <a
4693
- class="pf-v6-c-tabs__link"
4694
- href="#"
4695
- role="tab"
4696
- id="primary-nav-database-link"
4939
+ <div class="pf-v6-c-compass__nav-main">
4940
+ <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Primary nav">
4941
+ <div
4942
+ class="pf-v6-c-tabs__scroll-button"
4943
+ aria-hidden="true"
4697
4944
  >
4698
- <span class="pf-v6-c-tabs__item-text">Database</span>
4699
- </a>
4700
- </li>
4945
+ <button
4946
+ class="pf-v6-c-button pf-m-small pf-m-plain"
4947
+ type="button"
4948
+ aria-label="Scroll left"
4949
+ disabled
4950
+ >
4951
+ <span class="pf-v6-c-button__icon">
4952
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
4953
+ </span>
4954
+ </button>
4955
+ </div>
4956
+ <ul class="pf-v6-c-tabs__list" role="tablist">
4957
+ <li class="pf-v6-c-tabs__item" role="presentation">
4958
+ <a
4959
+ class="pf-v6-c-tabs__link"
4960
+ href="#"
4961
+ role="tab"
4962
+ id="primary-nav-users-link"
4963
+ >
4964
+ <span class="pf-v6-c-tabs__item-text">Users</span>
4965
+ </a>
4966
+ </li>
4967
+ <li
4968
+ class="pf-v6-c-tabs__item pf-m-current"
4969
+ role="presentation"
4970
+ >
4971
+ <a
4972
+ class="pf-v6-c-tabs__link"
4973
+ href="#"
4974
+ role="tab"
4975
+ id="primary-nav-containers-link"
4976
+ >
4977
+ <span class="pf-v6-c-tabs__item-text">Containers</span>
4978
+ </a>
4979
+ </li>
4980
+ <li class="pf-v6-c-tabs__item" role="presentation">
4981
+ <a
4982
+ class="pf-v6-c-tabs__link"
4983
+ href="#"
4984
+ role="tab"
4985
+ id="primary-nav-database-link"
4986
+ >
4987
+ <span class="pf-v6-c-tabs__item-text">Database</span>
4988
+ </a>
4989
+ </li>
4701
4990
 
4702
- <li class="pf-v6-c-tabs__item" role="presentation">
4703
- <a
4704
- class="pf-v6-c-tabs__link"
4705
- href="#"
4706
- role="tab"
4707
- id="primary-nav-server-link"
4708
- >
4709
- <span class="pf-v6-c-tabs__item-text">Server</span>
4710
- </a>
4711
- </li>
4712
- <li class="pf-v6-c-tabs__item" role="presentation">
4713
- <a
4714
- class="pf-v6-c-tabs__link"
4715
- href="#"
4716
- role="tab"
4717
- id="primary-nav-system-link"
4718
- >
4719
- <span class="pf-v6-c-tabs__item-text">System</span>
4720
- </a>
4721
- </li>
4722
- <li class="pf-v6-c-tabs__item" role="presentation">
4723
- <a
4724
- class="pf-v6-c-tabs__link"
4725
- href="#"
4726
- role="tab"
4727
- id="primary-nav-network-wired-link"
4728
- >
4729
- <span class="pf-v6-c-tabs__item-text">Network</span>
4730
- </a>
4731
- </li>
4732
- </ul>
4991
+ <li class="pf-v6-c-tabs__item" role="presentation">
4992
+ <a
4993
+ class="pf-v6-c-tabs__link"
4994
+ href="#"
4995
+ role="tab"
4996
+ id="primary-nav-server-link"
4997
+ >
4998
+ <span class="pf-v6-c-tabs__item-text">Server</span>
4999
+ </a>
5000
+ </li>
5001
+ <li class="pf-v6-c-tabs__item" role="presentation">
5002
+ <a
5003
+ class="pf-v6-c-tabs__link"
5004
+ href="#"
5005
+ role="tab"
5006
+ id="primary-nav-system-link"
5007
+ >
5008
+ <span class="pf-v6-c-tabs__item-text">System</span>
5009
+ </a>
5010
+ </li>
5011
+ <li class="pf-v6-c-tabs__item" role="presentation">
5012
+ <a
5013
+ class="pf-v6-c-tabs__link"
5014
+ href="#"
5015
+ role="tab"
5016
+ id="primary-nav-network-wired-link"
5017
+ >
5018
+ <span class="pf-v6-c-tabs__item-text">Network</span>
5019
+ </a>
5020
+ </li>
5021
+ </ul>
4733
5022
 
4734
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
4735
- <button
4736
- class="pf-v6-c-button pf-m-small pf-m-plain"
4737
- type="button"
4738
- aria-label="Scroll right"
4739
- disabled
4740
- >
4741
- <span class="pf-v6-c-button__icon">
4742
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4743
- </span>
4744
- </button>
5023
+ <div
5024
+ class="pf-v6-c-tabs__scroll-button"
5025
+ aria-hidden="true"
5026
+ >
5027
+ <button
5028
+ class="pf-v6-c-button pf-m-small pf-m-plain"
5029
+ type="button"
5030
+ aria-label="Scroll right"
5031
+ disabled
5032
+ >
5033
+ <span class="pf-v6-c-button__icon">
5034
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
5035
+ </span>
5036
+ </button>
5037
+ </div>
5038
+ </nav>
4745
5039
  </div>
4746
- </nav>
4747
- </div>
4748
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
4749
- <nav
4750
- class="pf-v6-c-tabs pf-m-nav pf-m-subtab pf-m-inset-xl"
4751
- aria-label="Secondary nav"
4752
- >
4753
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
5040
+ <div class="pf-v6-c-compass__nav-search">
4754
5041
  <button
4755
- class="pf-v6-c-button pf-m-small pf-m-plain"
5042
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
4756
5043
  type="button"
4757
- aria-label="Scroll left"
4758
- disabled
5044
+ aria-label="Search"
4759
5045
  >
4760
5046
  <span class="pf-v6-c-button__icon">
4761
- <i class="fas fa-angle-left" aria-hidden="true"></i>
5047
+ <svg
5048
+ fill="none"
5049
+ width="1em"
5050
+ height="1em"
5051
+ class="pf-v6-svg"
5052
+ viewBox="0 0 20 20"
5053
+ xmlns="http://www.w3.org/2000/svg"
5054
+ aria-hidden="true"
5055
+ >
5056
+ <path
5057
+ d="M14.166 14.166L17.4993 17.4993"
5058
+ stroke="currentcolor"
5059
+ stroke-width="1.5"
5060
+ stroke-linecap="round"
5061
+ stroke-linejoin="round"
5062
+ />
5063
+ <path
5064
+ d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
5065
+ stroke="currentcolor"
5066
+ stroke-width="1.5"
5067
+ stroke-linecap="round"
5068
+ stroke-linejoin="round"
5069
+ />
5070
+ </svg>
4762
5071
  </span>
4763
5072
  </button>
4764
5073
  </div>
4765
- <ul class="pf-v6-c-tabs__list" role="tablist">
4766
- <li class="pf-v6-c-tabs__item" role="presentation">
4767
- <a
4768
- class="pf-v6-c-tabs__link"
4769
- href="#"
4770
- role="tab"
4771
- id="secondary-nav-sub-1-link"
4772
- >
4773
- <span class="pf-v6-c-tabs__item-text">Item 1</span>
4774
- </a>
4775
- </li>
4776
- <li class="pf-v6-c-tabs__item" role="presentation">
4777
- <a
4778
- class="pf-v6-c-tabs__link"
4779
- href="#"
4780
- role="tab"
4781
- id="secondary-nav-sub-2-link"
4782
- >
4783
- <span class="pf-v6-c-tabs__item-text">Item 2</span>
4784
- </a>
4785
- </li>
4786
- <li
4787
- class="pf-v6-c-tabs__item pf-m-current"
4788
- role="presentation"
5074
+ </div>
5075
+ </div>
5076
+ <div class="pf-v6-c-compass__panel pf-m-pill">
5077
+ <div class="pf-v6-c-compass__nav-content">
5078
+ <div class="pf-v6-c-compass__nav-main">
5079
+ <nav
5080
+ class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
5081
+ aria-label="Secondary nav"
4789
5082
  >
4790
- <a
4791
- class="pf-v6-c-tabs__link"
4792
- href="#"
4793
- role="tab"
4794
- id="secondary-nav-sub-3-link"
5083
+ <div
5084
+ class="pf-v6-c-tabs__scroll-button"
5085
+ aria-hidden="true"
4795
5086
  >
4796
- <span class="pf-v6-c-tabs__item-text">Item 3</span>
4797
- </a>
4798
- </li>
5087
+ <button
5088
+ class="pf-v6-c-button pf-m-small pf-m-plain"
5089
+ type="button"
5090
+ aria-label="Scroll left"
5091
+ disabled
5092
+ >
5093
+ <span class="pf-v6-c-button__icon">
5094
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
5095
+ </span>
5096
+ </button>
5097
+ </div>
5098
+ <ul class="pf-v6-c-tabs__list" role="tablist">
5099
+ <li class="pf-v6-c-tabs__item" role="presentation">
5100
+ <a
5101
+ class="pf-v6-c-tabs__link"
5102
+ href="#"
5103
+ role="tab"
5104
+ id="secondary-nav-sub-1-link"
5105
+ >
5106
+ <span class="pf-v6-c-tabs__item-text">Item 1</span>
5107
+ </a>
5108
+ </li>
5109
+ <li class="pf-v6-c-tabs__item" role="presentation">
5110
+ <a
5111
+ class="pf-v6-c-tabs__link"
5112
+ href="#"
5113
+ role="tab"
5114
+ id="secondary-nav-sub-2-link"
5115
+ >
5116
+ <span class="pf-v6-c-tabs__item-text">Item 2</span>
5117
+ </a>
5118
+ </li>
5119
+ <li
5120
+ class="pf-v6-c-tabs__item pf-m-current"
5121
+ role="presentation"
5122
+ >
5123
+ <a
5124
+ class="pf-v6-c-tabs__link"
5125
+ href="#"
5126
+ role="tab"
5127
+ id="secondary-nav-sub-3-link"
5128
+ >
5129
+ <span class="pf-v6-c-tabs__item-text">Item 3</span>
5130
+ </a>
5131
+ </li>
4799
5132
 
4800
- <li class="pf-v6-c-tabs__item" role="presentation">
4801
- <a
4802
- class="pf-v6-c-tabs__link pf-m-disabled"
4803
- aria-disabled="true"
4804
- tabindex="-1"
4805
- href="#"
4806
- role="tab"
4807
- id="secondary-nav-sub-disabled-link"
4808
- >
4809
- <span class="pf-v6-c-tabs__item-text">Disabled</span>
4810
- </a>
4811
- </li>
4812
- <li class="pf-v6-c-tabs__item" role="presentation">
4813
- <a
4814
- class="pf-v6-c-tabs__link pf-m-aria-disabled"
4815
- aria-disabled="true"
4816
- href="#"
4817
- role="tab"
4818
- id="secondary-nav-sub-aria-disabled-link"
4819
- >
4820
- <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
4821
- </a>
4822
- </li>
4823
- <li class="pf-v6-c-tabs__item" role="presentation">
4824
- <a
4825
- class="pf-v6-c-tabs__link"
4826
- href="#"
4827
- role="tab"
4828
- id="secondary-nav-sub-6-link"
4829
- >
4830
- <span class="pf-v6-c-tabs__item-text">Item 6</span>
4831
- </a>
4832
- </li>
4833
- </ul>
5133
+ <li class="pf-v6-c-tabs__item" role="presentation">
5134
+ <a
5135
+ class="pf-v6-c-tabs__link pf-m-disabled"
5136
+ aria-disabled="true"
5137
+ tabindex="-1"
5138
+ href="#"
5139
+ role="tab"
5140
+ id="secondary-nav-sub-disabled-link"
5141
+ >
5142
+ <span class="pf-v6-c-tabs__item-text">Disabled</span>
5143
+ </a>
5144
+ </li>
5145
+ <li class="pf-v6-c-tabs__item" role="presentation">
5146
+ <a
5147
+ class="pf-v6-c-tabs__link pf-m-aria-disabled"
5148
+ aria-disabled="true"
5149
+ href="#"
5150
+ role="tab"
5151
+ id="secondary-nav-sub-aria-disabled-link"
5152
+ >
5153
+ <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
5154
+ </a>
5155
+ </li>
5156
+ <li class="pf-v6-c-tabs__item" role="presentation">
5157
+ <a
5158
+ class="pf-v6-c-tabs__link"
5159
+ href="#"
5160
+ role="tab"
5161
+ id="secondary-nav-sub-6-link"
5162
+ >
5163
+ <span class="pf-v6-c-tabs__item-text">Item 6</span>
5164
+ </a>
5165
+ </li>
5166
+ </ul>
4834
5167
 
4835
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
4836
- <button
4837
- class="pf-v6-c-button pf-m-small pf-m-plain"
4838
- type="button"
4839
- aria-label="Scroll right"
4840
- disabled
4841
- >
4842
- <span class="pf-v6-c-button__icon">
4843
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4844
- </span>
4845
- </button>
5168
+ <div
5169
+ class="pf-v6-c-tabs__scroll-button"
5170
+ aria-hidden="true"
5171
+ >
5172
+ <button
5173
+ class="pf-v6-c-button pf-m-small pf-m-plain"
5174
+ type="button"
5175
+ aria-label="Scroll right"
5176
+ disabled
5177
+ >
5178
+ <span class="pf-v6-c-button__icon">
5179
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
5180
+ </span>
5181
+ </button>
5182
+ </div>
5183
+ </nav>
4846
5184
  </div>
4847
- </nav>
5185
+ </div>
4848
5186
  </div>
4849
5187
  </div>
4850
5188
  <div class="pf-v6-c-compass__profile">
@@ -5715,6 +6053,13 @@ wrapperTag: div
5715
6053
  </div>
5716
6054
  </div>
5717
6055
  </div>
6056
+ <div class="pf-v6-c-compass__main-footer">
6057
+ <div class="pf-v6-c-compass__message-bar">
6058
+ <div
6059
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
6060
+ >chatbot message bar</div>
6061
+ </div>
6062
+ </div>
5718
6063
  </div>
5719
6064
  <div class="pf-v6-c-compass__sidebar pf-m-end">
5720
6065
  <div class="pf-v6-c-compass__panel pf-m-pill">
@@ -5791,11 +6136,6 @@ wrapperTag: div
5791
6136
  </div>
5792
6137
  </div>
5793
6138
  </div>
5794
- <div class="pf-v6-c-compass__footer">
5795
- <div
5796
- class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
5797
- >chatbot message bar</div>
5798
- </div>
5799
6139
  </div>
5800
6140
  </div>
5801
6141
  </div>