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

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 +32 -3
  2. package/components/Compass/compass.scss +33 -3
  3. package/components/_index.css +32 -3
  4. package/docs/components/Compass/examples/Compass.md +15 -2
  5. package/docs/demos/Compass/examples/Compass.md +1020 -688
  6. package/package.json +2 -2
  7. package/patternfly-no-globals.css +32 -3
  8. package/patternfly.css +32 -3
  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">
@@ -1320,198 +1400,278 @@ wrapperTag: div
1320
1400
  </svg>
1321
1401
  </div>
1322
1402
  <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">
1403
+ <div class="pf-v6-c-compass__panel pf-m-pill">
1404
+ <div class="pf-v6-c-compass__nav-content">
1405
+ <div class="pf-v6-c-compass__nav-home">
1329
1406
  <button
1330
- class="pf-v6-c-button pf-m-small pf-m-plain"
1407
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1331
1408
  type="button"
1332
- aria-label="Scroll left"
1333
- disabled
1409
+ aria-label="Home"
1334
1410
  >
1335
1411
  <span class="pf-v6-c-button__icon">
1336
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1412
+ <svg
1413
+ fill="none"
1414
+ width="1em"
1415
+ height="1em"
1416
+ class="pf-v6-svg"
1417
+ viewBox="0 0 20 20"
1418
+ xmlns="http://www.w3.org/2000/svg"
1419
+ aria-hidden="true"
1420
+ >
1421
+ <path
1422
+ d="M8.33268 13.334H11.666"
1423
+ stroke="currentcolor"
1424
+ stroke-width="1.5"
1425
+ stroke-linecap="round"
1426
+ stroke-linejoin="round"
1427
+ />
1428
+ <path
1429
+ d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
1430
+ stroke="currentcolor"
1431
+ stroke-width="1.5"
1432
+ stroke-linecap="round"
1433
+ stroke-linejoin="round"
1434
+ />
1435
+ <path
1436
+ 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"
1437
+ stroke="currentcolor"
1438
+ stroke-width="1.5"
1439
+ stroke-linecap="round"
1440
+ stroke-linejoin="round"
1441
+ />
1442
+ </svg>
1337
1443
  </span>
1338
1444
  </button>
1339
1445
  </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>
1446
+ <div class="pf-v6-c-compass__nav-main">
1447
+ <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Primary nav">
1448
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1449
+ <button
1450
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1451
+ type="button"
1452
+ aria-label="Scroll left"
1453
+ disabled
1454
+ >
1455
+ <span class="pf-v6-c-button__icon">
1456
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1457
+ </span>
1458
+ </button>
1459
+ </div>
1460
+ <ul class="pf-v6-c-tabs__list" role="tablist">
1461
+ <li class="pf-v6-c-tabs__item" role="presentation">
1462
+ <a
1463
+ class="pf-v6-c-tabs__link"
1464
+ href="#"
1465
+ role="tab"
1466
+ id="primary-nav-users-link"
1467
+ >
1468
+ <span class="pf-v6-c-tabs__item-text">Users</span>
1469
+ </a>
1470
+ </li>
1471
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1472
+ <a
1473
+ class="pf-v6-c-tabs__link"
1474
+ href="#"
1475
+ role="tab"
1476
+ id="primary-nav-containers-link"
1477
+ >
1478
+ <span class="pf-v6-c-tabs__item-text">Containers</span>
1479
+ </a>
1480
+ </li>
1481
+ <li class="pf-v6-c-tabs__item" role="presentation">
1482
+ <a
1483
+ class="pf-v6-c-tabs__link"
1484
+ href="#"
1485
+ role="tab"
1486
+ id="primary-nav-database-link"
1487
+ >
1488
+ <span class="pf-v6-c-tabs__item-text">Database</span>
1489
+ </a>
1490
+ </li>
1371
1491
 
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>
1492
+ <li class="pf-v6-c-tabs__item" role="presentation">
1493
+ <a
1494
+ class="pf-v6-c-tabs__link"
1495
+ href="#"
1496
+ role="tab"
1497
+ id="primary-nav-server-link"
1498
+ >
1499
+ <span class="pf-v6-c-tabs__item-text">Server</span>
1500
+ </a>
1501
+ </li>
1502
+ <li class="pf-v6-c-tabs__item" role="presentation">
1503
+ <a
1504
+ class="pf-v6-c-tabs__link"
1505
+ href="#"
1506
+ role="tab"
1507
+ id="primary-nav-system-link"
1508
+ >
1509
+ <span class="pf-v6-c-tabs__item-text">System</span>
1510
+ </a>
1511
+ </li>
1512
+ <li class="pf-v6-c-tabs__item" role="presentation">
1513
+ <a
1514
+ class="pf-v6-c-tabs__link"
1515
+ href="#"
1516
+ role="tab"
1517
+ id="primary-nav-network-wired-link"
1518
+ >
1519
+ <span class="pf-v6-c-tabs__item-text">Network</span>
1520
+ </a>
1521
+ </li>
1522
+ </ul>
1403
1523
 
1404
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1524
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1525
+ <button
1526
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1527
+ type="button"
1528
+ aria-label="Scroll right"
1529
+ disabled
1530
+ >
1531
+ <span class="pf-v6-c-button__icon">
1532
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1533
+ </span>
1534
+ </button>
1535
+ </div>
1536
+ </nav>
1537
+ </div>
1538
+ <div class="pf-v6-c-compass__nav-search">
1405
1539
  <button
1406
- class="pf-v6-c-button pf-m-small pf-m-plain"
1540
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1407
1541
  type="button"
1408
- aria-label="Scroll right"
1409
- disabled
1542
+ aria-label="Search"
1410
1543
  >
1411
1544
  <span class="pf-v6-c-button__icon">
1412
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1545
+ <svg
1546
+ fill="none"
1547
+ width="1em"
1548
+ height="1em"
1549
+ class="pf-v6-svg"
1550
+ viewBox="0 0 20 20"
1551
+ xmlns="http://www.w3.org/2000/svg"
1552
+ aria-hidden="true"
1553
+ >
1554
+ <path
1555
+ d="M14.166 14.166L17.4993 17.4993"
1556
+ stroke="currentcolor"
1557
+ stroke-width="1.5"
1558
+ stroke-linecap="round"
1559
+ stroke-linejoin="round"
1560
+ />
1561
+ <path
1562
+ 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"
1563
+ stroke="currentcolor"
1564
+ stroke-width="1.5"
1565
+ stroke-linecap="round"
1566
+ stroke-linejoin="round"
1567
+ />
1568
+ </svg>
1413
1569
  </span>
1414
1570
  </button>
1415
1571
  </div>
1416
- </nav>
1572
+ </div>
1417
1573
  </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
1574
+ <div class="pf-v6-c-compass__panel pf-m-pill">
1575
+ <div class="pf-v6-c-compass__nav-content">
1576
+ <div class="pf-v6-c-compass__nav-main">
1577
+ <nav
1578
+ class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
1579
+ aria-label="Secondary nav"
1429
1580
  >
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>
1581
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1582
+ <button
1583
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1584
+ type="button"
1585
+ aria-label="Scroll left"
1586
+ disabled
1587
+ >
1588
+ <span class="pf-v6-c-button__icon">
1589
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1590
+ </span>
1591
+ </button>
1592
+ </div>
1593
+ <ul class="pf-v6-c-tabs__list" role="tablist">
1594
+ <li class="pf-v6-c-tabs__item" role="presentation">
1595
+ <a
1596
+ class="pf-v6-c-tabs__link"
1597
+ href="#"
1598
+ role="tab"
1599
+ id="secondary-nav-sub-1-link"
1600
+ >
1601
+ <span class="pf-v6-c-tabs__item-text">Item 1</span>
1602
+ </a>
1603
+ </li>
1604
+ <li class="pf-v6-c-tabs__item" role="presentation">
1605
+ <a
1606
+ class="pf-v6-c-tabs__link"
1607
+ href="#"
1608
+ role="tab"
1609
+ id="secondary-nav-sub-2-link"
1610
+ >
1611
+ <span class="pf-v6-c-tabs__item-text">Item 2</span>
1612
+ </a>
1613
+ </li>
1614
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1615
+ <a
1616
+ class="pf-v6-c-tabs__link"
1617
+ href="#"
1618
+ role="tab"
1619
+ id="secondary-nav-sub-3-link"
1620
+ >
1621
+ <span class="pf-v6-c-tabs__item-text">Item 3</span>
1622
+ </a>
1623
+ </li>
1466
1624
 
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>
1625
+ <li class="pf-v6-c-tabs__item" role="presentation">
1626
+ <a
1627
+ class="pf-v6-c-tabs__link pf-m-disabled"
1628
+ aria-disabled="true"
1629
+ tabindex="-1"
1630
+ href="#"
1631
+ role="tab"
1632
+ id="secondary-nav-sub-disabled-link"
1633
+ >
1634
+ <span class="pf-v6-c-tabs__item-text">Disabled</span>
1635
+ </a>
1636
+ </li>
1637
+ <li class="pf-v6-c-tabs__item" role="presentation">
1638
+ <a
1639
+ class="pf-v6-c-tabs__link pf-m-aria-disabled"
1640
+ aria-disabled="true"
1641
+ href="#"
1642
+ role="tab"
1643
+ id="secondary-nav-sub-aria-disabled-link"
1644
+ >
1645
+ <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
1646
+ </a>
1647
+ </li>
1648
+ <li class="pf-v6-c-tabs__item" role="presentation">
1649
+ <a
1650
+ class="pf-v6-c-tabs__link"
1651
+ href="#"
1652
+ role="tab"
1653
+ id="secondary-nav-sub-6-link"
1654
+ >
1655
+ <span class="pf-v6-c-tabs__item-text">Item 6</span>
1656
+ </a>
1657
+ </li>
1658
+ </ul>
1501
1659
 
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>
1660
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1661
+ <button
1662
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1663
+ type="button"
1664
+ aria-label="Scroll right"
1665
+ disabled
1666
+ >
1667
+ <span class="pf-v6-c-button__icon">
1668
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1669
+ </span>
1670
+ </button>
1671
+ </div>
1672
+ </nav>
1513
1673
  </div>
1514
- </nav>
1674
+ </div>
1515
1675
  </div>
1516
1676
  </div>
1517
1677
  <div class="pf-v6-c-compass__profile">
@@ -2758,198 +2918,278 @@ wrapperTag: div
2758
2918
  </svg>
2759
2919
  </div>
2760
2920
  <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">
2921
+ <div class="pf-v6-c-compass__panel pf-m-pill">
2922
+ <div class="pf-v6-c-compass__nav-content">
2923
+ <div class="pf-v6-c-compass__nav-home">
2767
2924
  <button
2768
- class="pf-v6-c-button pf-m-small pf-m-plain"
2925
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
2769
2926
  type="button"
2770
- aria-label="Scroll left"
2771
- disabled
2927
+ aria-label="Home"
2772
2928
  >
2773
2929
  <span class="pf-v6-c-button__icon">
2774
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2930
+ <svg
2931
+ fill="none"
2932
+ width="1em"
2933
+ height="1em"
2934
+ class="pf-v6-svg"
2935
+ viewBox="0 0 20 20"
2936
+ xmlns="http://www.w3.org/2000/svg"
2937
+ aria-hidden="true"
2938
+ >
2939
+ <path
2940
+ d="M8.33268 13.334H11.666"
2941
+ stroke="currentcolor"
2942
+ stroke-width="1.5"
2943
+ stroke-linecap="round"
2944
+ stroke-linejoin="round"
2945
+ />
2946
+ <path
2947
+ d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
2948
+ stroke="currentcolor"
2949
+ stroke-width="1.5"
2950
+ stroke-linecap="round"
2951
+ stroke-linejoin="round"
2952
+ />
2953
+ <path
2954
+ 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"
2955
+ stroke="currentcolor"
2956
+ stroke-width="1.5"
2957
+ stroke-linecap="round"
2958
+ stroke-linejoin="round"
2959
+ />
2960
+ </svg>
2775
2961
  </span>
2776
2962
  </button>
2777
2963
  </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>
2964
+ <div class="pf-v6-c-compass__nav-main">
2965
+ <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Primary nav">
2966
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2967
+ <button
2968
+ class="pf-v6-c-button pf-m-small pf-m-plain"
2969
+ type="button"
2970
+ aria-label="Scroll left"
2971
+ disabled
2972
+ >
2973
+ <span class="pf-v6-c-button__icon">
2974
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2975
+ </span>
2976
+ </button>
2977
+ </div>
2978
+ <ul class="pf-v6-c-tabs__list" role="tablist">
2979
+ <li class="pf-v6-c-tabs__item" role="presentation">
2980
+ <a
2981
+ class="pf-v6-c-tabs__link"
2982
+ href="#"
2983
+ role="tab"
2984
+ id="primary-nav-users-link"
2985
+ >
2986
+ <span class="pf-v6-c-tabs__item-text">Users</span>
2987
+ </a>
2988
+ </li>
2989
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
2990
+ <a
2991
+ class="pf-v6-c-tabs__link"
2992
+ href="#"
2993
+ role="tab"
2994
+ id="primary-nav-containers-link"
2995
+ >
2996
+ <span class="pf-v6-c-tabs__item-text">Containers</span>
2997
+ </a>
2998
+ </li>
2999
+ <li class="pf-v6-c-tabs__item" role="presentation">
3000
+ <a
3001
+ class="pf-v6-c-tabs__link"
3002
+ href="#"
3003
+ role="tab"
3004
+ id="primary-nav-database-link"
3005
+ >
3006
+ <span class="pf-v6-c-tabs__item-text">Database</span>
3007
+ </a>
3008
+ </li>
2809
3009
 
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>
3010
+ <li class="pf-v6-c-tabs__item" role="presentation">
3011
+ <a
3012
+ class="pf-v6-c-tabs__link"
3013
+ href="#"
3014
+ role="tab"
3015
+ id="primary-nav-server-link"
3016
+ >
3017
+ <span class="pf-v6-c-tabs__item-text">Server</span>
3018
+ </a>
3019
+ </li>
3020
+ <li class="pf-v6-c-tabs__item" role="presentation">
3021
+ <a
3022
+ class="pf-v6-c-tabs__link"
3023
+ href="#"
3024
+ role="tab"
3025
+ id="primary-nav-system-link"
3026
+ >
3027
+ <span class="pf-v6-c-tabs__item-text">System</span>
3028
+ </a>
3029
+ </li>
3030
+ <li class="pf-v6-c-tabs__item" role="presentation">
3031
+ <a
3032
+ class="pf-v6-c-tabs__link"
3033
+ href="#"
3034
+ role="tab"
3035
+ id="primary-nav-network-wired-link"
3036
+ >
3037
+ <span class="pf-v6-c-tabs__item-text">Network</span>
3038
+ </a>
3039
+ </li>
3040
+ </ul>
2841
3041
 
2842
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3042
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3043
+ <button
3044
+ class="pf-v6-c-button pf-m-small pf-m-plain"
3045
+ type="button"
3046
+ aria-label="Scroll right"
3047
+ disabled
3048
+ >
3049
+ <span class="pf-v6-c-button__icon">
3050
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3051
+ </span>
3052
+ </button>
3053
+ </div>
3054
+ </nav>
3055
+ </div>
3056
+ <div class="pf-v6-c-compass__nav-search">
2843
3057
  <button
2844
- class="pf-v6-c-button pf-m-small pf-m-plain"
3058
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
2845
3059
  type="button"
2846
- aria-label="Scroll right"
2847
- disabled
3060
+ aria-label="Search"
2848
3061
  >
2849
3062
  <span class="pf-v6-c-button__icon">
2850
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3063
+ <svg
3064
+ fill="none"
3065
+ width="1em"
3066
+ height="1em"
3067
+ class="pf-v6-svg"
3068
+ viewBox="0 0 20 20"
3069
+ xmlns="http://www.w3.org/2000/svg"
3070
+ aria-hidden="true"
3071
+ >
3072
+ <path
3073
+ d="M14.166 14.166L17.4993 17.4993"
3074
+ stroke="currentcolor"
3075
+ stroke-width="1.5"
3076
+ stroke-linecap="round"
3077
+ stroke-linejoin="round"
3078
+ />
3079
+ <path
3080
+ 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"
3081
+ stroke="currentcolor"
3082
+ stroke-width="1.5"
3083
+ stroke-linecap="round"
3084
+ stroke-linejoin="round"
3085
+ />
3086
+ </svg>
2851
3087
  </span>
2852
3088
  </button>
2853
3089
  </div>
2854
- </nav>
3090
+ </div>
2855
3091
  </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
3092
+ <div class="pf-v6-c-compass__panel pf-m-pill">
3093
+ <div class="pf-v6-c-compass__nav-content">
3094
+ <div class="pf-v6-c-compass__nav-main">
3095
+ <nav
3096
+ class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
3097
+ aria-label="Secondary nav"
2867
3098
  >
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>
3099
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3100
+ <button
3101
+ class="pf-v6-c-button pf-m-small pf-m-plain"
3102
+ type="button"
3103
+ aria-label="Scroll left"
3104
+ disabled
3105
+ >
3106
+ <span class="pf-v6-c-button__icon">
3107
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3108
+ </span>
3109
+ </button>
3110
+ </div>
3111
+ <ul class="pf-v6-c-tabs__list" role="tablist">
3112
+ <li class="pf-v6-c-tabs__item" role="presentation">
3113
+ <a
3114
+ class="pf-v6-c-tabs__link"
3115
+ href="#"
3116
+ role="tab"
3117
+ id="secondary-nav-sub-1-link"
3118
+ >
3119
+ <span class="pf-v6-c-tabs__item-text">Item 1</span>
3120
+ </a>
3121
+ </li>
3122
+ <li class="pf-v6-c-tabs__item" role="presentation">
3123
+ <a
3124
+ class="pf-v6-c-tabs__link"
3125
+ href="#"
3126
+ role="tab"
3127
+ id="secondary-nav-sub-2-link"
3128
+ >
3129
+ <span class="pf-v6-c-tabs__item-text">Item 2</span>
3130
+ </a>
3131
+ </li>
3132
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
3133
+ <a
3134
+ class="pf-v6-c-tabs__link"
3135
+ href="#"
3136
+ role="tab"
3137
+ id="secondary-nav-sub-3-link"
3138
+ >
3139
+ <span class="pf-v6-c-tabs__item-text">Item 3</span>
3140
+ </a>
3141
+ </li>
2904
3142
 
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>
3143
+ <li class="pf-v6-c-tabs__item" role="presentation">
3144
+ <a
3145
+ class="pf-v6-c-tabs__link pf-m-disabled"
3146
+ aria-disabled="true"
3147
+ tabindex="-1"
3148
+ href="#"
3149
+ role="tab"
3150
+ id="secondary-nav-sub-disabled-link"
3151
+ >
3152
+ <span class="pf-v6-c-tabs__item-text">Disabled</span>
3153
+ </a>
3154
+ </li>
3155
+ <li class="pf-v6-c-tabs__item" role="presentation">
3156
+ <a
3157
+ class="pf-v6-c-tabs__link pf-m-aria-disabled"
3158
+ aria-disabled="true"
3159
+ href="#"
3160
+ role="tab"
3161
+ id="secondary-nav-sub-aria-disabled-link"
3162
+ >
3163
+ <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
3164
+ </a>
3165
+ </li>
3166
+ <li class="pf-v6-c-tabs__item" role="presentation">
3167
+ <a
3168
+ class="pf-v6-c-tabs__link"
3169
+ href="#"
3170
+ role="tab"
3171
+ id="secondary-nav-sub-6-link"
3172
+ >
3173
+ <span class="pf-v6-c-tabs__item-text">Item 6</span>
3174
+ </a>
3175
+ </li>
3176
+ </ul>
2939
3177
 
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>
3178
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3179
+ <button
3180
+ class="pf-v6-c-button pf-m-small pf-m-plain"
3181
+ type="button"
3182
+ aria-label="Scroll right"
3183
+ disabled
3184
+ >
3185
+ <span class="pf-v6-c-button__icon">
3186
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3187
+ </span>
3188
+ </button>
3189
+ </div>
3190
+ </nav>
2951
3191
  </div>
2952
- </nav>
3192
+ </div>
2953
3193
  </div>
2954
3194
  </div>
2955
3195
  <div class="pf-v6-c-compass__profile">
@@ -4647,204 +4887,296 @@ wrapperTag: div
4647
4887
  </svg>
4648
4888
  </div>
4649
4889
  <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">
4890
+ <div class="pf-v6-c-compass__panel pf-m-pill">
4891
+ <div class="pf-v6-c-compass__nav-content">
4892
+ <div class="pf-v6-c-compass__nav-home">
4656
4893
  <button
4657
- class="pf-v6-c-button pf-m-small pf-m-plain"
4894
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
4658
4895
  type="button"
4659
- aria-label="Scroll left"
4660
- disabled
4896
+ aria-label="Home"
4661
4897
  >
4662
4898
  <span class="pf-v6-c-button__icon">
4663
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4899
+ <svg
4900
+ fill="none"
4901
+ width="1em"
4902
+ height="1em"
4903
+ class="pf-v6-svg"
4904
+ viewBox="0 0 20 20"
4905
+ xmlns="http://www.w3.org/2000/svg"
4906
+ aria-hidden="true"
4907
+ >
4908
+ <path
4909
+ d="M8.33268 13.334H11.666"
4910
+ stroke="currentcolor"
4911
+ stroke-width="1.5"
4912
+ stroke-linecap="round"
4913
+ stroke-linejoin="round"
4914
+ />
4915
+ <path
4916
+ d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
4917
+ stroke="currentcolor"
4918
+ stroke-width="1.5"
4919
+ stroke-linecap="round"
4920
+ stroke-linejoin="round"
4921
+ />
4922
+ <path
4923
+ 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"
4924
+ stroke="currentcolor"
4925
+ stroke-width="1.5"
4926
+ stroke-linecap="round"
4927
+ stroke-linejoin="round"
4928
+ />
4929
+ </svg>
4664
4930
  </span>
4665
4931
  </button>
4666
4932
  </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"
4933
+ <div class="pf-v6-c-compass__nav-main">
4934
+ <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Primary nav">
4935
+ <div
4936
+ class="pf-v6-c-tabs__scroll-button"
4937
+ aria-hidden="true"
4697
4938
  >
4698
- <span class="pf-v6-c-tabs__item-text">Database</span>
4699
- </a>
4700
- </li>
4939
+ <button
4940
+ class="pf-v6-c-button pf-m-small pf-m-plain"
4941
+ type="button"
4942
+ aria-label="Scroll left"
4943
+ disabled
4944
+ >
4945
+ <span class="pf-v6-c-button__icon">
4946
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
4947
+ </span>
4948
+ </button>
4949
+ </div>
4950
+ <ul class="pf-v6-c-tabs__list" role="tablist">
4951
+ <li class="pf-v6-c-tabs__item" role="presentation">
4952
+ <a
4953
+ class="pf-v6-c-tabs__link"
4954
+ href="#"
4955
+ role="tab"
4956
+ id="primary-nav-users-link"
4957
+ >
4958
+ <span class="pf-v6-c-tabs__item-text">Users</span>
4959
+ </a>
4960
+ </li>
4961
+ <li
4962
+ class="pf-v6-c-tabs__item pf-m-current"
4963
+ role="presentation"
4964
+ >
4965
+ <a
4966
+ class="pf-v6-c-tabs__link"
4967
+ href="#"
4968
+ role="tab"
4969
+ id="primary-nav-containers-link"
4970
+ >
4971
+ <span class="pf-v6-c-tabs__item-text">Containers</span>
4972
+ </a>
4973
+ </li>
4974
+ <li class="pf-v6-c-tabs__item" role="presentation">
4975
+ <a
4976
+ class="pf-v6-c-tabs__link"
4977
+ href="#"
4978
+ role="tab"
4979
+ id="primary-nav-database-link"
4980
+ >
4981
+ <span class="pf-v6-c-tabs__item-text">Database</span>
4982
+ </a>
4983
+ </li>
4701
4984
 
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>
4985
+ <li class="pf-v6-c-tabs__item" role="presentation">
4986
+ <a
4987
+ class="pf-v6-c-tabs__link"
4988
+ href="#"
4989
+ role="tab"
4990
+ id="primary-nav-server-link"
4991
+ >
4992
+ <span class="pf-v6-c-tabs__item-text">Server</span>
4993
+ </a>
4994
+ </li>
4995
+ <li class="pf-v6-c-tabs__item" role="presentation">
4996
+ <a
4997
+ class="pf-v6-c-tabs__link"
4998
+ href="#"
4999
+ role="tab"
5000
+ id="primary-nav-system-link"
5001
+ >
5002
+ <span class="pf-v6-c-tabs__item-text">System</span>
5003
+ </a>
5004
+ </li>
5005
+ <li class="pf-v6-c-tabs__item" role="presentation">
5006
+ <a
5007
+ class="pf-v6-c-tabs__link"
5008
+ href="#"
5009
+ role="tab"
5010
+ id="primary-nav-network-wired-link"
5011
+ >
5012
+ <span class="pf-v6-c-tabs__item-text">Network</span>
5013
+ </a>
5014
+ </li>
5015
+ </ul>
4733
5016
 
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>
5017
+ <div
5018
+ class="pf-v6-c-tabs__scroll-button"
5019
+ aria-hidden="true"
5020
+ >
5021
+ <button
5022
+ class="pf-v6-c-button pf-m-small pf-m-plain"
5023
+ type="button"
5024
+ aria-label="Scroll right"
5025
+ disabled
5026
+ >
5027
+ <span class="pf-v6-c-button__icon">
5028
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
5029
+ </span>
5030
+ </button>
5031
+ </div>
5032
+ </nav>
4745
5033
  </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">
5034
+ <div class="pf-v6-c-compass__nav-search">
4754
5035
  <button
4755
- class="pf-v6-c-button pf-m-small pf-m-plain"
5036
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
4756
5037
  type="button"
4757
- aria-label="Scroll left"
4758
- disabled
5038
+ aria-label="Search"
4759
5039
  >
4760
5040
  <span class="pf-v6-c-button__icon">
4761
- <i class="fas fa-angle-left" aria-hidden="true"></i>
5041
+ <svg
5042
+ fill="none"
5043
+ width="1em"
5044
+ height="1em"
5045
+ class="pf-v6-svg"
5046
+ viewBox="0 0 20 20"
5047
+ xmlns="http://www.w3.org/2000/svg"
5048
+ aria-hidden="true"
5049
+ >
5050
+ <path
5051
+ d="M14.166 14.166L17.4993 17.4993"
5052
+ stroke="currentcolor"
5053
+ stroke-width="1.5"
5054
+ stroke-linecap="round"
5055
+ stroke-linejoin="round"
5056
+ />
5057
+ <path
5058
+ 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"
5059
+ stroke="currentcolor"
5060
+ stroke-width="1.5"
5061
+ stroke-linecap="round"
5062
+ stroke-linejoin="round"
5063
+ />
5064
+ </svg>
4762
5065
  </span>
4763
5066
  </button>
4764
5067
  </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"
5068
+ </div>
5069
+ </div>
5070
+ <div class="pf-v6-c-compass__panel pf-m-pill">
5071
+ <div class="pf-v6-c-compass__nav-content">
5072
+ <div class="pf-v6-c-compass__nav-main">
5073
+ <nav
5074
+ class="pf-v6-c-tabs pf-m-nav pf-m-subtab"
5075
+ aria-label="Secondary nav"
4789
5076
  >
4790
- <a
4791
- class="pf-v6-c-tabs__link"
4792
- href="#"
4793
- role="tab"
4794
- id="secondary-nav-sub-3-link"
5077
+ <div
5078
+ class="pf-v6-c-tabs__scroll-button"
5079
+ aria-hidden="true"
4795
5080
  >
4796
- <span class="pf-v6-c-tabs__item-text">Item 3</span>
4797
- </a>
4798
- </li>
5081
+ <button
5082
+ class="pf-v6-c-button pf-m-small pf-m-plain"
5083
+ type="button"
5084
+ aria-label="Scroll left"
5085
+ disabled
5086
+ >
5087
+ <span class="pf-v6-c-button__icon">
5088
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
5089
+ </span>
5090
+ </button>
5091
+ </div>
5092
+ <ul class="pf-v6-c-tabs__list" role="tablist">
5093
+ <li class="pf-v6-c-tabs__item" role="presentation">
5094
+ <a
5095
+ class="pf-v6-c-tabs__link"
5096
+ href="#"
5097
+ role="tab"
5098
+ id="secondary-nav-sub-1-link"
5099
+ >
5100
+ <span class="pf-v6-c-tabs__item-text">Item 1</span>
5101
+ </a>
5102
+ </li>
5103
+ <li class="pf-v6-c-tabs__item" role="presentation">
5104
+ <a
5105
+ class="pf-v6-c-tabs__link"
5106
+ href="#"
5107
+ role="tab"
5108
+ id="secondary-nav-sub-2-link"
5109
+ >
5110
+ <span class="pf-v6-c-tabs__item-text">Item 2</span>
5111
+ </a>
5112
+ </li>
5113
+ <li
5114
+ class="pf-v6-c-tabs__item pf-m-current"
5115
+ role="presentation"
5116
+ >
5117
+ <a
5118
+ class="pf-v6-c-tabs__link"
5119
+ href="#"
5120
+ role="tab"
5121
+ id="secondary-nav-sub-3-link"
5122
+ >
5123
+ <span class="pf-v6-c-tabs__item-text">Item 3</span>
5124
+ </a>
5125
+ </li>
4799
5126
 
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>
5127
+ <li class="pf-v6-c-tabs__item" role="presentation">
5128
+ <a
5129
+ class="pf-v6-c-tabs__link pf-m-disabled"
5130
+ aria-disabled="true"
5131
+ tabindex="-1"
5132
+ href="#"
5133
+ role="tab"
5134
+ id="secondary-nav-sub-disabled-link"
5135
+ >
5136
+ <span class="pf-v6-c-tabs__item-text">Disabled</span>
5137
+ </a>
5138
+ </li>
5139
+ <li class="pf-v6-c-tabs__item" role="presentation">
5140
+ <a
5141
+ class="pf-v6-c-tabs__link pf-m-aria-disabled"
5142
+ aria-disabled="true"
5143
+ href="#"
5144
+ role="tab"
5145
+ id="secondary-nav-sub-aria-disabled-link"
5146
+ >
5147
+ <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
5148
+ </a>
5149
+ </li>
5150
+ <li class="pf-v6-c-tabs__item" role="presentation">
5151
+ <a
5152
+ class="pf-v6-c-tabs__link"
5153
+ href="#"
5154
+ role="tab"
5155
+ id="secondary-nav-sub-6-link"
5156
+ >
5157
+ <span class="pf-v6-c-tabs__item-text">Item 6</span>
5158
+ </a>
5159
+ </li>
5160
+ </ul>
4834
5161
 
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>
5162
+ <div
5163
+ class="pf-v6-c-tabs__scroll-button"
5164
+ aria-hidden="true"
5165
+ >
5166
+ <button
5167
+ class="pf-v6-c-button pf-m-small pf-m-plain"
5168
+ type="button"
5169
+ aria-label="Scroll right"
5170
+ disabled
5171
+ >
5172
+ <span class="pf-v6-c-button__icon">
5173
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
5174
+ </span>
5175
+ </button>
5176
+ </div>
5177
+ </nav>
4846
5178
  </div>
4847
- </nav>
5179
+ </div>
4848
5180
  </div>
4849
5181
  </div>
4850
5182
  <div class="pf-v6-c-compass__profile">