@patternfly/patternfly 6.0.0-alpha.117 → 6.0.0-alpha.119

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 (82) hide show
  1. package/base/_fonts.scss +7 -95
  2. package/base/_variables.scss +7 -292
  3. package/base/patternfly-fonts.css +6 -76
  4. package/base/patternfly-variables.css +8 -241
  5. package/components/AppLauncher/app-launcher.css +0 -10
  6. package/components/AppLauncher/app-launcher.scss +0 -7
  7. package/components/Chip/chip-group.css +0 -13
  8. package/components/Chip/chip-group.scss +0 -2
  9. package/components/Chip/chip.css +0 -19
  10. package/components/Chip/chip.scss +0 -9
  11. package/components/Content/content.css +86 -60
  12. package/components/Content/content.scss +129 -40
  13. package/components/ContextSelector/context-selector.css +0 -30
  14. package/components/ContextSelector/context-selector.scss +0 -9
  15. package/components/DataList/data-list.css +46 -49
  16. package/components/Divider/divider.css +28 -31
  17. package/components/Dropdown/dropdown.css +0 -22
  18. package/components/Dropdown/dropdown.scss +0 -7
  19. package/components/LogViewer/log-viewer.css +0 -24
  20. package/components/LogViewer/log-viewer.scss +0 -9
  21. package/components/Menu/menu.css +103 -61
  22. package/components/NumberInput/number-input.css +5 -8
  23. package/components/NumberInput/number-input.scss +1 -1
  24. package/components/OptionsMenu/options-menu.css +0 -15
  25. package/components/OptionsMenu/options-menu.scss +0 -7
  26. package/components/Page/page.css +92 -65
  27. package/components/Page/page.scss +0 -2
  28. package/components/Pagination/pagination.css +8 -8
  29. package/components/Pagination/pagination.scss +1 -1
  30. package/components/Select/select.css +0 -29
  31. package/components/Select/select.scss +0 -9
  32. package/components/Table/table.css +46 -49
  33. package/components/Toolbar/toolbar.css +90 -75
  34. package/docs/components/Content/examples/Content.md +254 -61
  35. package/docs/components/Select/deprecated/Select.md +291 -263
  36. package/docs/components/TextInputGroup/examples/TextInputGroup.md +434 -392
  37. package/docs/components/Toolbar/examples/Toolbar.md +420 -378
  38. package/docs/demos/DescriptionList/examples/DescriptionList.md +6 -4
  39. package/docs/demos/Toolbar/examples/Toolbar.css +1 -1
  40. package/docs/demos/Toolbar/examples/Toolbar.md +140 -126
  41. package/package.json +34 -35
  42. package/patternfly-base-no-globals.css +12 -315
  43. package/patternfly-base.css +12 -315
  44. package/patternfly-charts.css +0 -322
  45. package/patternfly-charts.scss +5 -409
  46. package/patternfly-no-globals.css +539 -748
  47. package/patternfly.css +539 -748
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
  50. package/sass-utilities/_all.scss +0 -2
  51. package/sass-utilities/functions.scss +0 -6
  52. package/sass-utilities/mixins.scss +42 -16
  53. package/sass-utilities/scss-variables.scss +0 -211
  54. package/base/_chart-globals.scss +0 -415
  55. package/base/themes/dark/_chart-globals.scss +0 -42
  56. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  57. package/components/Chip/themes/dark/chip.scss +0 -9
  58. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  59. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  60. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  61. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  62. package/components/Select/themes/dark/select.scss +0 -23
  63. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6229
  64. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  65. package/patternfly-base-theme-dark-unversioned.css +0 -6346
  66. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  67. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  68. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  69. package/patternfly-charts-theme-dark.css +0 -70
  70. package/patternfly-charts-theme-dark.scss +0 -8
  71. package/patternfly-theme-dark-unversioned.css +0 -35621
  72. package/patternfly-theme-dark-unversioned.scss +0 -6
  73. package/patternfly-theme-dark.css +0 -0
  74. package/patternfly-theme-dark.scss +0 -1
  75. package/sass-utilities/colors.scss +0 -82
  76. package/sass-utilities/placeholders.scss +0 -72
  77. package/sass-utilities/themes/dark/_all.scss +0 -4
  78. package/sass-utilities/themes/dark/colors.scss +0 -16
  79. package/sass-utilities/themes/dark/mixins.scss +0 -7
  80. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  81. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  82. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -79,143 +79,157 @@ cssPrefix: pf-v6-c-text-input-group
79
79
  ```html
80
80
  <div class="pf-v6-c-text-input-group">
81
81
  <div class="pf-v6-c-text-input-group__main">
82
- <div class="pf-v6-c-chip-group" role="group">
83
- <div class="pf-v6-c-chip-group__main">
82
+ <div class="pf-v6-c-label-group">
83
+ <div class="pf-v6-c-label-group__main">
84
84
  <ul
85
- class="pf-v6-c-chip-group__list"
85
+ class="pf-v6-c-label-group__list"
86
86
  role="list"
87
- aria-label="Chip group list"
87
+ aria-label="Label group list"
88
88
  >
89
- <li class="pf-v6-c-chip-group__list-item">
90
- <div class="pf-v6-c-chip">
91
- <span class="pf-v6-c-chip__content">
92
- <span
93
- class="pf-v6-c-chip__text"
94
- id="text-input-group-filters-chip-group-chip_one_select_collapsed"
95
- >Chip one</span>
89
+ <li class="pf-v6-c-label-group__list-item">
90
+ <span class="pf-v6-c-label pf-m-outline">
91
+ <span class="pf-v6-c-label__content">
92
+ <span class="pf-v6-c-label__content">
93
+ <span
94
+ class="pf-v6-c-label__text"
95
+ id="text-input-group-filters-label-group-label_one_select_collapsed"
96
+ >Label one</span>
97
+ </span>
98
+ <span class="pf-v6-c-label__actions">
99
+ <button
100
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
101
+ type="button"
102
+ aria-labelledby="text-input-group-filters-label-group-remove_label_one_select_collapsed text-input-group-filters-label-group-label_one_select_collapsed"
103
+ aria-label="Remove"
104
+ id="text-input-group-filters-label-group-remove_label_one_select_collapsed"
105
+ >
106
+ <i class="fas fa-times" aria-hidden="true"></i>
107
+ </button>
108
+ </span>
96
109
  </span>
97
- <span class="pf-v6-c-chip__actions">
98
- <button
99
- class="pf-v6-c-button pf-m-plain"
100
- type="button"
101
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_one_select_collapsed text-input-group-filters-chip-group-chip_one_select_collapsed"
102
- aria-label="Remove"
103
- id="text-input-group-filters-chip-group-remove_chip_one_select_collapsed"
104
- >
105
- <i class="fas fa-times" aria-hidden="true"></i>
106
- </button>
107
- </span>
108
- </div>
110
+ </span>
109
111
  </li>
110
- <li class="pf-v6-c-chip-group__list-item">
111
- <div class="pf-v6-c-chip">
112
- <span class="pf-v6-c-chip__content">
113
- <span
114
- class="pf-v6-c-chip__text"
115
- id="text-input-group-filters-chip-group-chip_two_select_collapsed"
116
- >Chip two</span>
117
- </span>
118
- <span class="pf-v6-c-chip__actions">
119
- <button
120
- class="pf-v6-c-button pf-m-plain"
121
- type="button"
122
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_two_select_collapsed text-input-group-filters-chip-group-chip_two_select_collapsed"
123
- aria-label="Remove"
124
- id="text-input-group-filters-chip-group-remove_chip_two_select_collapsed"
125
- >
126
- <i class="fas fa-times" aria-hidden="true"></i>
127
- </button>
112
+ <li class="pf-v6-c-label-group__list-item">
113
+ <span class="pf-v6-c-label pf-m-outline">
114
+ <span class="pf-v6-c-label__content">
115
+ <span class="pf-v6-c-label__content">
116
+ <span
117
+ class="pf-v6-c-label__text"
118
+ id="text-input-group-filters-label-group-label_two_select_collapsed"
119
+ >Label two</span>
120
+ </span>
121
+ <span class="pf-v6-c-label__actions">
122
+ <button
123
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
124
+ type="button"
125
+ aria-labelledby="text-input-group-filters-label-group-remove_label_two_select_collapsed text-input-group-filters-label-group-label_two_select_collapsed"
126
+ aria-label="Remove"
127
+ id="text-input-group-filters-label-group-remove_label_two_select_collapsed"
128
+ >
129
+ <i class="fas fa-times" aria-hidden="true"></i>
130
+ </button>
131
+ </span>
128
132
  </span>
129
- </div>
133
+ </span>
130
134
  </li>
131
- <li class="pf-v6-c-chip-group__list-item">
132
- <div class="pf-v6-c-chip">
133
- <span class="pf-v6-c-chip__content">
134
- <span
135
- class="pf-v6-c-chip__text"
136
- id="text-input-group-filters-chip-group-chip_three_select_collapsed"
137
- >Chip three</span>
135
+ <li class="pf-v6-c-label-group__list-item">
136
+ <span class="pf-v6-c-label pf-m-outline">
137
+ <span class="pf-v6-c-label__content">
138
+ <span class="pf-v6-c-label__content">
139
+ <span
140
+ class="pf-v6-c-label__text"
141
+ id="text-input-group-filters-label-group-label_three_select_collapsed"
142
+ >Label three</span>
143
+ </span>
144
+ <span class="pf-v6-c-label__actions">
145
+ <button
146
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
147
+ type="button"
148
+ aria-labelledby="text-input-group-filters-label-group-remove_label_three_select_collapsed text-input-group-filters-label-group-label_three_select_collapsed"
149
+ aria-label="Remove"
150
+ id="text-input-group-filters-label-group-remove_label_three_select_collapsed"
151
+ >
152
+ <i class="fas fa-times" aria-hidden="true"></i>
153
+ </button>
154
+ </span>
138
155
  </span>
139
- <span class="pf-v6-c-chip__actions">
140
- <button
141
- class="pf-v6-c-button pf-m-plain"
142
- type="button"
143
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_three_select_collapsed text-input-group-filters-chip-group-chip_three_select_collapsed"
144
- aria-label="Remove"
145
- id="text-input-group-filters-chip-group-remove_chip_three_select_collapsed"
146
- >
147
- <i class="fas fa-times" aria-hidden="true"></i>
148
- </button>
149
- </span>
150
- </div>
156
+ </span>
151
157
  </li>
152
- <li class="pf-v6-c-chip-group__list-item">
153
- <div class="pf-v6-c-chip">
154
- <span class="pf-v6-c-chip__content">
155
- <span
156
- class="pf-v6-c-chip__text"
157
- id="text-input-group-filters-chip-group-chip_four_select_collapsed"
158
- >Chip four</span>
159
- </span>
160
- <span class="pf-v6-c-chip__actions">
161
- <button
162
- class="pf-v6-c-button pf-m-plain"
163
- type="button"
164
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_four_select_collapsed text-input-group-filters-chip-group-chip_four_select_collapsed"
165
- aria-label="Remove"
166
- id="text-input-group-filters-chip-group-remove_chip_four_select_collapsed"
167
- >
168
- <i class="fas fa-times" aria-hidden="true"></i>
169
- </button>
158
+ <li class="pf-v6-c-label-group__list-item">
159
+ <span class="pf-v6-c-label pf-m-outline">
160
+ <span class="pf-v6-c-label__content">
161
+ <span class="pf-v6-c-label__content">
162
+ <span
163
+ class="pf-v6-c-label__text"
164
+ id="text-input-group-filters-label-group-label_four_select_collapsed"
165
+ >Label four</span>
166
+ </span>
167
+ <span class="pf-v6-c-label__actions">
168
+ <button
169
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
170
+ type="button"
171
+ aria-labelledby="text-input-group-filters-label-group-remove_label_four_select_collapsed text-input-group-filters-label-group-label_four_select_collapsed"
172
+ aria-label="Remove"
173
+ id="text-input-group-filters-label-group-remove_label_four_select_collapsed"
174
+ >
175
+ <i class="fas fa-times" aria-hidden="true"></i>
176
+ </button>
177
+ </span>
170
178
  </span>
171
- </div>
179
+ </span>
172
180
  </li>
173
- <li class="pf-v6-c-chip-group__list-item">
174
- <div class="pf-v6-c-chip">
175
- <span class="pf-v6-c-chip__content">
176
- <span
177
- class="pf-v6-c-chip__text"
178
- id="text-input-group-filters-chip-group-chip_five_select_collapsed"
179
- >Chip five</span>
181
+ <li class="pf-v6-c-label-group__list-item">
182
+ <span class="pf-v6-c-label pf-m-outline">
183
+ <span class="pf-v6-c-label__content">
184
+ <span class="pf-v6-c-label__content">
185
+ <span
186
+ class="pf-v6-c-label__text"
187
+ id="text-input-group-filters-label-group-label_five_select_collapsed"
188
+ >Label five</span>
189
+ </span>
190
+ <span class="pf-v6-c-label__actions">
191
+ <button
192
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
193
+ type="button"
194
+ aria-labelledby="text-input-group-filters-label-group-remove_label_five_select_collapsed text-input-group-filters-label-group-label_five_select_collapsed"
195
+ aria-label="Remove"
196
+ id="text-input-group-filters-label-group-remove_label_five_select_collapsed"
197
+ >
198
+ <i class="fas fa-times" aria-hidden="true"></i>
199
+ </button>
200
+ </span>
180
201
  </span>
181
- <span class="pf-v6-c-chip__actions">
182
- <button
183
- class="pf-v6-c-button pf-m-plain"
184
- type="button"
185
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_five_select_collapsed text-input-group-filters-chip-group-chip_five_select_collapsed"
186
- aria-label="Remove"
187
- id="text-input-group-filters-chip-group-remove_chip_five_select_collapsed"
188
- >
189
- <i class="fas fa-times" aria-hidden="true"></i>
190
- </button>
191
- </span>
192
- </div>
202
+ </span>
193
203
  </li>
194
- <li class="pf-v6-c-chip-group__list-item">
195
- <div class="pf-v6-c-chip">
196
- <span class="pf-v6-c-chip__content">
197
- <span
198
- class="pf-v6-c-chip__text"
199
- id="text-input-group-filters-chip-group-chip_six_select_collapsed"
200
- >Chip six</span>
204
+ <li class="pf-v6-c-label-group__list-item">
205
+ <span class="pf-v6-c-label pf-m-outline">
206
+ <span class="pf-v6-c-label__content">
207
+ <span class="pf-v6-c-label__content">
208
+ <span
209
+ class="pf-v6-c-label__text"
210
+ id="text-input-group-filters-label-group-label_six_select_collapsed"
211
+ >Label six</span>
212
+ </span>
213
+ <span class="pf-v6-c-label__actions">
214
+ <button
215
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
216
+ type="button"
217
+ aria-labelledby="text-input-group-filters-label-group-remove_label_six_select_collapsed text-input-group-filters-label-group-label_six_select_collapsed"
218
+ aria-label="Remove"
219
+ id="text-input-group-filters-label-group-remove_label_six_select_collapsed"
220
+ >
221
+ <i class="fas fa-times" aria-hidden="true"></i>
222
+ </button>
223
+ </span>
201
224
  </span>
202
- <span class="pf-v6-c-chip__actions">
203
- <button
204
- class="pf-v6-c-button pf-m-plain"
205
- type="button"
206
- aria-labelledby="text-input-group-filters-chip-group-remove_chip_six_select_collapsed text-input-group-filters-chip-group-chip_six_select_collapsed"
207
- aria-label="Remove"
208
- id="text-input-group-filters-chip-group-remove_chip_six_select_collapsed"
209
- >
210
- <i class="fas fa-times" aria-hidden="true"></i>
211
- </button>
212
- </span>
213
- </div>
225
+ </span>
214
226
  </li>
215
- <li class="pf-v6-c-chip-group__list-item">
216
- <button class="pf-v6-c-chip pf-m-overflow">
217
- <span class="pf-v6-c-chip__content">
218
- <span class="pf-v6-c-chip__text">8 more</span>
227
+ <li class="pf-v6-c-label-group__list-item">
228
+ <button class="pf-v6-c-label pf-m-overflow">
229
+ <span class="pf-v6-c-label__content">
230
+ <span class="pf-v6-c-label__content">
231
+ <span class="pf-v6-c-label__text">8 more</span>
232
+ </span>
219
233
  </span>
220
234
  </button>
221
235
  </li>
@@ -249,306 +263,334 @@ cssPrefix: pf-v6-c-text-input-group
249
263
  ```html
250
264
  <div class="pf-v6-c-text-input-group">
251
265
  <div class="pf-v6-c-text-input-group__main">
252
- <div class="pf-v6-c-chip-group" role="group">
253
- <div class="pf-v6-c-chip-group__main">
266
+ <div class="pf-v6-c-label-group">
267
+ <div class="pf-v6-c-label-group__main">
254
268
  <ul
255
- class="pf-v6-c-chip-group__list"
269
+ class="pf-v6-c-label-group__list"
256
270
  role="list"
257
- aria-label="Chip group list"
271
+ aria-label="Label group list"
258
272
  >
259
- <li class="pf-v6-c-chip-group__list-item">
260
- <div class="pf-v6-c-chip">
261
- <span class="pf-v6-c-chip__content">
262
- <span
263
- class="pf-v6-c-chip__text"
264
- id="text-input-group-filters-expanded-chip-group-chip_one_select_collapsed"
265
- >Chip one</span>
266
- </span>
267
- <span class="pf-v6-c-chip__actions">
268
- <button
269
- class="pf-v6-c-button pf-m-plain"
270
- type="button"
271
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_one_select_collapsed text-input-group-filters-expanded-chip-group-chip_one_select_collapsed"
272
- aria-label="Remove"
273
- id="text-input-group-filters-expanded-chip-group-remove_chip_one_select_collapsed"
274
- >
275
- <i class="fas fa-times" aria-hidden="true"></i>
276
- </button>
273
+ <li class="pf-v6-c-label-group__list-item">
274
+ <span class="pf-v6-c-label pf-m-outline">
275
+ <span class="pf-v6-c-label__content">
276
+ <span class="pf-v6-c-label__content">
277
+ <span
278
+ class="pf-v6-c-label__text"
279
+ id="text-input-group-filters-expanded-label-group-label_one_select_collapsed"
280
+ >Label one</span>
281
+ </span>
282
+ <span class="pf-v6-c-label__actions">
283
+ <button
284
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
285
+ type="button"
286
+ aria-labelledby="text-input-group-filters-expanded-label-group-remove_label_one_select_collapsed text-input-group-filters-expanded-label-group-label_one_select_collapsed"
287
+ aria-label="Remove"
288
+ id="text-input-group-filters-expanded-label-group-remove_label_one_select_collapsed"
289
+ >
290
+ <i class="fas fa-times" aria-hidden="true"></i>
291
+ </button>
292
+ </span>
277
293
  </span>
278
- </div>
294
+ </span>
279
295
  </li>
280
- <li class="pf-v6-c-chip-group__list-item">
281
- <div class="pf-v6-c-chip">
282
- <span class="pf-v6-c-chip__content">
283
- <span
284
- class="pf-v6-c-chip__text"
285
- id="text-input-group-filters-expanded-chip-group-chip_two_select_collapsed"
286
- >Chip two</span>
296
+ <li class="pf-v6-c-label-group__list-item">
297
+ <span class="pf-v6-c-label pf-m-outline">
298
+ <span class="pf-v6-c-label__content">
299
+ <span class="pf-v6-c-label__content">
300
+ <span
301
+ class="pf-v6-c-label__text"
302
+ id="text-input-group-filters-expanded-label-group-label_two_select_collapsed"
303
+ >Label two</span>
304
+ </span>
305
+ <span class="pf-v6-c-label__actions">
306
+ <button
307
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
308
+ type="button"
309
+ aria-labelledby="text-input-group-filters-expanded-label-group-remove_label_two_select_collapsed text-input-group-filters-expanded-label-group-label_two_select_collapsed"
310
+ aria-label="Remove"
311
+ id="text-input-group-filters-expanded-label-group-remove_label_two_select_collapsed"
312
+ >
313
+ <i class="fas fa-times" aria-hidden="true"></i>
314
+ </button>
315
+ </span>
287
316
  </span>
288
- <span class="pf-v6-c-chip__actions">
289
- <button
290
- class="pf-v6-c-button pf-m-plain"
291
- type="button"
292
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_two_select_collapsed text-input-group-filters-expanded-chip-group-chip_two_select_collapsed"
293
- aria-label="Remove"
294
- id="text-input-group-filters-expanded-chip-group-remove_chip_two_select_collapsed"
295
- >
296
- <i class="fas fa-times" aria-hidden="true"></i>
297
- </button>
298
- </span>
299
- </div>
317
+ </span>
300
318
  </li>
301
- <li class="pf-v6-c-chip-group__list-item">
302
- <div class="pf-v6-c-chip">
303
- <span class="pf-v6-c-chip__content">
304
- <span
305
- class="pf-v6-c-chip__text"
306
- id="text-input-group-filters-expanded-chip-group-chip_three_select_collapsed"
307
- >Chip three</span>
308
- </span>
309
- <span class="pf-v6-c-chip__actions">
310
- <button
311
- class="pf-v6-c-button pf-m-plain"
312
- type="button"
313
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_three_select_collapsed text-input-group-filters-expanded-chip-group-chip_three_select_collapsed"
314
- aria-label="Remove"
315
- id="text-input-group-filters-expanded-chip-group-remove_chip_three_select_collapsed"
316
- >
317
- <i class="fas fa-times" aria-hidden="true"></i>
318
- </button>
319
+ <li class="pf-v6-c-label-group__list-item">
320
+ <span class="pf-v6-c-label pf-m-outline">
321
+ <span class="pf-v6-c-label__content">
322
+ <span class="pf-v6-c-label__content">
323
+ <span
324
+ class="pf-v6-c-label__text"
325
+ id="text-input-group-filters-expanded-label-group-label_three_select_collapsed"
326
+ >Label three</span>
327
+ </span>
328
+ <span class="pf-v6-c-label__actions">
329
+ <button
330
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
331
+ type="button"
332
+ aria-labelledby="text-input-group-filters-expanded-label-group-remove_label_three_select_collapsed text-input-group-filters-expanded-label-group-label_three_select_collapsed"
333
+ aria-label="Remove"
334
+ id="text-input-group-filters-expanded-label-group-remove_label_three_select_collapsed"
335
+ >
336
+ <i class="fas fa-times" aria-hidden="true"></i>
337
+ </button>
338
+ </span>
319
339
  </span>
320
- </div>
340
+ </span>
321
341
  </li>
322
- <li class="pf-v6-c-chip-group__list-item">
323
- <div class="pf-v6-c-chip">
324
- <span class="pf-v6-c-chip__content">
325
- <span
326
- class="pf-v6-c-chip__text"
327
- id="text-input-group-filters-expanded-chip-group-chip_four_select_collapsed"
328
- >Chip four</span>
342
+ <li class="pf-v6-c-label-group__list-item">
343
+ <span class="pf-v6-c-label pf-m-outline">
344
+ <span class="pf-v6-c-label__content">
345
+ <span class="pf-v6-c-label__content">
346
+ <span
347
+ class="pf-v6-c-label__text"
348
+ id="text-input-group-filters-expanded-label-group-label_four_select_collapsed"
349
+ >Label four</span>
350
+ </span>
351
+ <span class="pf-v6-c-label__actions">
352
+ <button
353
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
354
+ type="button"
355
+ aria-labelledby="text-input-group-filters-expanded-label-group-remove_label_four_select_collapsed text-input-group-filters-expanded-label-group-label_four_select_collapsed"
356
+ aria-label="Remove"
357
+ id="text-input-group-filters-expanded-label-group-remove_label_four_select_collapsed"
358
+ >
359
+ <i class="fas fa-times" aria-hidden="true"></i>
360
+ </button>
361
+ </span>
329
362
  </span>
330
- <span class="pf-v6-c-chip__actions">
331
- <button
332
- class="pf-v6-c-button pf-m-plain"
333
- type="button"
334
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_four_select_collapsed text-input-group-filters-expanded-chip-group-chip_four_select_collapsed"
335
- aria-label="Remove"
336
- id="text-input-group-filters-expanded-chip-group-remove_chip_four_select_collapsed"
337
- >
338
- <i class="fas fa-times" aria-hidden="true"></i>
339
- </button>
340
- </span>
341
- </div>
363
+ </span>
342
364
  </li>
343
- <li class="pf-v6-c-chip-group__list-item">
344
- <div class="pf-v6-c-chip">
345
- <span class="pf-v6-c-chip__content">
346
- <span
347
- class="pf-v6-c-chip__text"
348
- id="text-input-group-filters-expanded-chip-group-chip_five_select_collapsed"
349
- >Chip five</span>
365
+ <li class="pf-v6-c-label-group__list-item">
366
+ <span class="pf-v6-c-label pf-m-outline">
367
+ <span class="pf-v6-c-label__content">
368
+ <span class="pf-v6-c-label__content">
369
+ <span
370
+ class="pf-v6-c-label__text"
371
+ id="text-input-group-filters-expanded-label-group-label_five_select_collapsed"
372
+ >Label five</span>
373
+ </span>
374
+ <span class="pf-v6-c-label__actions">
375
+ <button
376
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
377
+ type="button"
378
+ aria-labelledby="text-input-group-filters-expanded-label-group-remove_label_five_select_collapsed text-input-group-filters-expanded-label-group-label_five_select_collapsed"
379
+ aria-label="Remove"
380
+ id="text-input-group-filters-expanded-label-group-remove_label_five_select_collapsed"
381
+ >
382
+ <i class="fas fa-times" aria-hidden="true"></i>
383
+ </button>
384
+ </span>
350
385
  </span>
351
- <span class="pf-v6-c-chip__actions">
352
- <button
353
- class="pf-v6-c-button pf-m-plain"
354
- type="button"
355
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_five_select_collapsed text-input-group-filters-expanded-chip-group-chip_five_select_collapsed"
356
- aria-label="Remove"
357
- id="text-input-group-filters-expanded-chip-group-remove_chip_five_select_collapsed"
358
- >
359
- <i class="fas fa-times" aria-hidden="true"></i>
360
- </button>
361
- </span>
362
- </div>
386
+ </span>
363
387
  </li>
364
- <li class="pf-v6-c-chip-group__list-item">
365
- <div class="pf-v6-c-chip">
366
- <span class="pf-v6-c-chip__content">
367
- <span
368
- class="pf-v6-c-chip__text"
369
- id="text-input-group-filters-expanded-chip-group-chip_six_select_collapsed"
370
- >Chip six</span>
371
- </span>
372
- <span class="pf-v6-c-chip__actions">
373
- <button
374
- class="pf-v6-c-button pf-m-plain"
375
- type="button"
376
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_six_select_collapsed text-input-group-filters-expanded-chip-group-chip_six_select_collapsed"
377
- aria-label="Remove"
378
- id="text-input-group-filters-expanded-chip-group-remove_chip_six_select_collapsed"
379
- >
380
- <i class="fas fa-times" aria-hidden="true"></i>
381
- </button>
388
+ <li class="pf-v6-c-label-group__list-item">
389
+ <span class="pf-v6-c-label pf-m-outline">
390
+ <span class="pf-v6-c-label__content">
391
+ <span class="pf-v6-c-label__content">
392
+ <span
393
+ class="pf-v6-c-label__text"
394
+ id="text-input-group-filters-expanded-label-group-label_six_select_collapsed"
395
+ >Label six</span>
396
+ </span>
397
+ <span class="pf-v6-c-label__actions">
398
+ <button
399
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
400
+ type="button"
401
+ aria-labelledby="text-input-group-filters-expanded-label-group-remove_label_six_select_collapsed text-input-group-filters-expanded-label-group-label_six_select_collapsed"
402
+ aria-label="Remove"
403
+ id="text-input-group-filters-expanded-label-group-remove_label_six_select_collapsed"
404
+ >
405
+ <i class="fas fa-times" aria-hidden="true"></i>
406
+ </button>
407
+ </span>
382
408
  </span>
383
- </div>
409
+ </span>
384
410
  </li>
385
- <li class="pf-v6-c-chip-group__list-item">
386
- <div class="pf-v6-c-chip">
387
- <span class="pf-v6-c-chip__content">
388
- <span
389
- class="pf-v6-c-chip__text"
390
- id="text-input-group-filters-expanded-chip-group-chip_seven_select_collapsed"
391
- >Chip seven</span>
411
+ <li class="pf-v6-c-label-group__list-item">
412
+ <span class="pf-v6-c-label pf-m-outline">
413
+ <span class="pf-v6-c-label__content">
414
+ <span class="pf-v6-c-label__content">
415
+ <span
416
+ class="pf-v6-c-label__text"
417
+ id="text-input-group-filters-expanded-label-group-label_seven_select_collapsed"
418
+ >Label seven</span>
419
+ </span>
420
+ <span class="pf-v6-c-label__actions">
421
+ <button
422
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
423
+ type="button"
424
+ aria-labelledby="text-input-group-filters-expanded-label-group-remove_label_seven_select_collapsed text-input-group-filters-expanded-label-group-label_seven_select_collapsed"
425
+ aria-label="Remove"
426
+ id="text-input-group-filters-expanded-label-group-remove_label_seven_select_collapsed"
427
+ >
428
+ <i class="fas fa-times" aria-hidden="true"></i>
429
+ </button>
430
+ </span>
392
431
  </span>
393
- <span class="pf-v6-c-chip__actions">
394
- <button
395
- class="pf-v6-c-button pf-m-plain"
396
- type="button"
397
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_seven_select_collapsed text-input-group-filters-expanded-chip-group-chip_seven_select_collapsed"
398
- aria-label="Remove"
399
- id="text-input-group-filters-expanded-chip-group-remove_chip_seven_select_collapsed"
400
- >
401
- <i class="fas fa-times" aria-hidden="true"></i>
402
- </button>
403
- </span>
404
- </div>
432
+ </span>
405
433
  </li>
406
- <li class="pf-v6-c-chip-group__list-item">
407
- <div class="pf-v6-c-chip">
408
- <span class="pf-v6-c-chip__content">
409
- <span
410
- class="pf-v6-c-chip__text"
411
- id="text-input-group-filters-expanded-chip-group-chip_eight_select_collapsed"
412
- >Chip eight</span>
413
- </span>
414
- <span class="pf-v6-c-chip__actions">
415
- <button
416
- class="pf-v6-c-button pf-m-plain"
417
- type="button"
418
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_eight_select_collapsed text-input-group-filters-expanded-chip-group-chip_eight_select_collapsed"
419
- aria-label="Remove"
420
- id="text-input-group-filters-expanded-chip-group-remove_chip_eight_select_collapsed"
421
- >
422
- <i class="fas fa-times" aria-hidden="true"></i>
423
- </button>
434
+ <li class="pf-v6-c-label-group__list-item">
435
+ <span class="pf-v6-c-label pf-m-outline">
436
+ <span class="pf-v6-c-label__content">
437
+ <span class="pf-v6-c-label__content">
438
+ <span
439
+ class="pf-v6-c-label__text"
440
+ id="text-input-group-filters-expanded-label-group-label_eight_select_collapsed"
441
+ >Label eight</span>
442
+ </span>
443
+ <span class="pf-v6-c-label__actions">
444
+ <button
445
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
446
+ type="button"
447
+ aria-labelledby="text-input-group-filters-expanded-label-group-remove_label_eight_select_collapsed text-input-group-filters-expanded-label-group-label_eight_select_collapsed"
448
+ aria-label="Remove"
449
+ id="text-input-group-filters-expanded-label-group-remove_label_eight_select_collapsed"
450
+ >
451
+ <i class="fas fa-times" aria-hidden="true"></i>
452
+ </button>
453
+ </span>
424
454
  </span>
425
- </div>
455
+ </span>
426
456
  </li>
427
- <li class="pf-v6-c-chip-group__list-item">
428
- <div class="pf-v6-c-chip">
429
- <span class="pf-v6-c-chip__content">
430
- <span
431
- class="pf-v6-c-chip__text"
432
- id="text-input-group-filters-expanded-chip-group-chip_nine_select_collapsed"
433
- >Chip nine</span>
457
+ <li class="pf-v6-c-label-group__list-item">
458
+ <span class="pf-v6-c-label pf-m-outline">
459
+ <span class="pf-v6-c-label__content">
460
+ <span class="pf-v6-c-label__content">
461
+ <span
462
+ class="pf-v6-c-label__text"
463
+ id="text-input-group-filters-expanded-label-group-label_nine_select_collapsed"
464
+ >Label nine</span>
465
+ </span>
466
+ <span class="pf-v6-c-label__actions">
467
+ <button
468
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
469
+ type="button"
470
+ aria-labelledby="text-input-group-filters-expanded-label-group-remove_label_nine_select_collapsed text-input-group-filters-expanded-label-group-label_nine_select_collapsed"
471
+ aria-label="Remove"
472
+ id="text-input-group-filters-expanded-label-group-remove_label_nine_select_collapsed"
473
+ >
474
+ <i class="fas fa-times" aria-hidden="true"></i>
475
+ </button>
476
+ </span>
434
477
  </span>
435
- <span class="pf-v6-c-chip__actions">
436
- <button
437
- class="pf-v6-c-button pf-m-plain"
438
- type="button"
439
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_nine_select_collapsed text-input-group-filters-expanded-chip-group-chip_nine_select_collapsed"
440
- aria-label="Remove"
441
- id="text-input-group-filters-expanded-chip-group-remove_chip_nine_select_collapsed"
442
- >
443
- <i class="fas fa-times" aria-hidden="true"></i>
444
- </button>
445
- </span>
446
- </div>
478
+ </span>
447
479
  </li>
448
- <li class="pf-v6-c-chip-group__list-item">
449
- <div class="pf-v6-c-chip">
450
- <span class="pf-v6-c-chip__content">
451
- <span
452
- class="pf-v6-c-chip__text"
453
- id="text-input-group-filters-expanded-chip-group-chip_ten_select_collapsed"
454
- >Chip ten</span>
480
+ <li class="pf-v6-c-label-group__list-item">
481
+ <span class="pf-v6-c-label pf-m-outline">
482
+ <span class="pf-v6-c-label__content">
483
+ <span class="pf-v6-c-label__content">
484
+ <span
485
+ class="pf-v6-c-label__text"
486
+ id="text-input-group-filters-expanded-label-group-label_ten_select_collapsed"
487
+ >Label ten</span>
488
+ </span>
489
+ <span class="pf-v6-c-label__actions">
490
+ <button
491
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
492
+ type="button"
493
+ aria-labelledby="text-input-group-filters-expanded-label-group-remove_label_ten_select_collapsed text-input-group-filters-expanded-label-group-label_ten_select_collapsed"
494
+ aria-label="Remove"
495
+ id="text-input-group-filters-expanded-label-group-remove_label_ten_select_collapsed"
496
+ >
497
+ <i class="fas fa-times" aria-hidden="true"></i>
498
+ </button>
499
+ </span>
455
500
  </span>
456
- <span class="pf-v6-c-chip__actions">
457
- <button
458
- class="pf-v6-c-button pf-m-plain"
459
- type="button"
460
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_ten_select_collapsed text-input-group-filters-expanded-chip-group-chip_ten_select_collapsed"
461
- aria-label="Remove"
462
- id="text-input-group-filters-expanded-chip-group-remove_chip_ten_select_collapsed"
463
- >
464
- <i class="fas fa-times" aria-hidden="true"></i>
465
- </button>
466
- </span>
467
- </div>
501
+ </span>
468
502
  </li>
469
- <li class="pf-v6-c-chip-group__list-item">
470
- <div class="pf-v6-c-chip">
471
- <span class="pf-v6-c-chip__content">
472
- <span
473
- class="pf-v6-c-chip__text"
474
- id="text-input-group-filters-expanded-chip-group-chip_eleven_select_collapsed"
475
- >Chip eleven</span>
476
- </span>
477
- <span class="pf-v6-c-chip__actions">
478
- <button
479
- class="pf-v6-c-button pf-m-plain"
480
- type="button"
481
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_eleven_select_collapsed text-input-group-filters-expanded-chip-group-chip_eleven_select_collapsed"
482
- aria-label="Remove"
483
- id="text-input-group-filters-expanded-chip-group-remove_chip_eleven_select_collapsed"
484
- >
485
- <i class="fas fa-times" aria-hidden="true"></i>
486
- </button>
503
+ <li class="pf-v6-c-label-group__list-item">
504
+ <span class="pf-v6-c-label pf-m-outline">
505
+ <span class="pf-v6-c-label__content">
506
+ <span class="pf-v6-c-label__content">
507
+ <span
508
+ class="pf-v6-c-label__text"
509
+ id="text-input-group-filters-expanded-label-group-label_eleven_select_collapsed"
510
+ >Label eleven</span>
511
+ </span>
512
+ <span class="pf-v6-c-label__actions">
513
+ <button
514
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
515
+ type="button"
516
+ aria-labelledby="text-input-group-filters-expanded-label-group-remove_label_eleven_select_collapsed text-input-group-filters-expanded-label-group-label_eleven_select_collapsed"
517
+ aria-label="Remove"
518
+ id="text-input-group-filters-expanded-label-group-remove_label_eleven_select_collapsed"
519
+ >
520
+ <i class="fas fa-times" aria-hidden="true"></i>
521
+ </button>
522
+ </span>
487
523
  </span>
488
- </div>
524
+ </span>
489
525
  </li>
490
- <li class="pf-v6-c-chip-group__list-item">
491
- <div class="pf-v6-c-chip">
492
- <span class="pf-v6-c-chip__content">
493
- <span
494
- class="pf-v6-c-chip__text"
495
- id="text-input-group-filters-expanded-chip-group-chip_twelve_select_collapsed"
496
- >Chip twelve</span>
526
+ <li class="pf-v6-c-label-group__list-item">
527
+ <span class="pf-v6-c-label pf-m-outline">
528
+ <span class="pf-v6-c-label__content">
529
+ <span class="pf-v6-c-label__content">
530
+ <span
531
+ class="pf-v6-c-label__text"
532
+ id="text-input-group-filters-expanded-label-group-label_twelve_select_collapsed"
533
+ >Label twelve</span>
534
+ </span>
535
+ <span class="pf-v6-c-label__actions">
536
+ <button
537
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
538
+ type="button"
539
+ aria-labelledby="text-input-group-filters-expanded-label-group-remove_label_twelve_select_collapsed text-input-group-filters-expanded-label-group-label_twelve_select_collapsed"
540
+ aria-label="Remove"
541
+ id="text-input-group-filters-expanded-label-group-remove_label_twelve_select_collapsed"
542
+ >
543
+ <i class="fas fa-times" aria-hidden="true"></i>
544
+ </button>
545
+ </span>
497
546
  </span>
498
- <span class="pf-v6-c-chip__actions">
499
- <button
500
- class="pf-v6-c-button pf-m-plain"
501
- type="button"
502
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_twelve_select_collapsed text-input-group-filters-expanded-chip-group-chip_twelve_select_collapsed"
503
- aria-label="Remove"
504
- id="text-input-group-filters-expanded-chip-group-remove_chip_twelve_select_collapsed"
505
- >
506
- <i class="fas fa-times" aria-hidden="true"></i>
507
- </button>
508
- </span>
509
- </div>
547
+ </span>
510
548
  </li>
511
- <li class="pf-v6-c-chip-group__list-item">
512
- <div class="pf-v6-c-chip">
513
- <span class="pf-v6-c-chip__content">
514
- <span
515
- class="pf-v6-c-chip__text"
516
- id="text-input-group-filters-expanded-chip-group-chip_thirteen_select_collapsed"
517
- >Chip thirteen</span>
518
- </span>
519
- <span class="pf-v6-c-chip__actions">
520
- <button
521
- class="pf-v6-c-button pf-m-plain"
522
- type="button"
523
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_thirteen_select_collapsed text-input-group-filters-expanded-chip-group-chip_thirteen_select_collapsed"
524
- aria-label="Remove"
525
- id="text-input-group-filters-expanded-chip-group-remove_chip_thirteen_select_collapsed"
526
- >
527
- <i class="fas fa-times" aria-hidden="true"></i>
528
- </button>
549
+ <li class="pf-v6-c-label-group__list-item">
550
+ <span class="pf-v6-c-label pf-m-outline">
551
+ <span class="pf-v6-c-label__content">
552
+ <span class="pf-v6-c-label__content">
553
+ <span
554
+ class="pf-v6-c-label__text"
555
+ id="text-input-group-filters-expanded-label-group-label_thirteen_select_collapsed"
556
+ >Label thirteen</span>
557
+ </span>
558
+ <span class="pf-v6-c-label__actions">
559
+ <button
560
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
561
+ type="button"
562
+ aria-labelledby="text-input-group-filters-expanded-label-group-remove_label_thirteen_select_collapsed text-input-group-filters-expanded-label-group-label_thirteen_select_collapsed"
563
+ aria-label="Remove"
564
+ id="text-input-group-filters-expanded-label-group-remove_label_thirteen_select_collapsed"
565
+ >
566
+ <i class="fas fa-times" aria-hidden="true"></i>
567
+ </button>
568
+ </span>
529
569
  </span>
530
- </div>
570
+ </span>
531
571
  </li>
532
- <li class="pf-v6-c-chip-group__list-item">
533
- <div class="pf-v6-c-chip">
534
- <span class="pf-v6-c-chip__content">
535
- <span
536
- class="pf-v6-c-chip__text"
537
- id="text-input-group-filters-expanded-chip-group-chip_fourteen_select_collapsed"
538
- >Chip fourteen</span>
572
+ <li class="pf-v6-c-label-group__list-item">
573
+ <span class="pf-v6-c-label pf-m-outline">
574
+ <span class="pf-v6-c-label__content">
575
+ <span class="pf-v6-c-label__content">
576
+ <span
577
+ class="pf-v6-c-label__text"
578
+ id="text-input-group-filters-expanded-label-group-label_fourteen_select_collapsed"
579
+ >Label fourteen</span>
580
+ </span>
581
+ <span class="pf-v6-c-label__actions">
582
+ <button
583
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
584
+ type="button"
585
+ aria-labelledby="text-input-group-filters-expanded-label-group-remove_label_fourteen_select_collapsed text-input-group-filters-expanded-label-group-label_fourteen_select_collapsed"
586
+ aria-label="Remove"
587
+ id="text-input-group-filters-expanded-label-group-remove_label_fourteen_select_collapsed"
588
+ >
589
+ <i class="fas fa-times" aria-hidden="true"></i>
590
+ </button>
591
+ </span>
539
592
  </span>
540
- <span class="pf-v6-c-chip__actions">
541
- <button
542
- class="pf-v6-c-button pf-m-plain"
543
- type="button"
544
- aria-labelledby="text-input-group-filters-expanded-chip-group-remove_chip_fourteen_select_collapsed text-input-group-filters-expanded-chip-group-chip_fourteen_select_collapsed"
545
- aria-label="Remove"
546
- id="text-input-group-filters-expanded-chip-group-remove_chip_fourteen_select_collapsed"
547
- >
548
- <i class="fas fa-times" aria-hidden="true"></i>
549
- </button>
550
- </span>
551
- </div>
593
+ </span>
552
594
  </li>
553
595
  </ul>
554
596
  </div>