@patternfly/patternfly 6.5.0-prerelease.54 → 6.5.0-prerelease.55

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 (84) hide show
  1. package/assets/images/compass--hero-bg.png +0 -0
  2. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  3. package/assets/images/compass--wallpaper-light.jpg +0 -0
  4. package/assets/images/glass-brand-dark.jpg +0 -0
  5. package/assets/images/glass-brand-dark.png +0 -0
  6. package/assets/images/glass-brand-light.jpg +0 -0
  7. package/assets/images/glass-brand-light.png +0 -0
  8. package/base/patternfly-variables.css +4238 -784
  9. package/base/patternfly-variables.scss +23 -21
  10. package/base/tokens/tokens-dark.scss +17 -17
  11. package/base/tokens/tokens-default.scss +18 -16
  12. package/base/tokens/tokens-glass-dark.scss +21 -4
  13. package/base/tokens/tokens-glass.scss +17 -4
  14. package/base/tokens/tokens-local.scss +4 -3
  15. package/base/tokens/tokens-palette.scss +1 -1
  16. package/base/tokens/tokens-redhat-dark.scss +432 -2
  17. package/base/tokens/tokens-redhat-glass-dark.scss +432 -4
  18. package/base/tokens/tokens-redhat-glass.scss +748 -4
  19. package/base/tokens/tokens-redhat-highcontrast-dark.scss +400 -3
  20. package/base/tokens/tokens-redhat-highcontrast.scss +635 -3
  21. package/base/tokens/tokens-redhat.scss +786 -2
  22. package/components/Accordion/accordion.css +10 -0
  23. package/components/Accordion/accordion.scss +11 -0
  24. package/components/Button/button.css +0 -14
  25. package/components/Button/button.scss +1 -16
  26. package/components/Card/card.css +13 -0
  27. package/components/Card/card.scss +20 -0
  28. package/components/Compass/compass.css +6 -6
  29. package/components/Compass/compass.scss +6 -6
  30. package/components/DataList/data-list.css +1 -1
  31. package/components/DataList/data-list.scss +1 -0
  32. package/components/Drawer/drawer.css +11 -6
  33. package/components/Drawer/drawer.scss +24 -11
  34. package/components/Login/login.css +7 -3
  35. package/components/Login/login.scss +7 -3
  36. package/components/Masthead/masthead.css +11 -3
  37. package/components/Masthead/masthead.scss +14 -4
  38. package/components/MenuToggle/menu-toggle.scss +1 -1
  39. package/components/Nav/nav.scss +1 -1
  40. package/components/Page/page.css +115 -8
  41. package/components/Page/page.scss +123 -11
  42. package/components/Panel/panel.css +14 -0
  43. package/components/Panel/panel.scss +18 -0
  44. package/components/Table/table-grid.css +4 -4
  45. package/components/Table/table-grid.scss +4 -4
  46. package/components/Table/table.css +12 -7
  47. package/components/Table/table.scss +13 -9
  48. package/components/_index.css +204 -52
  49. package/docs/components/Accordion/examples/Accordion.md +1 -0
  50. package/docs/components/Card/examples/Card.md +1 -0
  51. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  52. package/docs/components/Page/examples/Page.md +47 -37
  53. package/docs/components/Panel/examples/Panel.md +12 -0
  54. package/docs/demos/AboutModal/examples/AboutModal.md +40 -38
  55. package/docs/demos/Alert/examples/Alert.md +120 -114
  56. package/docs/demos/BackToTop/examples/BackToTop.md +40 -38
  57. package/docs/demos/Banner/examples/Banner.md +80 -76
  58. package/docs/demos/CardView/examples/CardView.md +297 -271
  59. package/docs/demos/Compass/examples/Compass.md +1409 -2732
  60. package/docs/demos/Dashboard/examples/Dashboard.md +40 -38
  61. package/docs/demos/DataList/examples/DataList.md +160 -152
  62. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -114
  63. package/docs/demos/Drawer/examples/Drawer.md +200 -190
  64. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -228
  65. package/docs/demos/Masthead/examples/Masthead.md +320 -304
  66. package/docs/demos/Modal/examples/Modal.md +240 -228
  67. package/docs/demos/Nav/examples/Nav.md +2302 -600
  68. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +180 -170
  69. package/docs/demos/Page/examples/Page.md +606 -568
  70. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -266
  71. package/docs/demos/Skeleton/examples/Skeleton.md +40 -38
  72. package/docs/demos/Table/examples/Table.md +640 -604
  73. package/docs/demos/Tabs/examples/Tabs.md +240 -228
  74. package/docs/demos/Toolbar/examples/Toolbar.md +80 -76
  75. package/docs/demos/Wizard/examples/Wizard.md +360 -342
  76. package/package.json +1 -1
  77. package/patternfly-base-no-globals.css +4238 -784
  78. package/patternfly-base.css +4238 -784
  79. package/patternfly-no-globals.css +4356 -733
  80. package/patternfly.css +4356 -733
  81. package/patternfly.min.css +1 -1
  82. package/patternfly.min.css.map +1 -1
  83. package/patternfly.scss +27 -0
  84. package/sass-utilities/scss-variables.scss +1 -1
package/docs/components/Page/examples/Page.md CHANGED
@@ -52,7 +52,9 @@ wrapperTag: div
52
52
  </div>
53
53
  </header>
54
54
  <div class="pf-v6-c-page__sidebar">
55
- <div class="pf-v6-c-page__sidebar-body">Navigation</div>
55
+ <div class="pf-v6-c-page__sidebar-main">
56
+ <div class="pf-v6-c-page__sidebar-body">Navigation</div>
57
+ </div>
56
58
  </div>
57
59
  <div class="pf-v6-c-page__main-container" tabindex="-1">
58
60
  <main class="pf-v6-c-page__main" tabindex="-1">
@@ -208,12 +210,14 @@ wrapperTag: div
208
210
  </div>
209
211
  </header>
210
212
  <div class="pf-v6-c-page__sidebar">
211
- <div class="pf-v6-c-page__sidebar-body">Navigation</div>
212
- <div class="pf-v6-c-page__sidebar-body pf-m-fill">inset content</div>
213
- <div
214
- class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-inset-none"
215
- >content that is not inset</div>
216
- <div class="pf-v6-c-page__sidebar-body pf-m-no-fill">footer content</div>
213
+ <div class="pf-v6-c-page__sidebar-main">
214
+ <div class="pf-v6-c-page__sidebar-body">Navigation</div>
215
+ <div class="pf-v6-c-page__sidebar-body pf-m-fill">inset content</div>
216
+ <div
217
+ class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-inset-none"
218
+ >content that is not inset</div>
219
+ <div class="pf-v6-c-page__sidebar-body pf-m-no-fill">footer content</div>
220
+ </div>
217
221
  </div>
218
222
  <div class="pf-v6-c-page__main-container" tabindex="-1">
219
223
  <main class="pf-v6-c-page__main" tabindex="-1">
@@ -340,7 +344,9 @@ wrapperTag: div
340
344
  </div>
341
345
  </header>
342
346
  <div class="pf-v6-c-page__sidebar">
343
- <div class="pf-v6-c-page__sidebar-body">Navigation</div>
347
+ <div class="pf-v6-c-page__sidebar-main">
348
+ <div class="pf-v6-c-page__sidebar-body">Navigation</div>
349
+ </div>
344
350
  </div>
345
351
  <div class="pf-v6-c-page__main-container" tabindex="-1">
346
352
  <main class="pf-v6-c-page__main" tabindex="-1">
@@ -418,7 +424,9 @@ wrapperTag: div
418
424
  </div>
419
425
  </header>
420
426
  <div class="pf-v6-c-page__sidebar">
421
- <div class="pf-v6-c-page__sidebar-body">Navigation</div>
427
+ <div class="pf-v6-c-page__sidebar-main">
428
+ <div class="pf-v6-c-page__sidebar-body">Navigation</div>
429
+ </div>
422
430
  </div>
423
431
  <div class="pf-v6-c-page__main-container" tabindex="-1">
424
432
  <main class="pf-v6-c-page__main" tabindex="-1">
@@ -519,34 +527,36 @@ wrapperTag: div
519
527
  ```html isBeta
520
528
  <div class="pf-v6-c-page pf-m-dock">
521
529
  <div class="pf-v6-c-page__dock">
522
- <header class="pf-v6-c-masthead pf-m-docked">
523
- <div class="pf-v6-c-masthead__main">
524
- <div class="pf-v6-c-masthead__brand">logo</div>
525
- </div>
526
- <div class="pf-v6-c-masthead__content">
527
- <button
528
- class="pf-v6-c-button pf-m-plain"
529
- type="button"
530
- aria-label="Chat"
531
- >
532
- <span class="pf-v6-c-button__icon">
533
- <svg
534
- class="pf-v6-svg"
535
- viewBox="0 0 512 512"
536
- fill="currentColor"
537
- aria-hidden="true"
538
- role="img"
539
- width="1em"
540
- height="1em"
541
- >
542
- <path
543
- d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
544
- />
545
- </svg>
546
- </span>
547
- </button>
548
- </div>
549
- </header>
530
+ <div class="pf-v6-c-page__dock-main">
531
+ <header class="pf-v6-c-masthead pf-m-docked">
532
+ <div class="pf-v6-c-masthead__main">
533
+ <div class="pf-v6-c-masthead__brand">logo</div>
534
+ </div>
535
+ <div class="pf-v6-c-masthead__content">
536
+ <button
537
+ class="pf-v6-c-button pf-m-plain"
538
+ type="button"
539
+ aria-label="Chat"
540
+ >
541
+ <span class="pf-v6-c-button__icon">
542
+ <svg
543
+ class="pf-v6-svg"
544
+ viewBox="0 0 512 512"
545
+ fill="currentColor"
546
+ aria-hidden="true"
547
+ role="img"
548
+ width="1em"
549
+ height="1em"
550
+ >
551
+ <path
552
+ d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
553
+ />
554
+ </svg>
555
+ </span>
556
+ </button>
557
+ </div>
558
+ </header>
559
+ </div>
550
560
  </div>
551
561
  <div class="pf-v6-c-page__main-container" tabindex="-1">
552
562
  <main class="pf-v6-c-page__main" tabindex="-1">
package/docs/components/Panel/examples/Panel.md CHANGED
@@ -157,6 +157,17 @@ cssPrefix: pf-v6-c-panel
157
157
 
158
158
  ```
159
159
 
160
+ ### Pill
161
+
162
+ ```html
163
+ <div class="pf-v6-c-panel pf-m-pill">
164
+ <div class="pf-v6-c-panel__main">
165
+ <div class="pf-v6-c-panel__main-body">Main content</div>
166
+ </div>
167
+ </div>
168
+
169
+ ```
170
+
160
171
  ## Documentation
161
172
 
162
173
  ### Usage
@@ -173,3 +184,4 @@ cssPrefix: pf-v6-c-panel
173
184
  | `.pf-m-raised` | `.pf-v6-c-panel` | Modifies the panel for raised styles. |
174
185
  | `.pf-m-scrollable` | `.pf-v6-c-panel` | Modifies the panel for scrollable styles. |
175
186
  | `.pf-m-secondary` | `.pf-v6-c-panel` | Modifies the panel for secondary styles. |
187
+ | `.pf-m-pill` | `.pf-v6-c-panel` | Modifies the panel for pill border radius. |
package/docs/demos/AboutModal/examples/AboutModal.md CHANGED
@@ -197,44 +197,46 @@ This demo implements the about modal, including the backdrop.
197
197
  </div>
198
198
  </header>
199
199
  <div class="pf-v6-c-page__sidebar">
200
- <div class="pf-v6-c-page__sidebar-body">
201
- <nav
202
- class="pf-v6-c-nav"
203
- id="modal-basic-example-primary-nav"
204
- aria-label="Global"
205
- >
206
- <ul class="pf-v6-c-nav__list" role="list">
207
- <li class="pf-v6-c-nav__item">
208
- <a href="#" class="pf-v6-c-nav__link">
209
- <span class="pf-v6-c-nav__link-text">System panel</span>
210
- </a>
211
- </li>
212
- <li class="pf-v6-c-nav__item">
213
- <a
214
- href="#"
215
- class="pf-v6-c-nav__link pf-m-current"
216
- aria-current="page"
217
- >
218
- <span class="pf-v6-c-nav__link-text">Policy</span>
219
- </a>
220
- </li>
221
- <li class="pf-v6-c-nav__item">
222
- <a href="#" class="pf-v6-c-nav__link">
223
- <span class="pf-v6-c-nav__link-text">Authentication</span>
224
- </a>
225
- </li>
226
- <li class="pf-v6-c-nav__item">
227
- <a href="#" class="pf-v6-c-nav__link">
228
- <span class="pf-v6-c-nav__link-text">Network services</span>
229
- </a>
230
- </li>
231
- <li class="pf-v6-c-nav__item">
232
- <a href="#" class="pf-v6-c-nav__link">
233
- <span class="pf-v6-c-nav__link-text">Server</span>
234
- </a>
235
- </li>
236
- </ul>
237
- </nav>
200
+ <div class="pf-v6-c-page__sidebar-main">
201
+ <div class="pf-v6-c-page__sidebar-body">
202
+ <nav
203
+ class="pf-v6-c-nav"
204
+ id="modal-basic-example-primary-nav"
205
+ aria-label="Global"
206
+ >
207
+ <ul class="pf-v6-c-nav__list" role="list">
208
+ <li class="pf-v6-c-nav__item">
209
+ <a href="#" class="pf-v6-c-nav__link">
210
+ <span class="pf-v6-c-nav__link-text">System panel</span>
211
+ </a>
212
+ </li>
213
+ <li class="pf-v6-c-nav__item">
214
+ <a
215
+ href="#"
216
+ class="pf-v6-c-nav__link pf-m-current"
217
+ aria-current="page"
218
+ >
219
+ <span class="pf-v6-c-nav__link-text">Policy</span>
220
+ </a>
221
+ </li>
222
+ <li class="pf-v6-c-nav__item">
223
+ <a href="#" class="pf-v6-c-nav__link">
224
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
225
+ </a>
226
+ </li>
227
+ <li class="pf-v6-c-nav__item">
228
+ <a href="#" class="pf-v6-c-nav__link">
229
+ <span class="pf-v6-c-nav__link-text">Network services</span>
230
+ </a>
231
+ </li>
232
+ <li class="pf-v6-c-nav__item">
233
+ <a href="#" class="pf-v6-c-nav__link">
234
+ <span class="pf-v6-c-nav__link-text">Server</span>
235
+ </a>
236
+ </li>
237
+ </ul>
238
+ </nav>
239
+ </div>
238
240
  </div>
239
241
  </div>
240
242
  <div class="pf-v6-c-page__main-container" tabindex="-1">
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -195,44 +195,46 @@ section: components
195
195
  </div>
196
196
  </header>
197
197
  <div class="pf-v6-c-page__sidebar">
198
- <div class="pf-v6-c-page__sidebar-body">
199
- <nav
200
- class="pf-v6-c-nav"
201
- id="alert-basic-example-primary-nav"
202
- aria-label="Global"
203
- >
204
- <ul class="pf-v6-c-nav__list" role="list">
205
- <li class="pf-v6-c-nav__item">
206
- <a href="#" class="pf-v6-c-nav__link">
207
- <span class="pf-v6-c-nav__link-text">System panel</span>
208
- </a>
209
- </li>
210
- <li class="pf-v6-c-nav__item">
211
- <a
212
- href="#"
213
- class="pf-v6-c-nav__link pf-m-current"
214
- aria-current="page"
215
- >
216
- <span class="pf-v6-c-nav__link-text">Policy</span>
217
- </a>
218
- </li>
219
- <li class="pf-v6-c-nav__item">
220
- <a href="#" class="pf-v6-c-nav__link">
221
- <span class="pf-v6-c-nav__link-text">Authentication</span>
222
- </a>
223
- </li>
224
- <li class="pf-v6-c-nav__item">
225
- <a href="#" class="pf-v6-c-nav__link">
226
- <span class="pf-v6-c-nav__link-text">Network services</span>
227
- </a>
228
- </li>
229
- <li class="pf-v6-c-nav__item">
230
- <a href="#" class="pf-v6-c-nav__link">
231
- <span class="pf-v6-c-nav__link-text">Server</span>
232
- </a>
233
- </li>
234
- </ul>
235
- </nav>
198
+ <div class="pf-v6-c-page__sidebar-main">
199
+ <div class="pf-v6-c-page__sidebar-body">
200
+ <nav
201
+ class="pf-v6-c-nav"
202
+ id="alert-basic-example-primary-nav"
203
+ aria-label="Global"
204
+ >
205
+ <ul class="pf-v6-c-nav__list" role="list">
206
+ <li class="pf-v6-c-nav__item">
207
+ <a href="#" class="pf-v6-c-nav__link">
208
+ <span class="pf-v6-c-nav__link-text">System panel</span>
209
+ </a>
210
+ </li>
211
+ <li class="pf-v6-c-nav__item">
212
+ <a
213
+ href="#"
214
+ class="pf-v6-c-nav__link pf-m-current"
215
+ aria-current="page"
216
+ >
217
+ <span class="pf-v6-c-nav__link-text">Policy</span>
218
+ </a>
219
+ </li>
220
+ <li class="pf-v6-c-nav__item">
221
+ <a href="#" class="pf-v6-c-nav__link">
222
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
223
+ </a>
224
+ </li>
225
+ <li class="pf-v6-c-nav__item">
226
+ <a href="#" class="pf-v6-c-nav__link">
227
+ <span class="pf-v6-c-nav__link-text">Network services</span>
228
+ </a>
229
+ </li>
230
+ <li class="pf-v6-c-nav__item">
231
+ <a href="#" class="pf-v6-c-nav__link">
232
+ <span class="pf-v6-c-nav__link-text">Server</span>
233
+ </a>
234
+ </li>
235
+ </ul>
236
+ </nav>
237
+ </div>
236
238
  </div>
237
239
  </div>
238
240
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -702,44 +704,46 @@ section: components
702
704
  </div>
703
705
  </header>
704
706
  <div class="pf-v6-c-page__sidebar">
705
- <div class="pf-v6-c-page__sidebar-body">
706
- <nav
707
- class="pf-v6-c-nav"
708
- id="alert-horizontal-example-primary-nav"
709
- aria-label="Global"
710
- >
711
- <ul class="pf-v6-c-nav__list" role="list">
712
- <li class="pf-v6-c-nav__item">
713
- <a href="#" class="pf-v6-c-nav__link">
714
- <span class="pf-v6-c-nav__link-text">System panel</span>
715
- </a>
716
- </li>
717
- <li class="pf-v6-c-nav__item">
718
- <a
719
- href="#"
720
- class="pf-v6-c-nav__link pf-m-current"
721
- aria-current="page"
722
- >
723
- <span class="pf-v6-c-nav__link-text">Policy</span>
724
- </a>
725
- </li>
726
- <li class="pf-v6-c-nav__item">
727
- <a href="#" class="pf-v6-c-nav__link">
728
- <span class="pf-v6-c-nav__link-text">Authentication</span>
729
- </a>
730
- </li>
731
- <li class="pf-v6-c-nav__item">
732
- <a href="#" class="pf-v6-c-nav__link">
733
- <span class="pf-v6-c-nav__link-text">Network services</span>
734
- </a>
735
- </li>
736
- <li class="pf-v6-c-nav__item">
737
- <a href="#" class="pf-v6-c-nav__link">
738
- <span class="pf-v6-c-nav__link-text">Server</span>
739
- </a>
740
- </li>
741
- </ul>
742
- </nav>
707
+ <div class="pf-v6-c-page__sidebar-main">
708
+ <div class="pf-v6-c-page__sidebar-body">
709
+ <nav
710
+ class="pf-v6-c-nav"
711
+ id="alert-horizontal-example-primary-nav"
712
+ aria-label="Global"
713
+ >
714
+ <ul class="pf-v6-c-nav__list" role="list">
715
+ <li class="pf-v6-c-nav__item">
716
+ <a href="#" class="pf-v6-c-nav__link">
717
+ <span class="pf-v6-c-nav__link-text">System panel</span>
718
+ </a>
719
+ </li>
720
+ <li class="pf-v6-c-nav__item">
721
+ <a
722
+ href="#"
723
+ class="pf-v6-c-nav__link pf-m-current"
724
+ aria-current="page"
725
+ >
726
+ <span class="pf-v6-c-nav__link-text">Policy</span>
727
+ </a>
728
+ </li>
729
+ <li class="pf-v6-c-nav__item">
730
+ <a href="#" class="pf-v6-c-nav__link">
731
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
732
+ </a>
733
+ </li>
734
+ <li class="pf-v6-c-nav__item">
735
+ <a href="#" class="pf-v6-c-nav__link">
736
+ <span class="pf-v6-c-nav__link-text">Network services</span>
737
+ </a>
738
+ </li>
739
+ <li class="pf-v6-c-nav__item">
740
+ <a href="#" class="pf-v6-c-nav__link">
741
+ <span class="pf-v6-c-nav__link-text">Server</span>
742
+ </a>
743
+ </li>
744
+ </ul>
745
+ </nav>
746
+ </div>
743
747
  </div>
744
748
  </div>
745
749
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1252,44 +1256,46 @@ section: components
1252
1256
  </div>
1253
1257
  </header>
1254
1258
  <div class="pf-v6-c-page__sidebar">
1255
- <div class="pf-v6-c-page__sidebar-body">
1256
- <nav
1257
- class="pf-v6-c-nav"
1258
- id="alert-stacked-example-primary-nav"
1259
- aria-label="Global"
1260
- >
1261
- <ul class="pf-v6-c-nav__list" role="list">
1262
- <li class="pf-v6-c-nav__item">
1263
- <a href="#" class="pf-v6-c-nav__link">
1264
- <span class="pf-v6-c-nav__link-text">System panel</span>
1265
- </a>
1266
- </li>
1267
- <li class="pf-v6-c-nav__item">
1268
- <a
1269
- href="#"
1270
- class="pf-v6-c-nav__link pf-m-current"
1271
- aria-current="page"
1272
- >
1273
- <span class="pf-v6-c-nav__link-text">Policy</span>
1274
- </a>
1275
- </li>
1276
- <li class="pf-v6-c-nav__item">
1277
- <a href="#" class="pf-v6-c-nav__link">
1278
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1279
- </a>
1280
- </li>
1281
- <li class="pf-v6-c-nav__item">
1282
- <a href="#" class="pf-v6-c-nav__link">
1283
- <span class="pf-v6-c-nav__link-text">Network services</span>
1284
- </a>
1285
- </li>
1286
- <li class="pf-v6-c-nav__item">
1287
- <a href="#" class="pf-v6-c-nav__link">
1288
- <span class="pf-v6-c-nav__link-text">Server</span>
1289
- </a>
1290
- </li>
1291
- </ul>
1292
- </nav>
1259
+ <div class="pf-v6-c-page__sidebar-main">
1260
+ <div class="pf-v6-c-page__sidebar-body">
1261
+ <nav
1262
+ class="pf-v6-c-nav"
1263
+ id="alert-stacked-example-primary-nav"
1264
+ aria-label="Global"
1265
+ >
1266
+ <ul class="pf-v6-c-nav__list" role="list">
1267
+ <li class="pf-v6-c-nav__item">
1268
+ <a href="#" class="pf-v6-c-nav__link">
1269
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1270
+ </a>
1271
+ </li>
1272
+ <li class="pf-v6-c-nav__item">
1273
+ <a
1274
+ href="#"
1275
+ class="pf-v6-c-nav__link pf-m-current"
1276
+ aria-current="page"
1277
+ >
1278
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1279
+ </a>
1280
+ </li>
1281
+ <li class="pf-v6-c-nav__item">
1282
+ <a href="#" class="pf-v6-c-nav__link">
1283
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1284
+ </a>
1285
+ </li>
1286
+ <li class="pf-v6-c-nav__item">
1287
+ <a href="#" class="pf-v6-c-nav__link">
1288
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1289
+ </a>
1290
+ </li>
1291
+ <li class="pf-v6-c-nav__item">
1292
+ <a href="#" class="pf-v6-c-nav__link">
1293
+ <span class="pf-v6-c-nav__link-text">Server</span>
1294
+ </a>
1295
+ </li>
1296
+ </ul>
1297
+ </nav>
1298
+ </div>
1293
1299
  </div>
1294
1300
  </div>
1295
1301
  <div class="pf-v6-c-page__main-container" tabindex="-1">
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -196,44 +196,46 @@ cssPrefix: pf-d-back-to-top
196
196
  </div>
197
197
  </header>
198
198
  <div class="pf-v6-c-page__sidebar">
199
- <div class="pf-v6-c-page__sidebar-body">
200
- <nav
201
- class="pf-v6-c-nav"
202
- id="back-to-top-basic-example-primary-nav"
203
- aria-label="Global"
204
- >
205
- <ul class="pf-v6-c-nav__list" role="list">
206
- <li class="pf-v6-c-nav__item">
207
- <a href="#" class="pf-v6-c-nav__link">
208
- <span class="pf-v6-c-nav__link-text">System panel</span>
209
- </a>
210
- </li>
211
- <li class="pf-v6-c-nav__item">
212
- <a
213
- href="#"
214
- class="pf-v6-c-nav__link pf-m-current"
215
- aria-current="page"
216
- >
217
- <span class="pf-v6-c-nav__link-text">Policy</span>
218
- </a>
219
- </li>
220
- <li class="pf-v6-c-nav__item">
221
- <a href="#" class="pf-v6-c-nav__link">
222
- <span class="pf-v6-c-nav__link-text">Authentication</span>
223
- </a>
224
- </li>
225
- <li class="pf-v6-c-nav__item">
226
- <a href="#" class="pf-v6-c-nav__link">
227
- <span class="pf-v6-c-nav__link-text">Network services</span>
228
- </a>
229
- </li>
230
- <li class="pf-v6-c-nav__item">
231
- <a href="#" class="pf-v6-c-nav__link">
232
- <span class="pf-v6-c-nav__link-text">Server</span>
233
- </a>
234
- </li>
235
- </ul>
236
- </nav>
199
+ <div class="pf-v6-c-page__sidebar-main">
200
+ <div class="pf-v6-c-page__sidebar-body">
201
+ <nav
202
+ class="pf-v6-c-nav"
203
+ id="back-to-top-basic-example-primary-nav"
204
+ aria-label="Global"
205
+ >
206
+ <ul class="pf-v6-c-nav__list" role="list">
207
+ <li class="pf-v6-c-nav__item">
208
+ <a href="#" class="pf-v6-c-nav__link">
209
+ <span class="pf-v6-c-nav__link-text">System panel</span>
210
+ </a>
211
+ </li>
212
+ <li class="pf-v6-c-nav__item">
213
+ <a
214
+ href="#"
215
+ class="pf-v6-c-nav__link pf-m-current"
216
+ aria-current="page"
217
+ >
218
+ <span class="pf-v6-c-nav__link-text">Policy</span>
219
+ </a>
220
+ </li>
221
+ <li class="pf-v6-c-nav__item">
222
+ <a href="#" class="pf-v6-c-nav__link">
223
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
224
+ </a>
225
+ </li>
226
+ <li class="pf-v6-c-nav__item">
227
+ <a href="#" class="pf-v6-c-nav__link">
228
+ <span class="pf-v6-c-nav__link-text">Network services</span>
229
+ </a>
230
+ </li>
231
+ <li class="pf-v6-c-nav__item">
232
+ <a href="#" class="pf-v6-c-nav__link">
233
+ <span class="pf-v6-c-nav__link-text">Server</span>
234
+ </a>
235
+ </li>
236
+ </ul>
237
+ </nav>
238
+ </div>
237
239
  </div>
238
240
  </div>
239
241
  <div class="pf-v6-c-page__main-container" tabindex="-1">