@patternfly/patternfly 6.0.0-alpha.31 → 6.0.0-alpha.32

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 (16) hide show
  1. package/components/Pagination/pagination.css +61 -121
  2. package/components/Pagination/pagination.scss +48 -127
  3. package/docs/components/Pagination/examples/Pagination.md +663 -637
  4. package/docs/components/Toolbar/examples/Toolbar.md +102 -100
  5. package/docs/demos/CardView/examples/CardView.md +102 -98
  6. package/docs/demos/DataList/examples/DataList.md +408 -392
  7. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +319 -299
  8. package/docs/demos/Table/examples/Table.md +1239 -1193
  9. package/docs/demos/Toolbar/examples/Toolbar.md +408 -392
  10. package/package.json +1 -1
  11. package/patternfly-no-globals.css +61 -125
  12. package/patternfly-theme-dark-unversioned.css +61 -125
  13. package/patternfly.css +61 -125
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
  16. package/components/Pagination/themes/dark/pagination.scss +0 -7
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -631,57 +631,59 @@ wrapperTag: div
631
631
 
632
632
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
633
633
  <div class="pf-v5-c-pagination pf-m-compact">
634
- <div class="pf-v5-c-options-menu">
635
- <button
636
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
637
- type="button"
638
- id="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
639
- aria-haspopup="listbox"
640
- aria-expanded="false"
641
- >
642
- <span class="pf-v5-c-options-menu__toggle-text">
643
- <b>1 - 10</b>&nbsp;of&nbsp;
644
- <b>36</b>
645
- </span>
646
- <div class="pf-v5-c-options-menu__toggle-icon">
647
- <i class="fas fa-caret-down" aria-hidden="true"></i>
648
- </div>
649
- </button>
650
- <ul
651
- class="pf-v5-c-options-menu__menu"
652
- role="menu"
653
- aria-labelledby="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
654
- hidden
655
- >
656
- <li role="none">
657
- <button
658
- class="pf-v5-c-options-menu__menu-item"
659
- type="button"
660
- role="menuitem"
661
- >5 per page</button>
662
- </li>
663
- <li role="none">
664
- <button
665
- class="pf-v5-c-options-menu__menu-item"
666
- type="button"
667
- role="menuitem"
668
- >
669
- 10 per page
670
- <div
671
- class="pf-v5-c-options-menu__menu-item-icon"
634
+ <div class="pf-v5-c-pagination__page-menu">
635
+ <div class="pf-v5-c-options-menu">
636
+ <button
637
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
638
+ type="button"
639
+ id="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
640
+ aria-haspopup="listbox"
641
+ aria-expanded="false"
642
+ >
643
+ <span class="pf-v5-c-options-menu__toggle-text">
644
+ <b>1 - 10</b>&nbsp;of&nbsp;
645
+ <b>36</b>
646
+ </span>
647
+ <div class="pf-v5-c-options-menu__toggle-icon">
648
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
649
+ </div>
650
+ </button>
651
+ <ul
652
+ class="pf-v5-c-options-menu__menu"
653
+ role="menu"
654
+ aria-labelledby="primary-detail-expanded-example-drawer-toolbar-top-pagination-toggle"
655
+ hidden
656
+ >
657
+ <li role="none">
658
+ <button
659
+ class="pf-v5-c-options-menu__menu-item"
660
+ type="button"
661
+ role="menuitem"
662
+ >5 per page</button>
663
+ </li>
664
+ <li role="none">
665
+ <button
666
+ class="pf-v5-c-options-menu__menu-item"
667
+ type="button"
668
+ role="menuitem"
672
669
  >
673
- <i class="fas fa-check" aria-hidden="true"></i>
674
- </div>
675
- </button>
676
- </li>
677
- <li role="none">
678
- <button
679
- class="pf-v5-c-options-menu__menu-item"
680
- type="button"
681
- role="menuitem"
682
- >20 per page</button>
683
- </li>
684
- </ul>
670
+ 10 per page
671
+ <div
672
+ class="pf-v5-c-options-menu__menu-item-icon"
673
+ >
674
+ <i class="fas fa-check" aria-hidden="true"></i>
675
+ </div>
676
+ </button>
677
+ </li>
678
+ <li role="none">
679
+ <button
680
+ class="pf-v5-c-options-menu__menu-item"
681
+ type="button"
682
+ role="menuitem"
683
+ >20 per page</button>
684
+ </li>
685
+ </ul>
686
+ </div>
685
687
  </div>
686
688
  <nav
687
689
  class="pf-v5-c-pagination__nav"
@@ -1917,57 +1919,59 @@ wrapperTag: div
1917
1919
 
1918
1920
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
1919
1921
  <div class="pf-v5-c-pagination pf-m-compact">
1920
- <div class="pf-v5-c-options-menu">
1921
- <button
1922
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1923
- type="button"
1924
- id="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1925
- aria-haspopup="listbox"
1926
- aria-expanded="false"
1927
- >
1928
- <span class="pf-v5-c-options-menu__toggle-text">
1929
- <b>1 - 10</b>&nbsp;of&nbsp;
1930
- <b>36</b>
1931
- </span>
1932
- <div class="pf-v5-c-options-menu__toggle-icon">
1933
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1934
- </div>
1935
- </button>
1936
- <ul
1937
- class="pf-v5-c-options-menu__menu"
1938
- role="menu"
1939
- aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1940
- hidden
1941
- >
1942
- <li role="none">
1943
- <button
1944
- class="pf-v5-c-options-menu__menu-item"
1945
- type="button"
1946
- role="menuitem"
1947
- >5 per page</button>
1948
- </li>
1949
- <li role="none">
1950
- <button
1951
- class="pf-v5-c-options-menu__menu-item"
1952
- type="button"
1953
- role="menuitem"
1954
- >
1955
- 10 per page
1956
- <div
1957
- class="pf-v5-c-options-menu__menu-item-icon"
1922
+ <div class="pf-v5-c-pagination__page-menu">
1923
+ <div class="pf-v5-c-options-menu">
1924
+ <button
1925
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
1926
+ type="button"
1927
+ id="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1928
+ aria-haspopup="listbox"
1929
+ aria-expanded="false"
1930
+ >
1931
+ <span class="pf-v5-c-options-menu__toggle-text">
1932
+ <b>1 - 10</b>&nbsp;of&nbsp;
1933
+ <b>36</b>
1934
+ </span>
1935
+ <div class="pf-v5-c-options-menu__toggle-icon">
1936
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1937
+ </div>
1938
+ </button>
1939
+ <ul
1940
+ class="pf-v5-c-options-menu__menu"
1941
+ role="menu"
1942
+ aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-top-pagination-toggle"
1943
+ hidden
1944
+ >
1945
+ <li role="none">
1946
+ <button
1947
+ class="pf-v5-c-options-menu__menu-item"
1948
+ type="button"
1949
+ role="menuitem"
1950
+ >5 per page</button>
1951
+ </li>
1952
+ <li role="none">
1953
+ <button
1954
+ class="pf-v5-c-options-menu__menu-item"
1955
+ type="button"
1956
+ role="menuitem"
1958
1957
  >
1959
- <i class="fas fa-check" aria-hidden="true"></i>
1960
- </div>
1961
- </button>
1962
- </li>
1963
- <li role="none">
1964
- <button
1965
- class="pf-v5-c-options-menu__menu-item"
1966
- type="button"
1967
- role="menuitem"
1968
- >20 per page</button>
1969
- </li>
1970
- </ul>
1958
+ 10 per page
1959
+ <div
1960
+ class="pf-v5-c-options-menu__menu-item-icon"
1961
+ >
1962
+ <i class="fas fa-check" aria-hidden="true"></i>
1963
+ </div>
1964
+ </button>
1965
+ </li>
1966
+ <li role="none">
1967
+ <button
1968
+ class="pf-v5-c-options-menu__menu-item"
1969
+ type="button"
1970
+ role="menuitem"
1971
+ >20 per page</button>
1972
+ </li>
1973
+ </ul>
1974
+ </div>
1971
1975
  </div>
1972
1976
  <nav
1973
1977
  class="pf-v5-c-pagination__nav"
@@ -3074,57 +3078,59 @@ wrapperTag: div
3074
3078
 
3075
3079
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
3076
3080
  <div class="pf-v5-c-pagination pf-m-compact">
3077
- <div class="pf-v5-c-options-menu">
3078
- <button
3079
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3080
- type="button"
3081
- id="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
3082
- aria-haspopup="listbox"
3083
- aria-expanded="false"
3084
- >
3085
- <span class="pf-v5-c-options-menu__toggle-text">
3086
- <b>1 - 10</b>&nbsp;of&nbsp;
3087
- <b>36</b>
3088
- </span>
3089
- <div class="pf-v5-c-options-menu__toggle-icon">
3090
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3091
- </div>
3092
- </button>
3093
- <ul
3094
- class="pf-v5-c-options-menu__menu"
3095
- role="menu"
3096
- aria-labelledby="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
3097
- hidden
3098
- >
3099
- <li role="none">
3100
- <button
3101
- class="pf-v5-c-options-menu__menu-item"
3102
- type="button"
3103
- role="menuitem"
3104
- >5 per page</button>
3105
- </li>
3106
- <li role="none">
3107
- <button
3108
- class="pf-v5-c-options-menu__menu-item"
3109
- type="button"
3110
- role="menuitem"
3111
- >
3112
- 10 per page
3113
- <div
3114
- class="pf-v5-c-options-menu__menu-item-icon"
3115
- >
3116
- <i class="fas fa-check" aria-hidden="true"></i>
3117
- </div>
3118
- </button>
3119
- </li>
3120
- <li role="none">
3121
- <button
3122
- class="pf-v5-c-options-menu__menu-item"
3123
- type="button"
3124
- role="menuitem"
3125
- >20 per page</button>
3126
- </li>
3127
- </ul>
3081
+ <div class="pf-v5-c-pagination__page-menu">
3082
+ <div class="pf-v5-c-options-menu">
3083
+ <button
3084
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
3085
+ type="button"
3086
+ id="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
3087
+ aria-haspopup="listbox"
3088
+ aria-expanded="false"
3089
+ >
3090
+ <span class="pf-v5-c-options-menu__toggle-text">
3091
+ <b>1 - 10</b>&nbsp;of&nbsp;
3092
+ <b>36</b>
3093
+ </span>
3094
+ <div class="pf-v5-c-options-menu__toggle-icon">
3095
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3096
+ </div>
3097
+ </button>
3098
+ <ul
3099
+ class="pf-v5-c-options-menu__menu"
3100
+ role="menu"
3101
+ aria-labelledby="primary-detail-content-body-padding-example-drawer-toolbar-top-pagination-toggle"
3102
+ hidden
3103
+ >
3104
+ <li role="none">
3105
+ <button
3106
+ class="pf-v5-c-options-menu__menu-item"
3107
+ type="button"
3108
+ role="menuitem"
3109
+ >5 per page</button>
3110
+ </li>
3111
+ <li role="none">
3112
+ <button
3113
+ class="pf-v5-c-options-menu__menu-item"
3114
+ type="button"
3115
+ role="menuitem"
3116
+ >
3117
+ 10 per page
3118
+ <div
3119
+ class="pf-v5-c-options-menu__menu-item-icon"
3120
+ >
3121
+ <i class="fas fa-check" aria-hidden="true"></i>
3122
+ </div>
3123
+ </button>
3124
+ </li>
3125
+ <li role="none">
3126
+ <button
3127
+ class="pf-v5-c-options-menu__menu-item"
3128
+ type="button"
3129
+ role="menuitem"
3130
+ >20 per page</button>
3131
+ </li>
3132
+ </ul>
3133
+ </div>
3128
3134
  </div>
3129
3135
  <nav
3130
3136
  class="pf-v5-c-pagination__nav"
@@ -4116,55 +4122,57 @@ wrapperTag: div
4116
4122
 
4117
4123
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
4118
4124
  <div class="pf-v5-c-pagination pf-m-compact">
4119
- <div class="pf-v5-c-options-menu">
4120
- <button
4121
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
4122
- type="button"
4123
- id="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
4124
- aria-haspopup="listbox"
4125
- aria-expanded="false"
4126
- >
4127
- <span class="pf-v5-c-options-menu__toggle-text">
4128
- <b>1 - 10</b>&nbsp;of&nbsp;
4129
- <b>36</b>
4130
- </span>
4131
- <div class="pf-v5-c-options-menu__toggle-icon">
4132
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4133
- </div>
4134
- </button>
4135
- <ul
4136
- class="pf-v5-c-options-menu__menu"
4137
- role="menu"
4138
- aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
4139
- hidden
4140
- >
4141
- <li role="none">
4142
- <button
4143
- class="pf-v5-c-options-menu__menu-item"
4144
- type="button"
4145
- role="menuitem"
4146
- >5 per page</button>
4147
- </li>
4148
- <li role="none">
4149
- <button
4150
- class="pf-v5-c-options-menu__menu-item"
4151
- type="button"
4152
- role="menuitem"
4153
- >
4154
- 10 per page
4155
- <div class="pf-v5-c-options-menu__menu-item-icon">
4156
- <i class="fas fa-check" aria-hidden="true"></i>
4157
- </div>
4158
- </button>
4159
- </li>
4160
- <li role="none">
4161
- <button
4162
- class="pf-v5-c-options-menu__menu-item"
4163
- type="button"
4164
- role="menuitem"
4165
- >20 per page</button>
4166
- </li>
4167
- </ul>
4125
+ <div class="pf-v5-c-pagination__page-menu">
4126
+ <div class="pf-v5-c-options-menu">
4127
+ <button
4128
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
4129
+ type="button"
4130
+ id="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
4131
+ aria-haspopup="listbox"
4132
+ aria-expanded="false"
4133
+ >
4134
+ <span class="pf-v5-c-options-menu__toggle-text">
4135
+ <b>1 - 10</b>&nbsp;of&nbsp;
4136
+ <b>36</b>
4137
+ </span>
4138
+ <div class="pf-v5-c-options-menu__toggle-icon">
4139
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4140
+ </div>
4141
+ </button>
4142
+ <ul
4143
+ class="pf-v5-c-options-menu__menu"
4144
+ role="menu"
4145
+ aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-top-pagination-toggle"
4146
+ hidden
4147
+ >
4148
+ <li role="none">
4149
+ <button
4150
+ class="pf-v5-c-options-menu__menu-item"
4151
+ type="button"
4152
+ role="menuitem"
4153
+ >5 per page</button>
4154
+ </li>
4155
+ <li role="none">
4156
+ <button
4157
+ class="pf-v5-c-options-menu__menu-item"
4158
+ type="button"
4159
+ role="menuitem"
4160
+ >
4161
+ 10 per page
4162
+ <div class="pf-v5-c-options-menu__menu-item-icon">
4163
+ <i class="fas fa-check" aria-hidden="true"></i>
4164
+ </div>
4165
+ </button>
4166
+ </li>
4167
+ <li role="none">
4168
+ <button
4169
+ class="pf-v5-c-options-menu__menu-item"
4170
+ type="button"
4171
+ role="menuitem"
4172
+ >20 per page</button>
4173
+ </li>
4174
+ </ul>
4175
+ </div>
4168
4176
  </div>
4169
4177
  <nav
4170
4178
  class="pf-v5-c-pagination__nav"
@@ -6045,57 +6053,65 @@ wrapperTag: div
6045
6053
  <b>1 - 10</b> of
6046
6054
  <b>37</b>
6047
6055
  </div>
6048
- <div class="pf-v5-c-options-menu">
6049
- <button
6050
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6051
- type="button"
6052
- id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
6053
- aria-haspopup="listbox"
6054
- aria-expanded="false"
6055
- >
6056
- <span class="pf-v5-c-options-menu__toggle-text">
6057
- <b>1 - 10</b>&nbsp;of&nbsp;
6058
- <b>36</b>
6059
- </span>
6060
- <div class="pf-v5-c-options-menu__toggle-icon">
6061
- <i class="fas fa-caret-down" aria-hidden="true"></i>
6062
- </div>
6063
- </button>
6064
- <ul
6065
- class="pf-v5-c-options-menu__menu"
6066
- role="menu"
6067
- aria-labelledby="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
6068
- hidden
6069
- >
6070
- <li role="none">
6071
- <button
6072
- class="pf-v5-c-options-menu__menu-item"
6073
- type="button"
6074
- role="menuitem"
6075
- >5 per page</button>
6076
- </li>
6077
- <li role="none">
6078
- <button
6079
- class="pf-v5-c-options-menu__menu-item"
6080
- type="button"
6081
- role="menuitem"
6082
- >
6083
- 10 per page
6084
- <div
6085
- class="pf-v5-c-options-menu__menu-item-icon"
6056
+ <div class="pf-v5-c-pagination__page-menu">
6057
+ <div class="pf-v5-c-options-menu">
6058
+ <button
6059
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6060
+ type="button"
6061
+ id="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
6062
+ aria-haspopup="listbox"
6063
+ aria-expanded="false"
6064
+ >
6065
+ <span class="pf-v5-c-options-menu__toggle-text">
6066
+ <b>1 - 10</b>&nbsp;of&nbsp;
6067
+ <b>36</b>
6068
+ </span>
6069
+ <div class="pf-v5-c-options-menu__toggle-icon">
6070
+ <i
6071
+ class="fas fa-caret-down"
6072
+ aria-hidden="true"
6073
+ ></i>
6074
+ </div>
6075
+ </button>
6076
+ <ul
6077
+ class="pf-v5-c-options-menu__menu"
6078
+ role="menu"
6079
+ aria-labelledby="primary-detail-card-data-list-example-drawer-toolbar-card-toolbar-pagination-options-menu-toggle"
6080
+ hidden
6081
+ >
6082
+ <li role="none">
6083
+ <button
6084
+ class="pf-v5-c-options-menu__menu-item"
6085
+ type="button"
6086
+ role="menuitem"
6087
+ >5 per page</button>
6088
+ </li>
6089
+ <li role="none">
6090
+ <button
6091
+ class="pf-v5-c-options-menu__menu-item"
6092
+ type="button"
6093
+ role="menuitem"
6086
6094
  >
6087
- <i class="fas fa-check" aria-hidden="true"></i>
6088
- </div>
6089
- </button>
6090
- </li>
6091
- <li role="none">
6092
- <button
6093
- class="pf-v5-c-options-menu__menu-item"
6094
- type="button"
6095
- role="menuitem"
6096
- >20 per page</button>
6097
- </li>
6098
- </ul>
6095
+ 10 per page
6096
+ <div
6097
+ class="pf-v5-c-options-menu__menu-item-icon"
6098
+ >
6099
+ <i
6100
+ class="fas fa-check"
6101
+ aria-hidden="true"
6102
+ ></i>
6103
+ </div>
6104
+ </button>
6105
+ </li>
6106
+ <li role="none">
6107
+ <button
6108
+ class="pf-v5-c-options-menu__menu-item"
6109
+ type="button"
6110
+ role="menuitem"
6111
+ >20 per page</button>
6112
+ </li>
6113
+ </ul>
6114
+ </div>
6099
6115
  </div>
6100
6116
  </div>
6101
6117
  </div>
@@ -6788,55 +6804,59 @@ wrapperTag: div
6788
6804
 
6789
6805
  <div class="pf-v5-c-toolbar__item pf-m-pagination">
6790
6806
  <div class="pf-v5-c-pagination pf-m-compact">
6791
- <div class="pf-v5-c-options-menu">
6792
- <button
6793
- class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6794
- type="button"
6795
- id="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6796
- aria-haspopup="listbox"
6797
- aria-expanded="false"
6798
- >
6799
- <span class="pf-v5-c-options-menu__toggle-text">
6800
- <b>1 - 10</b>&nbsp;of&nbsp;
6801
- <b>36</b>
6802
- </span>
6803
- <div class="pf-v5-c-options-menu__toggle-icon">
6804
- <i class="fas fa-caret-down" aria-hidden="true"></i>
6805
- </div>
6806
- </button>
6807
- <ul
6808
- class="pf-v5-c-options-menu__menu"
6809
- role="menu"
6810
- aria-labelledby="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6811
- hidden
6812
- >
6813
- <li role="none">
6814
- <button
6815
- class="pf-v5-c-options-menu__menu-item"
6816
- type="button"
6817
- role="menuitem"
6818
- >5 per page</button>
6819
- </li>
6820
- <li role="none">
6821
- <button
6822
- class="pf-v5-c-options-menu__menu-item"
6823
- type="button"
6824
- role="menuitem"
6825
- >
6826
- 10 per page
6827
- <div class="pf-v5-c-options-menu__menu-item-icon">
6828
- <i class="fas fa-check" aria-hidden="true"></i>
6829
- </div>
6830
- </button>
6831
- </li>
6832
- <li role="none">
6833
- <button
6834
- class="pf-v5-c-options-menu__menu-item"
6835
- type="button"
6836
- role="menuitem"
6837
- >20 per page</button>
6838
- </li>
6839
- </ul>
6807
+ <div class="pf-v5-c-pagination__page-menu">
6808
+ <div class="pf-v5-c-options-menu">
6809
+ <button
6810
+ class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
6811
+ type="button"
6812
+ id="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6813
+ aria-haspopup="listbox"
6814
+ aria-expanded="false"
6815
+ >
6816
+ <span class="pf-v5-c-options-menu__toggle-text">
6817
+ <b>1 - 10</b>&nbsp;of&nbsp;
6818
+ <b>36</b>
6819
+ </span>
6820
+ <div class="pf-v5-c-options-menu__toggle-icon">
6821
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
6822
+ </div>
6823
+ </button>
6824
+ <ul
6825
+ class="pf-v5-c-options-menu__menu"
6826
+ role="menu"
6827
+ aria-labelledby="primary-detail-inline-modifier-example-drawer-toolbar-top-pagination-toggle"
6828
+ hidden
6829
+ >
6830
+ <li role="none">
6831
+ <button
6832
+ class="pf-v5-c-options-menu__menu-item"
6833
+ type="button"
6834
+ role="menuitem"
6835
+ >5 per page</button>
6836
+ </li>
6837
+ <li role="none">
6838
+ <button
6839
+ class="pf-v5-c-options-menu__menu-item"
6840
+ type="button"
6841
+ role="menuitem"
6842
+ >
6843
+ 10 per page
6844
+ <div
6845
+ class="pf-v5-c-options-menu__menu-item-icon"
6846
+ >
6847
+ <i class="fas fa-check" aria-hidden="true"></i>
6848
+ </div>
6849
+ </button>
6850
+ </li>
6851
+ <li role="none">
6852
+ <button
6853
+ class="pf-v5-c-options-menu__menu-item"
6854
+ type="button"
6855
+ role="menuitem"
6856
+ >20 per page</button>
6857
+ </li>
6858
+ </ul>
6859
+ </div>
6840
6860
  </div>
6841
6861
  <nav
6842
6862
  class="pf-v5-c-pagination__nav"