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

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 (85) 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 +772 -690
  9. package/base/patternfly-variables.scss +23 -21
  10. package/base/tokens/tokens-dark.scss +18 -18
  11. package/base/tokens/tokens-default.scss +18 -17
  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 +9 -2
  17. package/base/tokens/tokens-redhat-glass-dark.scss +28 -4
  18. package/base/tokens/tokens-redhat-glass.scss +19 -4
  19. package/base/tokens/tokens-redhat-highcontrast-dark.scss +7 -4
  20. package/base/tokens/tokens-redhat-highcontrast.scss +4 -3
  21. package/base/tokens/tokens-redhat.scss +1 -1
  22. package/components/Accordion/accordion.css +10 -0
  23. package/components/Accordion/accordion.scss +11 -0
  24. package/components/Button/button.css +2 -16
  25. package/components/Button/button.scss +3 -17
  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.css +1 -2
  39. package/components/MenuToggle/menu-toggle.scss +2 -3
  40. package/components/Nav/nav.scss +1 -1
  41. package/components/Page/page.css +115 -8
  42. package/components/Page/page.scss +123 -11
  43. package/components/Panel/panel.css +14 -0
  44. package/components/Panel/panel.scss +18 -0
  45. package/components/Table/table-grid.css +4 -4
  46. package/components/Table/table-grid.scss +4 -4
  47. package/components/Table/table.css +12 -7
  48. package/components/Table/table.scss +13 -9
  49. package/components/_index.css +207 -56
  50. package/docs/components/Accordion/examples/Accordion.md +1 -0
  51. package/docs/components/Card/examples/Card.md +1 -0
  52. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  53. package/docs/components/Page/examples/Page.md +47 -37
  54. package/docs/components/Panel/examples/Panel.md +12 -0
  55. package/docs/demos/AboutModal/examples/AboutModal.md +40 -38
  56. package/docs/demos/Alert/examples/Alert.md +120 -114
  57. package/docs/demos/BackToTop/examples/BackToTop.md +40 -38
  58. package/docs/demos/Banner/examples/Banner.md +80 -76
  59. package/docs/demos/CardView/examples/CardView.md +297 -271
  60. package/docs/demos/Compass/examples/Compass.md +1409 -2732
  61. package/docs/demos/Dashboard/examples/Dashboard.md +40 -38
  62. package/docs/demos/DataList/examples/DataList.md +160 -152
  63. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -114
  64. package/docs/demos/Drawer/examples/Drawer.md +200 -190
  65. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -228
  66. package/docs/demos/Masthead/examples/Masthead.md +320 -304
  67. package/docs/demos/Modal/examples/Modal.md +240 -228
  68. package/docs/demos/Nav/examples/Nav.md +2302 -600
  69. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +180 -170
  70. package/docs/demos/Page/examples/Page.md +606 -568
  71. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -266
  72. package/docs/demos/Skeleton/examples/Skeleton.md +40 -38
  73. package/docs/demos/Table/examples/Table.md +640 -604
  74. package/docs/demos/Tabs/examples/Tabs.md +240 -228
  75. package/docs/demos/Toolbar/examples/Toolbar.md +80 -76
  76. package/docs/demos/Wizard/examples/Wizard.md +360 -342
  77. package/package.json +2 -2
  78. package/patternfly-base-no-globals.css +772 -690
  79. package/patternfly-base.css +772 -690
  80. package/patternfly-no-globals.css +931 -681
  81. package/patternfly.css +931 -681
  82. package/patternfly.min.css +1 -1
  83. package/patternfly.min.css.map +1 -1
  84. package/patternfly.scss +27 -0
  85. package/sass-utilities/scss-variables.scss +1 -1
package/docs/components/Card/examples/Card.md CHANGED
@@ -1937,4 +1937,5 @@ A card is a generic rectangular container that can be used to build other compon
1937
1937
  | `.pf-m-expanded` | `.pf-v6-c-card` | Modifies the card for the expanded state. |
1938
1938
  | `.pf-m-toggle-right` | `.pf-v6-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
1939
1939
  | `.pf-m-full-height` | `.pf-v6-c-card` | Modifies the card to full height of its parent. |
1940
+ | `.pf-m-glass` | `.pf-v6-c-card` | Applies glass styles when glass theme is enabled. |
1940
1941
  | `.pf-m-no-offset` | `.pf-v6-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |
package/docs/components/DragDrop/examples/DragDrop.css CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
  .pf-v6-c-draggable.pf-m-dragging {
6
- --pf-v6-c-draggable--m-dragging--BackgroundColor: var(--pf-t--global--background--color--primary--default);
6
+ --pf-v6-c-draggable--m-dragging--BackgroundColor: var(--pf-t--global--background--color--floating--default);
7
7
 
8
8
  position: absolute;
9
9
  inset-block-start: 23%;
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">