@patternfly/patternfly 6.3.0-prerelease.65 → 6.3.0-prerelease.67

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 (13) hide show
  1. package/components/FormControl/form-control.css +6 -1
  2. package/components/FormControl/form-control.scss +8 -3
  3. package/components/Sidebar/sidebar.css +7 -0
  4. package/components/Sidebar/sidebar.scss +7 -0
  5. package/components/_index.css +13 -1
  6. package/docs/components/JumpLinks/examples/JumpLinks.md +164 -77
  7. package/docs/demos/Drawer/examples/Drawer.md +0 -2
  8. package/docs/demos/JumpLinks/examples/JumpLinks.md +0 -5
  9. package/package.json +2 -2
  10. package/patternfly-no-globals.css +13 -1
  11. package/patternfly.css +13 -1
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/FormControl/form-control.css CHANGED
@@ -158,6 +158,12 @@
158
158
  .pf-v6-c-form-control > :is(input, select) {
159
159
  text-overflow: ellipsis;
160
160
  }
161
+ .pf-v6-c-form-control > select {
162
+ background-color: var(--pf-v6-c-form-control--BackgroundColor);
163
+ }
164
+ .pf-v6-c-form-control > select * {
165
+ color: var(--pf-v6-c-form-control--Color);
166
+ }
161
167
  .pf-v6-c-form-control:has(input) {
162
168
  --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
163
169
  --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
@@ -303,7 +309,6 @@
303
309
  --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
304
310
  --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
305
311
  --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
306
- background-color: var(--pf-v6-c-form-control--BackgroundColor);
307
312
  }
308
313
  .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
309
314
  padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
package/components/FormControl/form-control.scss CHANGED
@@ -205,6 +205,14 @@
205
205
  text-overflow: ellipsis;
206
206
  }
207
207
 
208
+ > select {
209
+ background-color: var(--#{$form-control}--BackgroundColor); // needed for OS/browser combos where dark theme styles aren't applied properly. DO NOT REMOVE!
210
+
211
+ * {
212
+ color: var(--#{$form-control}--Color); // needed for OS/browser combos where dark theme styles aren't applied properly. DO NOT REMOVE!
213
+ }
214
+ }
215
+
208
216
  @at-root .#{$form-control} {
209
217
  &:has(input) {
210
218
  --#{$form-control}--PaddingBlockStart: var(--#{$form-control}__input--PaddingBlockStart);
@@ -393,9 +401,6 @@
393
401
  --#{$form-control}--PaddingInlineEnd: calc(var(--#{$form-control}__select--PaddingInlineEnd) - 1px);
394
402
  --#{$form-control}--PaddingInlineStart: calc(var(--#{$form-control}__select--PaddingInlineStart) - 4px);
395
403
  }
396
-
397
- // We need this property for certain Linux distros/non-Mac OS where dark theme styles aren't applied properly.
398
- background-color: var(--#{$form-control}--BackgroundColor);
399
404
  }
400
405
 
401
406
  &.pf-m-placeholder > select {
package/components/Sidebar/sidebar.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --pf-v6-c-sidebar--m-stack__panel--Position: sticky;
40
40
  --pf-v6-c-sidebar--m-stack__panel--InsetBlockStart: 0;
41
41
  --pf-v6-c-sidebar--m-stack__panel--BoxShadow: var(--pf-v6-c-sidebar__panel--BoxShadow--base);
42
+ --pf-v6-c-sidebar--m-stack__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
42
43
  --pf-v6-c-sidebar--m-stack--m-panel-right__panel--Order: -1;
43
44
  --pf-v6-c-sidebar--m-split__main--AlignItems: flex-start;
44
45
  --pf-v6-c-sidebar--m-split__main--FlexDirection: row;
@@ -47,6 +48,8 @@
47
48
  --pf-v6-c-sidebar--m-split--m-panel-right__panel--Order: 1;
48
49
  --pf-v6-c-sidebar--m-split__main--m-border--before--Display: block;
49
50
  --pf-v6-c-sidebar__panel--FlexBasis--base: auto;
51
+ --pf-v6-c-sidebar__panel--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
52
+ --pf-v6-c-sidebar__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
50
53
  --pf-v6-c-sidebar__panel--BoxShadow--base: var(--pf-t--global--box-shadow--md--bottom);
51
54
  --pf-v6-c-sidebar__panel--BoxShadow: var(--pf-v6-c-sidebar__panel--BoxShadow--base);
52
55
  --pf-v6-c-sidebar__panel--InsetBlockStart: 0;
@@ -75,6 +78,7 @@
75
78
  --pf-v6-c-sidebar__main--FlexDirection: var(--pf-v6-c-sidebar__main--md--FlexDirection);
76
79
  --pf-v6-c-sidebar__main--AlignItems: var(--pf-v6-c-sidebar__main--md--AlignItems);
77
80
  --pf-v6-c-sidebar__main--m-border--before--Display: var(--pf-v6-c-sidebar__main--m-border--before--md--Display);
81
+ --pf-v6-c-sidebar__panel--BorderBlockEndWidth: 0;
78
82
  --pf-v6-c-sidebar__panel--BoxShadow: none;
79
83
  --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--md--FlexBasis);
80
84
  --pf-v6-c-sidebar__panel--InsetBlockStart: var(--pf-v6-c-sidebar__panel--md--InsetBlockStart);
@@ -104,6 +108,7 @@
104
108
  --pf-v6-c-sidebar__main--AlignItems: var(--pf-v6-c-sidebar--m-stack__main--AlignItems);
105
109
  --pf-v6-c-sidebar__panel--Position: var(--pf-v6-c-sidebar--m-stack__panel--Position);
106
110
  --pf-v6-c-sidebar__panel--InsetBlockStart: var(--pf-v6-c-sidebar--m-stack__panel--InsetBlockStart);
111
+ --pf-v6-c-sidebar__panel--BorderBlockEndWidth: var(--pf-v6-c-sidebar--m-stack__panel--BorderBlockEndWidth);
107
112
  --pf-v6-c-sidebar__panel--BoxShadow: var(--pf-v6-c-sidebar--m-stack__panel--BoxShadow);
108
113
  --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--m-stack--FlexBasis);
109
114
  --pf-v6-c-sidebar__main--m-border--before--Display: none;
@@ -114,6 +119,7 @@
114
119
  --pf-v6-c-sidebar__main--AlignItems: var(--pf-v6-c-sidebar--m-split__main--AlignItems);
115
120
  --pf-v6-c-sidebar__panel--Position: var(--pf-v6-c-sidebar--m-split__panel--Position);
116
121
  --pf-v6-c-sidebar__panel--InsetBlockStart: var(--pf-v6-c-sidebar--m-split__panel--InsetBlockStart);
122
+ --pf-v6-c-sidebar__panel--BorderBlockEndWidth: 0;
117
123
  --pf-v6-c-sidebar__panel--BoxShadow: none;
118
124
  --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--m-split--FlexBasis);
119
125
  --pf-v6-c-sidebar__main--m-border--before--Display: var(--pf-v6-c-sidebar--m-split__main--m-border--before--Display);
@@ -145,6 +151,7 @@
145
151
  padding-inline-start: var(--pf-v6-c-sidebar__panel--PaddingInlineStart);
146
152
  padding-inline-end: var(--pf-v6-c-sidebar__panel--PaddingInlineEnd);
147
153
  background-color: var(--pf-v6-c-sidebar__panel--BackgroundColor);
154
+ border-block-end: var(--pf-v6-c-sidebar__panel--BorderBlockEndWidth) solid var(--pf-v6-c-sidebar__panel--BorderBlockEndColor);
148
155
  box-shadow: var(--pf-v6-c-sidebar__panel--BoxShadow);
149
156
  }
150
157
  .pf-v6-c-sidebar__panel.pf-m-padding {
package/components/Sidebar/sidebar.scss CHANGED
@@ -63,6 +63,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
63
63
  --#{$sidebar}--m-stack__panel--Position: sticky;
64
64
  --#{$sidebar}--m-stack__panel--InsetBlockStart: 0;
65
65
  --#{$sidebar}--m-stack__panel--BoxShadow: var(--#{$sidebar}__panel--BoxShadow--base);
66
+ --#{$sidebar}--m-stack__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
66
67
  --#{$sidebar}--m-stack--m-panel-right__panel--Order: -1;
67
68
 
68
69
  // Split
@@ -75,6 +76,8 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
75
76
 
76
77
  // Panel
77
78
  --#{$sidebar}__panel--FlexBasis--base: auto;
79
+ --#{$sidebar}__panel--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
80
+ --#{$sidebar}__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
78
81
  --#{$sidebar}__panel--BoxShadow--base: var(--pf-t--global--box-shadow--md--bottom);
79
82
  --#{$sidebar}__panel--BoxShadow: var(--#{$sidebar}__panel--BoxShadow--base);
80
83
  --#{$sidebar}__panel--InsetBlockStart: 0;
@@ -106,6 +109,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
106
109
  --#{$sidebar}__main--FlexDirection: var(--#{$sidebar}__main--md--FlexDirection);
107
110
  --#{$sidebar}__main--AlignItems: var(--#{$sidebar}__main--md--AlignItems);
108
111
  --#{$sidebar}__main--m-border--before--Display: var(--#{$sidebar}__main--m-border--before--md--Display); // show border starting at md breakpoint
112
+ --#{$sidebar}__panel--BorderBlockEndWidth: 0;
109
113
  --#{$sidebar}__panel--BoxShadow: none;
110
114
  --#{$sidebar}__panel--FlexBasis: var(--#{$sidebar}__panel--md--FlexBasis);
111
115
  --#{$sidebar}__panel--InsetBlockStart: var(--#{$sidebar}__panel--md--InsetBlockStart);
@@ -135,6 +139,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
135
139
  --#{$sidebar}__main--AlignItems: var(--#{$sidebar}--m-stack__main--AlignItems);
136
140
  --#{$sidebar}__panel--Position: var(--#{$sidebar}--m-stack__panel--Position);
137
141
  --#{$sidebar}__panel--InsetBlockStart: var(--#{$sidebar}--m-stack__panel--InsetBlockStart);
142
+ --#{$sidebar}__panel--BorderBlockEndWidth: var(--#{$sidebar}--m-stack__panel--BorderBlockEndWidth);
138
143
  --#{$sidebar}__panel--BoxShadow: var(--#{$sidebar}--m-stack__panel--BoxShadow);
139
144
  --#{$sidebar}__panel--FlexBasis: var(--#{$sidebar}__panel--m-stack--FlexBasis);
140
145
  --#{$sidebar}__main--m-border--before--Display: none;
@@ -146,6 +151,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
146
151
  --#{$sidebar}__main--AlignItems: var(--#{$sidebar}--m-split__main--AlignItems);
147
152
  --#{$sidebar}__panel--Position: var(--#{$sidebar}--m-split__panel--Position);
148
153
  --#{$sidebar}__panel--InsetBlockStart: var(--#{$sidebar}--m-split__panel--InsetBlockStart);
154
+ --#{$sidebar}__panel--BorderBlockEndWidth: 0;
149
155
  --#{$sidebar}__panel--BoxShadow: none;
150
156
  --#{$sidebar}__panel--FlexBasis: var(--#{$sidebar}__panel--m-split--FlexBasis);
151
157
  --#{$sidebar}__main--m-border--before--Display: var(--#{$sidebar}--m-split__main--m-border--before--Display);
@@ -179,6 +185,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
179
185
  padding-inline-start: var(--#{$sidebar}__panel--PaddingInlineStart);
180
186
  padding-inline-end: var(--#{$sidebar}__panel--PaddingInlineEnd);
181
187
  background-color: var(--#{$sidebar}__panel--BackgroundColor);
188
+ border-block-end: var(--#{$sidebar}__panel--BorderBlockEndWidth) solid var(--#{$sidebar}__panel--BorderBlockEndColor);
182
189
  box-shadow: var(--#{$sidebar}__panel--BoxShadow);
183
190
 
184
191
  &.pf-m-padding {
package/components/_index.css CHANGED
@@ -7588,6 +7588,12 @@ ul) {
7588
7588
  .pf-v6-c-form-control > :is(input, select) {
7589
7589
  text-overflow: ellipsis;
7590
7590
  }
7591
+ .pf-v6-c-form-control > select {
7592
+ background-color: var(--pf-v6-c-form-control--BackgroundColor);
7593
+ }
7594
+ .pf-v6-c-form-control > select * {
7595
+ color: var(--pf-v6-c-form-control--Color);
7596
+ }
7591
7597
  .pf-v6-c-form-control:has(input) {
7592
7598
  --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
7593
7599
  --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
@@ -7733,7 +7739,6 @@ ul) {
7733
7739
  --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
7734
7740
  --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
7735
7741
  --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
7736
- background-color: var(--pf-v6-c-form-control--BackgroundColor);
7737
7742
  }
7738
7743
  .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
7739
7744
  padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
@@ -14826,6 +14831,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14826
14831
  --pf-v6-c-sidebar--m-stack__panel--Position: sticky;
14827
14832
  --pf-v6-c-sidebar--m-stack__panel--InsetBlockStart: 0;
14828
14833
  --pf-v6-c-sidebar--m-stack__panel--BoxShadow: var(--pf-v6-c-sidebar__panel--BoxShadow--base);
14834
+ --pf-v6-c-sidebar--m-stack__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
14829
14835
  --pf-v6-c-sidebar--m-stack--m-panel-right__panel--Order: -1;
14830
14836
  --pf-v6-c-sidebar--m-split__main--AlignItems: flex-start;
14831
14837
  --pf-v6-c-sidebar--m-split__main--FlexDirection: row;
@@ -14834,6 +14840,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14834
14840
  --pf-v6-c-sidebar--m-split--m-panel-right__panel--Order: 1;
14835
14841
  --pf-v6-c-sidebar--m-split__main--m-border--before--Display: block;
14836
14842
  --pf-v6-c-sidebar__panel--FlexBasis--base: auto;
14843
+ --pf-v6-c-sidebar__panel--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
14844
+ --pf-v6-c-sidebar__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
14837
14845
  --pf-v6-c-sidebar__panel--BoxShadow--base: var(--pf-t--global--box-shadow--md--bottom);
14838
14846
  --pf-v6-c-sidebar__panel--BoxShadow: var(--pf-v6-c-sidebar__panel--BoxShadow--base);
14839
14847
  --pf-v6-c-sidebar__panel--InsetBlockStart: 0;
@@ -14862,6 +14870,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14862
14870
  --pf-v6-c-sidebar__main--FlexDirection: var(--pf-v6-c-sidebar__main--md--FlexDirection);
14863
14871
  --pf-v6-c-sidebar__main--AlignItems: var(--pf-v6-c-sidebar__main--md--AlignItems);
14864
14872
  --pf-v6-c-sidebar__main--m-border--before--Display: var(--pf-v6-c-sidebar__main--m-border--before--md--Display);
14873
+ --pf-v6-c-sidebar__panel--BorderBlockEndWidth: 0;
14865
14874
  --pf-v6-c-sidebar__panel--BoxShadow: none;
14866
14875
  --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--md--FlexBasis);
14867
14876
  --pf-v6-c-sidebar__panel--InsetBlockStart: var(--pf-v6-c-sidebar__panel--md--InsetBlockStart);
@@ -14891,6 +14900,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14891
14900
  --pf-v6-c-sidebar__main--AlignItems: var(--pf-v6-c-sidebar--m-stack__main--AlignItems);
14892
14901
  --pf-v6-c-sidebar__panel--Position: var(--pf-v6-c-sidebar--m-stack__panel--Position);
14893
14902
  --pf-v6-c-sidebar__panel--InsetBlockStart: var(--pf-v6-c-sidebar--m-stack__panel--InsetBlockStart);
14903
+ --pf-v6-c-sidebar__panel--BorderBlockEndWidth: var(--pf-v6-c-sidebar--m-stack__panel--BorderBlockEndWidth);
14894
14904
  --pf-v6-c-sidebar__panel--BoxShadow: var(--pf-v6-c-sidebar--m-stack__panel--BoxShadow);
14895
14905
  --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--m-stack--FlexBasis);
14896
14906
  --pf-v6-c-sidebar__main--m-border--before--Display: none;
@@ -14901,6 +14911,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14901
14911
  --pf-v6-c-sidebar__main--AlignItems: var(--pf-v6-c-sidebar--m-split__main--AlignItems);
14902
14912
  --pf-v6-c-sidebar__panel--Position: var(--pf-v6-c-sidebar--m-split__panel--Position);
14903
14913
  --pf-v6-c-sidebar__panel--InsetBlockStart: var(--pf-v6-c-sidebar--m-split__panel--InsetBlockStart);
14914
+ --pf-v6-c-sidebar__panel--BorderBlockEndWidth: 0;
14904
14915
  --pf-v6-c-sidebar__panel--BoxShadow: none;
14905
14916
  --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--m-split--FlexBasis);
14906
14917
  --pf-v6-c-sidebar__main--m-border--before--Display: var(--pf-v6-c-sidebar--m-split__main--m-border--before--Display);
@@ -14932,6 +14943,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14932
14943
  padding-inline-start: var(--pf-v6-c-sidebar__panel--PaddingInlineStart);
14933
14944
  padding-inline-end: var(--pf-v6-c-sidebar__panel--PaddingInlineEnd);
14934
14945
  background-color: var(--pf-v6-c-sidebar__panel--BackgroundColor);
14946
+ border-block-end: var(--pf-v6-c-sidebar__panel--BorderBlockEndWidth) solid var(--pf-v6-c-sidebar__panel--BorderBlockEndColor);
14935
14947
  box-shadow: var(--pf-v6-c-sidebar__panel--BoxShadow);
14936
14948
  }
14937
14949
  .pf-v6-c-sidebar__panel.pf-m-padding {
package/docs/components/JumpLinks/examples/JumpLinks.md CHANGED
@@ -7,8 +7,12 @@ cssPrefix: pf-v6-c-jump-links
7
7
  ### Horizontal default
8
8
 
9
9
  ```html
10
- <nav class="pf-v6-c-jump-links">
11
- <ul class="pf-v6-c-jump-links__list" role="list">
10
+ <nav class="pf-v6-c-jump-links" aria-label="Horizontal default example">
11
+ <ul
12
+ class="pf-v6-c-jump-links__list"
13
+ role="list"
14
+ aria-label="Horizontal default example"
15
+ >
12
16
  <li class="pf-v6-c-jump-links__item">
13
17
  <span class="pf-v6-c-jump-links__link">
14
18
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -18,7 +22,7 @@ cssPrefix: pf-v6-c-jump-links
18
22
  </a>
19
23
  </span>
20
24
  </li>
21
- <li class="pf-v6-c-jump-links__item pf-m-current">
25
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
22
26
  <span class="pf-v6-c-jump-links__link">
23
27
  <a class="pf-v6-c-button pf-m-link" href="#">
24
28
  <span class="pf-v6-c-button__text">
@@ -44,8 +48,15 @@ cssPrefix: pf-v6-c-jump-links
44
48
  ### Horizontal with centered list
45
49
 
46
50
  ```html
47
- <nav class="pf-v6-c-jump-links pf-m-center">
48
- <ul class="pf-v6-c-jump-links__list" role="list">
51
+ <nav
52
+ class="pf-v6-c-jump-links pf-m-center"
53
+ aria-label="Horizontal with centered list example"
54
+ >
55
+ <ul
56
+ class="pf-v6-c-jump-links__list"
57
+ role="list"
58
+ aria-label="Horizontal with centered list example"
59
+ >
49
60
  <li class="pf-v6-c-jump-links__item">
50
61
  <span class="pf-v6-c-jump-links__link">
51
62
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -55,7 +66,7 @@ cssPrefix: pf-v6-c-jump-links
55
66
  </a>
56
67
  </span>
57
68
  </li>
58
- <li class="pf-v6-c-jump-links__item pf-m-current">
69
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
59
70
  <span class="pf-v6-c-jump-links__link">
60
71
  <a class="pf-v6-c-button pf-m-link" href="#">
61
72
  <span class="pf-v6-c-button__text">
@@ -81,12 +92,21 @@ cssPrefix: pf-v6-c-jump-links
81
92
  ### Horizontal with label
82
93
 
83
94
  ```html
84
- <nav class="pf-v6-c-jump-links" aria-label="Jump to section">
95
+ <nav class="pf-v6-c-jump-links" aria-label="Horizontal with label example">
85
96
  <div class="pf-v6-c-jump-links__main">
86
- <div class="pf-v6-c-jump-links__header">
87
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
97
+ <div
98
+ class="pf-v6-c-jump-links__header"
99
+ id="horizontal-with-label-header-one"
100
+ >
101
+ <div
102
+ class="pf-v6-c-jump-links__label"
103
+ >Jump to horizontal with label example sections one</div>
88
104
  </div>
89
- <ul class="pf-v6-c-jump-links__list" role="list">
105
+ <ul
106
+ class="pf-v6-c-jump-links__list"
107
+ role="list"
108
+ aria-labelledby="horizontal-with-label-header-one"
109
+ >
90
110
  <li class="pf-v6-c-jump-links__item">
91
111
  <span class="pf-v6-c-jump-links__link">
92
112
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -96,7 +116,7 @@ cssPrefix: pf-v6-c-jump-links
96
116
  </a>
97
117
  </span>
98
118
  </li>
99
- <li class="pf-v6-c-jump-links__item pf-m-current">
119
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
100
120
  <span class="pf-v6-c-jump-links__link">
101
121
  <a class="pf-v6-c-button pf-m-link" href="#">
102
122
  <span class="pf-v6-c-button__text">
@@ -118,12 +138,24 @@ cssPrefix: pf-v6-c-jump-links
118
138
  </div>
119
139
  </nav>
120
140
  <br />
121
- <nav class="pf-v6-c-jump-links pf-m-center" aria-label="Jump to section">
141
+ <nav
142
+ class="pf-v6-c-jump-links pf-m-center"
143
+ aria-label="Horizontal with label second example"
144
+ >
122
145
  <div class="pf-v6-c-jump-links__main">
123
- <div class="pf-v6-c-jump-links__header">
124
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
146
+ <div
147
+ class="pf-v6-c-jump-links__header"
148
+ id="horizontal-with-label-header-two"
149
+ >
150
+ <div
151
+ class="pf-v6-c-jump-links__label"
152
+ >Jump to horizontal with label example sections two</div>
125
153
  </div>
126
- <ul class="pf-v6-c-jump-links__list" role="list">
154
+ <ul
155
+ class="pf-v6-c-jump-links__list"
156
+ role="list"
157
+ aria-labelledby="horizontal-with-label-header-two"
158
+ >
127
159
  <li class="pf-v6-c-jump-links__item">
128
160
  <span class="pf-v6-c-jump-links__link">
129
161
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -133,7 +165,7 @@ cssPrefix: pf-v6-c-jump-links
133
165
  </a>
134
166
  </span>
135
167
  </li>
136
- <li class="pf-v6-c-jump-links__item pf-m-current">
168
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
137
169
  <span class="pf-v6-c-jump-links__link">
138
170
  <a class="pf-v6-c-button pf-m-link" href="#">
139
171
  <span class="pf-v6-c-button__text">
@@ -160,8 +192,15 @@ cssPrefix: pf-v6-c-jump-links
160
192
  ### Vertical default
161
193
 
162
194
  ```html
163
- <nav class="pf-v6-c-jump-links pf-m-vertical">
164
- <ul class="pf-v6-c-jump-links__list" role="list">
195
+ <nav
196
+ class="pf-v6-c-jump-links pf-m-vertical"
197
+ aria-label="Vertical default example"
198
+ >
199
+ <ul
200
+ class="pf-v6-c-jump-links__list"
201
+ role="list"
202
+ aria-label="Vertical default example"
203
+ >
165
204
  <li class="pf-v6-c-jump-links__item">
166
205
  <span class="pf-v6-c-jump-links__link">
167
206
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -171,7 +210,7 @@ cssPrefix: pf-v6-c-jump-links
171
210
  </a>
172
211
  </span>
173
212
  </li>
174
- <li class="pf-v6-c-jump-links__item pf-m-current">
213
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
175
214
  <span class="pf-v6-c-jump-links__link">
176
215
  <a class="pf-v6-c-button pf-m-link" href="#">
177
216
  <span class="pf-v6-c-button__text">
@@ -215,11 +254,20 @@ cssPrefix: pf-v6-c-jump-links
215
254
  ### Vertical with label
216
255
 
217
256
  ```html
218
- <nav class="pf-v6-c-jump-links pf-m-vertical" aria-label="Jump to section">
219
- <div class="pf-v6-c-jump-links__header">
220
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
257
+ <nav
258
+ class="pf-v6-c-jump-links pf-m-vertical"
259
+ aria-label="Vertical with label example"
260
+ >
261
+ <div class="pf-v6-c-jump-links__header" id="vertical-with-label-header">
262
+ <div
263
+ class="pf-v6-c-jump-links__label"
264
+ >Jump to vertical with label example sections</div>
221
265
  </div>
222
- <ul class="pf-v6-c-jump-links__list" role="list">
266
+ <ul
267
+ class="pf-v6-c-jump-links__list"
268
+ role="list"
269
+ aria-labelledby="vertical-with-label-header"
270
+ >
223
271
  <li class="pf-v6-c-jump-links__item">
224
272
  <span class="pf-v6-c-jump-links__link">
225
273
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -229,7 +277,7 @@ cssPrefix: pf-v6-c-jump-links
229
277
  </a>
230
278
  </span>
231
279
  </li>
232
- <li class="pf-v6-c-jump-links__item pf-m-current">
280
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
233
281
  <span class="pf-v6-c-jump-links__link">
234
282
  <a class="pf-v6-c-button pf-m-link" href="#">
235
283
  <span class="pf-v6-c-button__text">
@@ -273,12 +321,24 @@ cssPrefix: pf-v6-c-jump-links
273
321
  ### Vertical with inactive subsections
274
322
 
275
323
  ```html
276
- <nav class="pf-v6-c-jump-links pf-m-vertical" aria-label="Jump to section">
277
- <div class="pf-v6-c-jump-links__header">
278
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
324
+ <nav
325
+ class="pf-v6-c-jump-links pf-m-vertical"
326
+ aria-label="Vertical with inactive subsections example"
327
+ >
328
+ <div
329
+ class="pf-v6-c-jump-links__header"
330
+ id="vertical-with-inactive-subsections-header"
331
+ >
332
+ <div
333
+ class="pf-v6-c-jump-links__label"
334
+ >Jump to vertical with inactive subsections example sections</div>
279
335
  </div>
280
- <ul class="pf-v6-c-jump-links__list" role="list">
281
- <li class="pf-v6-c-jump-links__item pf-m-current">
336
+ <ul
337
+ class="pf-v6-c-jump-links__list"
338
+ role="list"
339
+ aria-labelledby="vertical-with-inactive-subsections-header"
340
+ >
341
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
282
342
  <span class="pf-v6-c-jump-links__link">
283
343
  <a class="pf-v6-c-button pf-m-link" href="#">
284
344
  <span class="pf-v6-c-button__text">
@@ -304,7 +364,11 @@ cssPrefix: pf-v6-c-jump-links
304
364
  </span>
305
365
  </a>
306
366
  </span>
307
- <ul class="pf-v6-c-jump-links__list" role="list">
367
+ <ul
368
+ class="pf-v6-c-jump-links__list"
369
+ role="list"
370
+ aria-label="Second inactive subsection"
371
+ >
308
372
  <li class="pf-v6-c-jump-links__item">
309
373
  <span class="pf-v6-c-jump-links__link">
310
374
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -351,11 +415,23 @@ cssPrefix: pf-v6-c-jump-links
351
415
  ### Vertical with active subsections
352
416
 
353
417
  ```html
354
- <nav class="pf-v6-c-jump-links pf-m-vertical" aria-label="Jump to section">
355
- <div class="pf-v6-c-jump-links__header">
356
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
418
+ <nav
419
+ class="pf-v6-c-jump-links pf-m-vertical"
420
+ aria-label="Vertical with active subsections example"
421
+ >
422
+ <div
423
+ class="pf-v6-c-jump-links__header"
424
+ id="vertical-with-active-subsections-header"
425
+ >
426
+ <div
427
+ class="pf-v6-c-jump-links__label"
428
+ >Jump to vertical with active subsections example sections</div>
357
429
  </div>
358
- <ul class="pf-v6-c-jump-links__list" role="list">
430
+ <ul
431
+ class="pf-v6-c-jump-links__list"
432
+ role="list"
433
+ aria-labelledby="vertical-with-active-subsections-header"
434
+ >
359
435
  <li class="pf-v6-c-jump-links__item">
360
436
  <span class="pf-v6-c-jump-links__link">
361
437
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -382,8 +458,15 @@ cssPrefix: pf-v6-c-jump-links
382
458
  </span>
383
459
  </a>
384
460
  </span>
385
- <ul class="pf-v6-c-jump-links__list" role="list">
386
- <li class="pf-v6-c-jump-links__item pf-m-current">
461
+ <ul
462
+ class="pf-v6-c-jump-links__list"
463
+ role="list"
464
+ aria-label="Second active subsection"
465
+ >
466
+ <li
467
+ class="pf-v6-c-jump-links__item pf-m-current"
468
+ aria-current="location"
469
+ >
387
470
  <span class="pf-v6-c-jump-links__link">
388
471
  <a class="pf-v6-c-button pf-m-link" href="#">
389
472
  <span class="pf-v6-c-button__text">
@@ -431,26 +514,26 @@ cssPrefix: pf-v6-c-jump-links
431
514
  ```html
432
515
  <nav
433
516
  class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable"
434
- aria-label="Jump to section"
517
+ aria-label="Expandable example"
435
518
  >
436
- <div class="pf-v6-c-jump-links__header">
519
+ <div class="pf-v6-c-jump-links__header" id="expandable-header-header">
437
520
  <div class="pf-v6-c-jump-links__toggle">
438
- <button
439
- class="pf-v6-c-button pf-m-plain"
440
- type="button"
441
- aria-label="Toggle jump links"
442
- >
521
+ <button class="pf-v6-c-button pf-m-plain" type="button">
443
522
  <span class="pf-v6-c-button__icon pf-m-start">
444
523
  <span class="pf-v6-c-jump-links__toggle-icon">
445
524
  <i class="fas fa-angle-right" aria-hidden="true"></i>
446
525
  </span>
447
526
  </span>
448
- <span class="pf-v6-c-button__text">Jump to section</span>
527
+ <span class="pf-v6-c-button__text">Jump to expandable example sections</span>
449
528
  </button>
450
529
  </div>
451
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
530
+ <div class="pf-v6-c-jump-links__label">Jump to expandable example sections</div>
452
531
  </div>
453
- <ul class="pf-v6-c-jump-links__list" role="list">
532
+ <ul
533
+ class="pf-v6-c-jump-links__list"
534
+ role="list"
535
+ aria-labelledby="expandable-header-header"
536
+ >
454
537
  <li class="pf-v6-c-jump-links__item">
455
538
  <span class="pf-v6-c-jump-links__link">
456
539
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -460,7 +543,7 @@ cssPrefix: pf-v6-c-jump-links
460
543
  </a>
461
544
  </span>
462
545
  </li>
463
- <li class="pf-v6-c-jump-links__item pf-m-current">
546
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
464
547
  <span class="pf-v6-c-jump-links__link">
465
548
  <a class="pf-v6-c-button pf-m-link" href="#">
466
549
  <span class="pf-v6-c-button__text">
@@ -506,27 +589,26 @@ cssPrefix: pf-v6-c-jump-links
506
589
  ```html
507
590
  <nav
508
591
  class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable pf-m-expanded"
509
- aria-label="Jump to section"
592
+ aria-label="Expanded example"
510
593
  >
511
- <div class="pf-v6-c-jump-links__header">
594
+ <div class="pf-v6-c-jump-links__header" id="expanded-header">
512
595
  <div class="pf-v6-c-jump-links__toggle">
513
- <button
514
- class="pf-v6-c-button pf-m-plain"
515
- type="button"
516
- aria-expanded="true"
517
- aria-label="Toggle jump links"
518
- >
596
+ <button class="pf-v6-c-button pf-m-plain" type="button">
519
597
  <span class="pf-v6-c-button__icon pf-m-start">
520
598
  <span class="pf-v6-c-jump-links__toggle-icon">
521
599
  <i class="fas fa-angle-right" aria-hidden="true"></i>
522
600
  </span>
523
601
  </span>
524
- <span class="pf-v6-c-button__text">Jump to section</span>
602
+ <span class="pf-v6-c-button__text">Jump to expanded example sections</span>
525
603
  </button>
526
604
  </div>
527
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
605
+ <div class="pf-v6-c-jump-links__label">Jump to expanded example sections</div>
528
606
  </div>
529
- <ul class="pf-v6-c-jump-links__list" role="list">
607
+ <ul
608
+ class="pf-v6-c-jump-links__list"
609
+ role="list"
610
+ aria-labelledby="expanded-header"
611
+ >
530
612
  <li class="pf-v6-c-jump-links__item">
531
613
  <span class="pf-v6-c-jump-links__link">
532
614
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -536,7 +618,7 @@ cssPrefix: pf-v6-c-jump-links
536
618
  </a>
537
619
  </span>
538
620
  </li>
539
- <li class="pf-v6-c-jump-links__item pf-m-current">
621
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
540
622
  <span class="pf-v6-c-jump-links__link">
541
623
  <a class="pf-v6-c-button pf-m-link" href="#">
542
624
  <span class="pf-v6-c-button__text">
@@ -582,26 +664,30 @@ cssPrefix: pf-v6-c-jump-links
582
664
  ```html
583
665
  <nav
584
666
  class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl pf-m-expandable"
585
- aria-label="Jump to section"
667
+ aria-label="Expandable responsive"
586
668
  >
587
- <div class="pf-v6-c-jump-links__header">
669
+ <div class="pf-v6-c-jump-links__header" id="expandable-responsive-header">
588
670
  <div class="pf-v6-c-jump-links__toggle">
589
- <button
590
- class="pf-v6-c-button pf-m-plain"
591
- type="button"
592
- aria-label="Toggle jump links"
593
- >
671
+ <button class="pf-v6-c-button pf-m-plain" type="button">
594
672
  <span class="pf-v6-c-button__icon pf-m-start">
595
673
  <span class="pf-v6-c-jump-links__toggle-icon">
596
674
  <i class="fas fa-angle-right" aria-hidden="true"></i>
597
675
  </span>
598
676
  </span>
599
- <span class="pf-v6-c-button__text">Jump to section</span>
677
+ <span
678
+ class="pf-v6-c-button__text"
679
+ >Jump to expandable responsive example sections</span>
600
680
  </button>
601
681
  </div>
602
- <div class="pf-v6-c-jump-links__label">Jump to section</div>
682
+ <div
683
+ class="pf-v6-c-jump-links__label"
684
+ >Jump to expandable responsive example sections</div>
603
685
  </div>
604
- <ul class="pf-v6-c-jump-links__list" role="list">
686
+ <ul
687
+ class="pf-v6-c-jump-links__list"
688
+ role="list"
689
+ aria-labelledby="expandable-responsive-header"
690
+ >
605
691
  <li class="pf-v6-c-jump-links__item">
606
692
  <span class="pf-v6-c-jump-links__link">
607
693
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -611,7 +697,7 @@ cssPrefix: pf-v6-c-jump-links
611
697
  </a>
612
698
  </span>
613
699
  </li>
614
- <li class="pf-v6-c-jump-links__item pf-m-current">
700
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
615
701
  <span class="pf-v6-c-jump-links__link">
616
702
  <a class="pf-v6-c-button pf-m-link" href="#">
617
703
  <span class="pf-v6-c-button__text">
@@ -657,14 +743,11 @@ cssPrefix: pf-v6-c-jump-links
657
743
  ```html
658
744
  <nav
659
745
  class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl pf-m-expandable"
746
+ aria-label="Expandable responsive with no label"
660
747
  >
661
748
  <div class="pf-v6-c-jump-links__header">
662
749
  <div class="pf-v6-c-jump-links__toggle">
663
- <button
664
- class="pf-v6-c-button pf-m-plain"
665
- type="button"
666
- aria-label="Toggle jump links"
667
- >
750
+ <button class="pf-v6-c-button pf-m-plain" type="button">
668
751
  <span class="pf-v6-c-button__icon pf-m-start">
669
752
  <span class="pf-v6-c-jump-links__toggle-icon">
670
753
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -674,7 +757,11 @@ cssPrefix: pf-v6-c-jump-links
674
757
  </button>
675
758
  </div>
676
759
  </div>
677
- <ul class="pf-v6-c-jump-links__list" role="list">
760
+ <ul
761
+ class="pf-v6-c-jump-links__list"
762
+ role="list"
763
+ aria-label="Expandable responsive with no label example"
764
+ >
678
765
  <li class="pf-v6-c-jump-links__item">
679
766
  <span class="pf-v6-c-jump-links__link">
680
767
  <a class="pf-v6-c-button pf-m-link" href="#">
@@ -684,7 +771,7 @@ cssPrefix: pf-v6-c-jump-links
684
771
  </a>
685
772
  </span>
686
773
  </li>
687
- <li class="pf-v6-c-jump-links__item pf-m-current">
774
+ <li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
688
775
  <span class="pf-v6-c-jump-links__link">
689
776
  <a class="pf-v6-c-button pf-m-link" href="#">
690
777
  <span class="pf-v6-c-button__text">