@patternfly/patternfly 6.5.0-prerelease.22 → 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 +17 -3
  5. package/docs/demos/Compass/examples/Compass.md +1022 -689
  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
@@ -1,6 +1,7 @@
1
1
  ---
2
2
  id: Compass
3
- section: components
3
+ section: PatternFly-AI
4
+ subsection: Generative UIs
4
5
  wrapperTag: div
5
6
  ---## Examples
6
7
 
@@ -107,198 +108,278 @@ wrapperTag: div
107
108
  </svg>
108
109
  </div>
109
110
  <div class="pf-v6-c-compass__nav">
110
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
111
- <nav
112
- class="pf-v6-c-tabs pf-m-nav pf-m-inset-xl"
113
- aria-label="Primary nav"
114
- >
115
- <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">
116
114
  <button
117
- class="pf-v6-c-button pf-m-small pf-m-plain"
115
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
118
116
  type="button"
119
- aria-label="Scroll left"
120
- disabled
117
+ aria-label="Home"
121
118
  >
122
119
  <span class="pf-v6-c-button__icon">
123
- <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>
124
151
  </span>
125
152
  </button>
126
153
  </div>
127
- <ul class="pf-v6-c-tabs__list" role="tablist">
128
- <li class="pf-v6-c-tabs__item" role="presentation">
129
- <a
130
- class="pf-v6-c-tabs__link"
131
- href="#"
132
- role="tab"
133
- id="primary-nav-users-link"
134
- >
135
- <span class="pf-v6-c-tabs__item-text">Users</span>
136
- </a>
137
- </li>
138
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
139
- <a
140
- class="pf-v6-c-tabs__link"
141
- href="#"
142
- role="tab"
143
- id="primary-nav-containers-link"
144
- >
145
- <span class="pf-v6-c-tabs__item-text">Containers</span>
146
- </a>
147
- </li>
148
- <li class="pf-v6-c-tabs__item" role="presentation">
149
- <a
150
- class="pf-v6-c-tabs__link"
151
- href="#"
152
- role="tab"
153
- id="primary-nav-database-link"
154
- >
155
- <span class="pf-v6-c-tabs__item-text">Database</span>
156
- </a>
157
- </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>
158
199
 
159
- <li class="pf-v6-c-tabs__item" role="presentation">
160
- <a
161
- class="pf-v6-c-tabs__link"
162
- href="#"
163
- role="tab"
164
- id="primary-nav-server-link"
165
- >
166
- <span class="pf-v6-c-tabs__item-text">Server</span>
167
- </a>
168
- </li>
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-system-link"
175
- >
176
- <span class="pf-v6-c-tabs__item-text">System</span>
177
- </a>
178
- </li>
179
- <li class="pf-v6-c-tabs__item" role="presentation">
180
- <a
181
- class="pf-v6-c-tabs__link"
182
- href="#"
183
- role="tab"
184
- id="primary-nav-network-wired-link"
185
- >
186
- <span class="pf-v6-c-tabs__item-text">Network</span>
187
- </a>
188
- </li>
189
- </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>
190
231
 
191
- <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">
192
247
  <button
193
- class="pf-v6-c-button pf-m-small pf-m-plain"
248
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
194
249
  type="button"
195
- aria-label="Scroll right"
196
- disabled
250
+ aria-label="Search"
197
251
  >
198
252
  <span class="pf-v6-c-button__icon">
199
- <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>
200
277
  </span>
201
278
  </button>
202
279
  </div>
203
- </nav>
280
+ </div>
204
281
  </div>
205
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
206
- <nav
207
- class="pf-v6-c-tabs pf-m-nav pf-m-subtab pf-m-inset-xl"
208
- aria-label="Secondary nav"
209
- >
210
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
211
- <button
212
- class="pf-v6-c-button pf-m-small pf-m-plain"
213
- type="button"
214
- aria-label="Scroll left"
215
- 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"
216
288
  >
217
- <span class="pf-v6-c-button__icon">
218
- <i class="fas fa-angle-left" aria-hidden="true"></i>
219
- </span>
220
- </button>
221
- </div>
222
- <ul class="pf-v6-c-tabs__list" role="tablist">
223
- <li class="pf-v6-c-tabs__item" role="presentation">
224
- <a
225
- class="pf-v6-c-tabs__link"
226
- href="#"
227
- role="tab"
228
- id="secondary-nav-sub-1-link"
229
- >
230
- <span class="pf-v6-c-tabs__item-text">Item 1</span>
231
- </a>
232
- </li>
233
- <li class="pf-v6-c-tabs__item" role="presentation">
234
- <a
235
- class="pf-v6-c-tabs__link"
236
- href="#"
237
- role="tab"
238
- id="secondary-nav-sub-2-link"
239
- >
240
- <span class="pf-v6-c-tabs__item-text">Item 2</span>
241
- </a>
242
- </li>
243
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
244
- <a
245
- class="pf-v6-c-tabs__link"
246
- href="#"
247
- role="tab"
248
- id="secondary-nav-sub-3-link"
249
- >
250
- <span class="pf-v6-c-tabs__item-text">Item 3</span>
251
- </a>
252
- </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>
253
332
 
254
- <li class="pf-v6-c-tabs__item" role="presentation">
255
- <a
256
- class="pf-v6-c-tabs__link pf-m-disabled"
257
- aria-disabled="true"
258
- tabindex="-1"
259
- href="#"
260
- role="tab"
261
- id="secondary-nav-sub-disabled-link"
262
- >
263
- <span class="pf-v6-c-tabs__item-text">Disabled</span>
264
- </a>
265
- </li>
266
- <li class="pf-v6-c-tabs__item" role="presentation">
267
- <a
268
- class="pf-v6-c-tabs__link pf-m-aria-disabled"
269
- aria-disabled="true"
270
- href="#"
271
- role="tab"
272
- id="secondary-nav-sub-aria-disabled-link"
273
- >
274
- <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
275
- </a>
276
- </li>
277
- <li class="pf-v6-c-tabs__item" role="presentation">
278
- <a
279
- class="pf-v6-c-tabs__link"
280
- href="#"
281
- role="tab"
282
- id="secondary-nav-sub-6-link"
283
- >
284
- <span class="pf-v6-c-tabs__item-text">Item 6</span>
285
- </a>
286
- </li>
287
- </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>
288
367
 
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 right"
294
- disabled
295
- >
296
- <span class="pf-v6-c-button__icon">
297
- <i class="fas fa-angle-right" aria-hidden="true"></i>
298
- </span>
299
- </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>
300
381
  </div>
301
- </nav>
382
+ </div>
302
383
  </div>
303
384
  </div>
304
385
  <div class="pf-v6-c-compass__profile">
@@ -1319,198 +1400,278 @@ wrapperTag: div
1319
1400
  </svg>
1320
1401
  </div>
1321
1402
  <div class="pf-v6-c-compass__nav">
1322
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
1323
- <nav
1324
- class="pf-v6-c-tabs pf-m-nav pf-m-inset-xl"
1325
- aria-label="Primary nav"
1326
- >
1327
- <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">
1328
1406
  <button
1329
- class="pf-v6-c-button pf-m-small pf-m-plain"
1407
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1330
1408
  type="button"
1331
- aria-label="Scroll left"
1332
- disabled
1409
+ aria-label="Home"
1333
1410
  >
1334
1411
  <span class="pf-v6-c-button__icon">
1335
- <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>
1336
1443
  </span>
1337
1444
  </button>
1338
1445
  </div>
1339
- <ul class="pf-v6-c-tabs__list" role="tablist">
1340
- <li class="pf-v6-c-tabs__item" role="presentation">
1341
- <a
1342
- class="pf-v6-c-tabs__link"
1343
- href="#"
1344
- role="tab"
1345
- id="primary-nav-users-link"
1346
- >
1347
- <span class="pf-v6-c-tabs__item-text">Users</span>
1348
- </a>
1349
- </li>
1350
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1351
- <a
1352
- class="pf-v6-c-tabs__link"
1353
- href="#"
1354
- role="tab"
1355
- id="primary-nav-containers-link"
1356
- >
1357
- <span class="pf-v6-c-tabs__item-text">Containers</span>
1358
- </a>
1359
- </li>
1360
- <li class="pf-v6-c-tabs__item" role="presentation">
1361
- <a
1362
- class="pf-v6-c-tabs__link"
1363
- href="#"
1364
- role="tab"
1365
- id="primary-nav-database-link"
1366
- >
1367
- <span class="pf-v6-c-tabs__item-text">Database</span>
1368
- </a>
1369
- </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>
1370
1491
 
1371
- <li class="pf-v6-c-tabs__item" role="presentation">
1372
- <a
1373
- class="pf-v6-c-tabs__link"
1374
- href="#"
1375
- role="tab"
1376
- id="primary-nav-server-link"
1377
- >
1378
- <span class="pf-v6-c-tabs__item-text">Server</span>
1379
- </a>
1380
- </li>
1381
- <li class="pf-v6-c-tabs__item" role="presentation">
1382
- <a
1383
- class="pf-v6-c-tabs__link"
1384
- href="#"
1385
- role="tab"
1386
- id="primary-nav-system-link"
1387
- >
1388
- <span class="pf-v6-c-tabs__item-text">System</span>
1389
- </a>
1390
- </li>
1391
- <li class="pf-v6-c-tabs__item" role="presentation">
1392
- <a
1393
- class="pf-v6-c-tabs__link"
1394
- href="#"
1395
- role="tab"
1396
- id="primary-nav-network-wired-link"
1397
- >
1398
- <span class="pf-v6-c-tabs__item-text">Network</span>
1399
- </a>
1400
- </li>
1401
- </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>
1402
1523
 
1403
- <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">
1404
1539
  <button
1405
- class="pf-v6-c-button pf-m-small pf-m-plain"
1540
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1406
1541
  type="button"
1407
- aria-label="Scroll right"
1408
- disabled
1542
+ aria-label="Search"
1409
1543
  >
1410
1544
  <span class="pf-v6-c-button__icon">
1411
- <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>
1412
1569
  </span>
1413
1570
  </button>
1414
1571
  </div>
1415
- </nav>
1572
+ </div>
1416
1573
  </div>
1417
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
1418
- <nav
1419
- class="pf-v6-c-tabs pf-m-nav pf-m-subtab pf-m-inset-xl"
1420
- aria-label="Secondary nav"
1421
- >
1422
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1423
- <button
1424
- class="pf-v6-c-button pf-m-small pf-m-plain"
1425
- type="button"
1426
- aria-label="Scroll left"
1427
- 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"
1428
1580
  >
1429
- <span class="pf-v6-c-button__icon">
1430
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1431
- </span>
1432
- </button>
1433
- </div>
1434
- <ul class="pf-v6-c-tabs__list" role="tablist">
1435
- <li class="pf-v6-c-tabs__item" role="presentation">
1436
- <a
1437
- class="pf-v6-c-tabs__link"
1438
- href="#"
1439
- role="tab"
1440
- id="secondary-nav-sub-1-link"
1441
- >
1442
- <span class="pf-v6-c-tabs__item-text">Item 1</span>
1443
- </a>
1444
- </li>
1445
- <li class="pf-v6-c-tabs__item" role="presentation">
1446
- <a
1447
- class="pf-v6-c-tabs__link"
1448
- href="#"
1449
- role="tab"
1450
- id="secondary-nav-sub-2-link"
1451
- >
1452
- <span class="pf-v6-c-tabs__item-text">Item 2</span>
1453
- </a>
1454
- </li>
1455
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1456
- <a
1457
- class="pf-v6-c-tabs__link"
1458
- href="#"
1459
- role="tab"
1460
- id="secondary-nav-sub-3-link"
1461
- >
1462
- <span class="pf-v6-c-tabs__item-text">Item 3</span>
1463
- </a>
1464
- </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>
1465
1624
 
1466
- <li class="pf-v6-c-tabs__item" role="presentation">
1467
- <a
1468
- class="pf-v6-c-tabs__link pf-m-disabled"
1469
- aria-disabled="true"
1470
- tabindex="-1"
1471
- href="#"
1472
- role="tab"
1473
- id="secondary-nav-sub-disabled-link"
1474
- >
1475
- <span class="pf-v6-c-tabs__item-text">Disabled</span>
1476
- </a>
1477
- </li>
1478
- <li class="pf-v6-c-tabs__item" role="presentation">
1479
- <a
1480
- class="pf-v6-c-tabs__link pf-m-aria-disabled"
1481
- aria-disabled="true"
1482
- href="#"
1483
- role="tab"
1484
- id="secondary-nav-sub-aria-disabled-link"
1485
- >
1486
- <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
1487
- </a>
1488
- </li>
1489
- <li class="pf-v6-c-tabs__item" role="presentation">
1490
- <a
1491
- class="pf-v6-c-tabs__link"
1492
- href="#"
1493
- role="tab"
1494
- id="secondary-nav-sub-6-link"
1495
- >
1496
- <span class="pf-v6-c-tabs__item-text">Item 6</span>
1497
- </a>
1498
- </li>
1499
- </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>
1500
1659
 
1501
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1502
- <button
1503
- class="pf-v6-c-button pf-m-small pf-m-plain"
1504
- type="button"
1505
- aria-label="Scroll right"
1506
- disabled
1507
- >
1508
- <span class="pf-v6-c-button__icon">
1509
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1510
- </span>
1511
- </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>
1512
1673
  </div>
1513
- </nav>
1674
+ </div>
1514
1675
  </div>
1515
1676
  </div>
1516
1677
  <div class="pf-v6-c-compass__profile">
@@ -2757,198 +2918,278 @@ wrapperTag: div
2757
2918
  </svg>
2758
2919
  </div>
2759
2920
  <div class="pf-v6-c-compass__nav">
2760
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
2761
- <nav
2762
- class="pf-v6-c-tabs pf-m-nav pf-m-inset-xl"
2763
- aria-label="Primary nav"
2764
- >
2765
- <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">
2766
2924
  <button
2767
- class="pf-v6-c-button pf-m-small pf-m-plain"
2925
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
2768
2926
  type="button"
2769
- aria-label="Scroll left"
2770
- disabled
2927
+ aria-label="Home"
2771
2928
  >
2772
2929
  <span class="pf-v6-c-button__icon">
2773
- <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>
2774
2961
  </span>
2775
2962
  </button>
2776
2963
  </div>
2777
- <ul class="pf-v6-c-tabs__list" role="tablist">
2778
- <li class="pf-v6-c-tabs__item" role="presentation">
2779
- <a
2780
- class="pf-v6-c-tabs__link"
2781
- href="#"
2782
- role="tab"
2783
- id="primary-nav-users-link"
2784
- >
2785
- <span class="pf-v6-c-tabs__item-text">Users</span>
2786
- </a>
2787
- </li>
2788
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
2789
- <a
2790
- class="pf-v6-c-tabs__link"
2791
- href="#"
2792
- role="tab"
2793
- id="primary-nav-containers-link"
2794
- >
2795
- <span class="pf-v6-c-tabs__item-text">Containers</span>
2796
- </a>
2797
- </li>
2798
- <li class="pf-v6-c-tabs__item" role="presentation">
2799
- <a
2800
- class="pf-v6-c-tabs__link"
2801
- href="#"
2802
- role="tab"
2803
- id="primary-nav-database-link"
2804
- >
2805
- <span class="pf-v6-c-tabs__item-text">Database</span>
2806
- </a>
2807
- </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>
2808
3009
 
2809
- <li class="pf-v6-c-tabs__item" role="presentation">
2810
- <a
2811
- class="pf-v6-c-tabs__link"
2812
- href="#"
2813
- role="tab"
2814
- id="primary-nav-server-link"
2815
- >
2816
- <span class="pf-v6-c-tabs__item-text">Server</span>
2817
- </a>
2818
- </li>
2819
- <li class="pf-v6-c-tabs__item" role="presentation">
2820
- <a
2821
- class="pf-v6-c-tabs__link"
2822
- href="#"
2823
- role="tab"
2824
- id="primary-nav-system-link"
2825
- >
2826
- <span class="pf-v6-c-tabs__item-text">System</span>
2827
- </a>
2828
- </li>
2829
- <li class="pf-v6-c-tabs__item" role="presentation">
2830
- <a
2831
- class="pf-v6-c-tabs__link"
2832
- href="#"
2833
- role="tab"
2834
- id="primary-nav-network-wired-link"
2835
- >
2836
- <span class="pf-v6-c-tabs__item-text">Network</span>
2837
- </a>
2838
- </li>
2839
- </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>
2840
3041
 
2841
- <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">
2842
3057
  <button
2843
- class="pf-v6-c-button pf-m-small pf-m-plain"
3058
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
2844
3059
  type="button"
2845
- aria-label="Scroll right"
2846
- disabled
3060
+ aria-label="Search"
2847
3061
  >
2848
3062
  <span class="pf-v6-c-button__icon">
2849
- <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>
2850
3087
  </span>
2851
3088
  </button>
2852
3089
  </div>
2853
- </nav>
3090
+ </div>
2854
3091
  </div>
2855
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
2856
- <nav
2857
- class="pf-v6-c-tabs pf-m-nav pf-m-subtab pf-m-inset-xl"
2858
- aria-label="Secondary nav"
2859
- >
2860
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2861
- <button
2862
- class="pf-v6-c-button pf-m-small pf-m-plain"
2863
- type="button"
2864
- aria-label="Scroll left"
2865
- 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"
2866
3098
  >
2867
- <span class="pf-v6-c-button__icon">
2868
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2869
- </span>
2870
- </button>
2871
- </div>
2872
- <ul class="pf-v6-c-tabs__list" role="tablist">
2873
- <li class="pf-v6-c-tabs__item" role="presentation">
2874
- <a
2875
- class="pf-v6-c-tabs__link"
2876
- href="#"
2877
- role="tab"
2878
- id="secondary-nav-sub-1-link"
2879
- >
2880
- <span class="pf-v6-c-tabs__item-text">Item 1</span>
2881
- </a>
2882
- </li>
2883
- <li class="pf-v6-c-tabs__item" role="presentation">
2884
- <a
2885
- class="pf-v6-c-tabs__link"
2886
- href="#"
2887
- role="tab"
2888
- id="secondary-nav-sub-2-link"
2889
- >
2890
- <span class="pf-v6-c-tabs__item-text">Item 2</span>
2891
- </a>
2892
- </li>
2893
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
2894
- <a
2895
- class="pf-v6-c-tabs__link"
2896
- href="#"
2897
- role="tab"
2898
- id="secondary-nav-sub-3-link"
2899
- >
2900
- <span class="pf-v6-c-tabs__item-text">Item 3</span>
2901
- </a>
2902
- </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>
2903
3142
 
2904
- <li class="pf-v6-c-tabs__item" role="presentation">
2905
- <a
2906
- class="pf-v6-c-tabs__link pf-m-disabled"
2907
- aria-disabled="true"
2908
- tabindex="-1"
2909
- href="#"
2910
- role="tab"
2911
- id="secondary-nav-sub-disabled-link"
2912
- >
2913
- <span class="pf-v6-c-tabs__item-text">Disabled</span>
2914
- </a>
2915
- </li>
2916
- <li class="pf-v6-c-tabs__item" role="presentation">
2917
- <a
2918
- class="pf-v6-c-tabs__link pf-m-aria-disabled"
2919
- aria-disabled="true"
2920
- href="#"
2921
- role="tab"
2922
- id="secondary-nav-sub-aria-disabled-link"
2923
- >
2924
- <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
2925
- </a>
2926
- </li>
2927
- <li class="pf-v6-c-tabs__item" role="presentation">
2928
- <a
2929
- class="pf-v6-c-tabs__link"
2930
- href="#"
2931
- role="tab"
2932
- id="secondary-nav-sub-6-link"
2933
- >
2934
- <span class="pf-v6-c-tabs__item-text">Item 6</span>
2935
- </a>
2936
- </li>
2937
- </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>
2938
3177
 
2939
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2940
- <button
2941
- class="pf-v6-c-button pf-m-small pf-m-plain"
2942
- type="button"
2943
- aria-label="Scroll right"
2944
- disabled
2945
- >
2946
- <span class="pf-v6-c-button__icon">
2947
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2948
- </span>
2949
- </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>
2950
3191
  </div>
2951
- </nav>
3192
+ </div>
2952
3193
  </div>
2953
3194
  </div>
2954
3195
  <div class="pf-v6-c-compass__profile">
@@ -4646,204 +4887,296 @@ wrapperTag: div
4646
4887
  </svg>
4647
4888
  </div>
4648
4889
  <div class="pf-v6-c-compass__nav">
4649
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
4650
- <nav
4651
- class="pf-v6-c-tabs pf-m-nav pf-m-inset-xl"
4652
- aria-label="Primary nav"
4653
- >
4654
- <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">
4655
4893
  <button
4656
- class="pf-v6-c-button pf-m-small pf-m-plain"
4894
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
4657
4895
  type="button"
4658
- aria-label="Scroll left"
4659
- disabled
4896
+ aria-label="Home"
4660
4897
  >
4661
4898
  <span class="pf-v6-c-button__icon">
4662
- <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>
4663
4930
  </span>
4664
4931
  </button>
4665
4932
  </div>
4666
- <ul class="pf-v6-c-tabs__list" role="tablist">
4667
- <li class="pf-v6-c-tabs__item" role="presentation">
4668
- <a
4669
- class="pf-v6-c-tabs__link"
4670
- href="#"
4671
- role="tab"
4672
- id="primary-nav-users-link"
4673
- >
4674
- <span class="pf-v6-c-tabs__item-text">Users</span>
4675
- </a>
4676
- </li>
4677
- <li
4678
- class="pf-v6-c-tabs__item pf-m-current"
4679
- role="presentation"
4680
- >
4681
- <a
4682
- class="pf-v6-c-tabs__link"
4683
- href="#"
4684
- role="tab"
4685
- id="primary-nav-containers-link"
4686
- >
4687
- <span class="pf-v6-c-tabs__item-text">Containers</span>
4688
- </a>
4689
- </li>
4690
- <li class="pf-v6-c-tabs__item" role="presentation">
4691
- <a
4692
- class="pf-v6-c-tabs__link"
4693
- href="#"
4694
- role="tab"
4695
- 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"
4696
4938
  >
4697
- <span class="pf-v6-c-tabs__item-text">Database</span>
4698
- </a>
4699
- </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>
4700
4984
 
4701
- <li class="pf-v6-c-tabs__item" role="presentation">
4702
- <a
4703
- class="pf-v6-c-tabs__link"
4704
- href="#"
4705
- role="tab"
4706
- id="primary-nav-server-link"
4707
- >
4708
- <span class="pf-v6-c-tabs__item-text">Server</span>
4709
- </a>
4710
- </li>
4711
- <li class="pf-v6-c-tabs__item" role="presentation">
4712
- <a
4713
- class="pf-v6-c-tabs__link"
4714
- href="#"
4715
- role="tab"
4716
- id="primary-nav-system-link"
4717
- >
4718
- <span class="pf-v6-c-tabs__item-text">System</span>
4719
- </a>
4720
- </li>
4721
- <li class="pf-v6-c-tabs__item" role="presentation">
4722
- <a
4723
- class="pf-v6-c-tabs__link"
4724
- href="#"
4725
- role="tab"
4726
- id="primary-nav-network-wired-link"
4727
- >
4728
- <span class="pf-v6-c-tabs__item-text">Network</span>
4729
- </a>
4730
- </li>
4731
- </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>
4732
5016
 
4733
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
4734
- <button
4735
- class="pf-v6-c-button pf-m-small pf-m-plain"
4736
- type="button"
4737
- aria-label="Scroll right"
4738
- disabled
4739
- >
4740
- <span class="pf-v6-c-button__icon">
4741
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4742
- </span>
4743
- </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>
4744
5033
  </div>
4745
- </nav>
4746
- </div>
4747
- <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
4748
- <nav
4749
- class="pf-v6-c-tabs pf-m-nav pf-m-subtab pf-m-inset-xl"
4750
- aria-label="Secondary nav"
4751
- >
4752
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
5034
+ <div class="pf-v6-c-compass__nav-search">
4753
5035
  <button
4754
- class="pf-v6-c-button pf-m-small pf-m-plain"
5036
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
4755
5037
  type="button"
4756
- aria-label="Scroll left"
4757
- disabled
5038
+ aria-label="Search"
4758
5039
  >
4759
5040
  <span class="pf-v6-c-button__icon">
4760
- <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>
4761
5065
  </span>
4762
5066
  </button>
4763
5067
  </div>
4764
- <ul class="pf-v6-c-tabs__list" role="tablist">
4765
- <li class="pf-v6-c-tabs__item" role="presentation">
4766
- <a
4767
- class="pf-v6-c-tabs__link"
4768
- href="#"
4769
- role="tab"
4770
- id="secondary-nav-sub-1-link"
4771
- >
4772
- <span class="pf-v6-c-tabs__item-text">Item 1</span>
4773
- </a>
4774
- </li>
4775
- <li class="pf-v6-c-tabs__item" role="presentation">
4776
- <a
4777
- class="pf-v6-c-tabs__link"
4778
- href="#"
4779
- role="tab"
4780
- id="secondary-nav-sub-2-link"
4781
- >
4782
- <span class="pf-v6-c-tabs__item-text">Item 2</span>
4783
- </a>
4784
- </li>
4785
- <li
4786
- class="pf-v6-c-tabs__item pf-m-current"
4787
- 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"
4788
5076
  >
4789
- <a
4790
- class="pf-v6-c-tabs__link"
4791
- href="#"
4792
- role="tab"
4793
- id="secondary-nav-sub-3-link"
5077
+ <div
5078
+ class="pf-v6-c-tabs__scroll-button"
5079
+ aria-hidden="true"
4794
5080
  >
4795
- <span class="pf-v6-c-tabs__item-text">Item 3</span>
4796
- </a>
4797
- </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>
4798
5126
 
4799
- <li class="pf-v6-c-tabs__item" role="presentation">
4800
- <a
4801
- class="pf-v6-c-tabs__link pf-m-disabled"
4802
- aria-disabled="true"
4803
- tabindex="-1"
4804
- href="#"
4805
- role="tab"
4806
- id="secondary-nav-sub-disabled-link"
4807
- >
4808
- <span class="pf-v6-c-tabs__item-text">Disabled</span>
4809
- </a>
4810
- </li>
4811
- <li class="pf-v6-c-tabs__item" role="presentation">
4812
- <a
4813
- class="pf-v6-c-tabs__link pf-m-aria-disabled"
4814
- aria-disabled="true"
4815
- href="#"
4816
- role="tab"
4817
- id="secondary-nav-sub-aria-disabled-link"
4818
- >
4819
- <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
4820
- </a>
4821
- </li>
4822
- <li class="pf-v6-c-tabs__item" role="presentation">
4823
- <a
4824
- class="pf-v6-c-tabs__link"
4825
- href="#"
4826
- role="tab"
4827
- id="secondary-nav-sub-6-link"
4828
- >
4829
- <span class="pf-v6-c-tabs__item-text">Item 6</span>
4830
- </a>
4831
- </li>
4832
- </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>
4833
5161
 
4834
- <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
4835
- <button
4836
- class="pf-v6-c-button pf-m-small pf-m-plain"
4837
- type="button"
4838
- aria-label="Scroll right"
4839
- disabled
4840
- >
4841
- <span class="pf-v6-c-button__icon">
4842
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4843
- </span>
4844
- </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>
4845
5178
  </div>
4846
- </nav>
5179
+ </div>
4847
5180
  </div>
4848
5181
  </div>
4849
5182
  <div class="pf-v6-c-compass__profile">