@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/Select/deprecated/Select.md CHANGED
@@ -1029,117 +1029,127 @@ The single select typeahead should be used when the user is selecting one option
1029
1029
 
1030
1030
  <div class="pf-v6-c-select__toggle pf-m-typeahead">
1031
1031
  <div class="pf-v6-c-select__toggle-wrapper">
1032
- <div class="pf-v6-c-chip-group" role="group">
1033
- <div class="pf-v6-c-chip-group__main">
1032
+ <div class="pf-v6-c-label-group">
1033
+ <div class="pf-v6-c-label-group__main">
1034
1034
  <ul
1035
- class="pf-v6-c-chip-group__list"
1035
+ class="pf-v6-c-label-group__list"
1036
1036
  role="list"
1037
- aria-label="Chip group list"
1037
+ aria-label="Label group list"
1038
1038
  >
1039
- <li class="pf-v6-c-chip-group__list-item">
1040
- <div class="pf-v6-c-chip">
1041
- <span class="pf-v6-c-chip__content">
1042
- <span
1043
- class="pf-v6-c-chip__text"
1044
- id="select-multi-typeahead-expanded-chip_one"
1045
- >Arkansas</span>
1039
+ <li class="pf-v6-c-label-group__list-item">
1040
+ <span class="pf-v6-c-label pf-m-outline">
1041
+ <span class="pf-v6-c-label__content">
1042
+ <span class="pf-v6-c-label__content">
1043
+ <span
1044
+ class="pf-v6-c-label__text"
1045
+ id="select-multi-typeahead-expanded-label_one"
1046
+ >Arkansas</span>
1047
+ </span>
1048
+ <span class="pf-v6-c-label__actions">
1049
+ <button
1050
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1051
+ type="button"
1052
+ aria-labelledby="remove_select-multi-typeahead-expanded_label_one select-multi-typeahead-expanded-label_two"
1053
+ aria-label="Remove"
1054
+ id="remove_select-multi-typeahead-expanded_label_one"
1055
+ >
1056
+ <i class="fas fa-times" aria-hidden="true"></i>
1057
+ </button>
1058
+ </span>
1046
1059
  </span>
1047
- <span class="pf-v6-c-chip__actions">
1048
- <button
1049
- class="pf-v6-c-button pf-m-plain"
1050
- type="button"
1051
- aria-labelledby="remove_select-multi-typeahead-expanded_chip_one select-multi-typeahead-expanded-chip_two"
1052
- aria-label="Remove"
1053
- id="remove_select-multi-typeahead-expanded_chip_one"
1054
- >
1055
- <i class="fas fa-times" aria-hidden="true"></i>
1056
- </button>
1057
- </span>
1058
- </div>
1060
+ </span>
1059
1061
  </li>
1060
- <li class="pf-v6-c-chip-group__list-item">
1061
- <div class="pf-v6-c-chip">
1062
- <span class="pf-v6-c-chip__content">
1063
- <span
1064
- class="pf-v6-c-chip__text"
1065
- id="select-multi-typeahead-expanded-chip_two"
1066
- >Massachusetts</span>
1067
- </span>
1068
- <span class="pf-v6-c-chip__actions">
1069
- <button
1070
- class="pf-v6-c-button pf-m-plain"
1071
- type="button"
1072
- aria-labelledby="remove_select-multi-typeahead-expanded_chip_two select-multi-typeahead-expanded-chip_two"
1073
- aria-label="Remove"
1074
- id="remove_select-multi-typeahead-expanded_chip_two"
1075
- >
1076
- <i class="fas fa-times" aria-hidden="true"></i>
1077
- </button>
1062
+ <li class="pf-v6-c-label-group__list-item">
1063
+ <span class="pf-v6-c-label pf-m-outline">
1064
+ <span class="pf-v6-c-label__content">
1065
+ <span class="pf-v6-c-label__content">
1066
+ <span
1067
+ class="pf-v6-c-label__text"
1068
+ id="select-multi-typeahead-expanded-label_two"
1069
+ >Massachusetts</span>
1070
+ </span>
1071
+ <span class="pf-v6-c-label__actions">
1072
+ <button
1073
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1074
+ type="button"
1075
+ aria-labelledby="remove_select-multi-typeahead-expanded_label_two select-multi-typeahead-expanded-label_two"
1076
+ aria-label="Remove"
1077
+ id="remove_select-multi-typeahead-expanded_label_two"
1078
+ >
1079
+ <i class="fas fa-times" aria-hidden="true"></i>
1080
+ </button>
1081
+ </span>
1078
1082
  </span>
1079
- </div>
1083
+ </span>
1080
1084
  </li>
1081
- <li class="pf-v6-c-chip-group__list-item">
1082
- <div class="pf-v6-c-chip">
1083
- <span class="pf-v6-c-chip__content">
1084
- <span
1085
- class="pf-v6-c-chip__text"
1086
- id="select-multi-typeahead-expanded-chip_three"
1087
- >New Mexico</span>
1085
+ <li class="pf-v6-c-label-group__list-item">
1086
+ <span class="pf-v6-c-label pf-m-outline">
1087
+ <span class="pf-v6-c-label__content">
1088
+ <span class="pf-v6-c-label__content">
1089
+ <span
1090
+ class="pf-v6-c-label__text"
1091
+ id="select-multi-typeahead-expanded-label_three"
1092
+ >New Mexico</span>
1093
+ </span>
1094
+ <span class="pf-v6-c-label__actions">
1095
+ <button
1096
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1097
+ type="button"
1098
+ aria-labelledby="remove_select-multi-typeahead-expanded_label_three select-multi-typeahead-expanded-label_three"
1099
+ aria-label="Remove"
1100
+ id="remove_select-multi-typeahead-expanded_label_three"
1101
+ >
1102
+ <i class="fas fa-times" aria-hidden="true"></i>
1103
+ </button>
1104
+ </span>
1088
1105
  </span>
1089
- <span class="pf-v6-c-chip__actions">
1090
- <button
1091
- class="pf-v6-c-button pf-m-plain"
1092
- type="button"
1093
- aria-labelledby="remove_select-multi-typeahead-expanded_chip_three select-multi-typeahead-expanded-chip_three"
1094
- aria-label="Remove"
1095
- id="remove_select-multi-typeahead-expanded_chip_three"
1096
- >
1097
- <i class="fas fa-times" aria-hidden="true"></i>
1098
- </button>
1099
- </span>
1100
- </div>
1106
+ </span>
1101
1107
  </li>
1102
- <li class="pf-v6-c-chip-group__list-item">
1103
- <div class="pf-v6-c-chip">
1104
- <span class="pf-v6-c-chip__content">
1105
- <span
1106
- class="pf-v6-c-chip__text"
1107
- id="select-multi-typeahead-expanded-chip_four"
1108
- >Ohio</span>
1109
- </span>
1110
- <span class="pf-v6-c-chip__actions">
1111
- <button
1112
- class="pf-v6-c-button pf-m-plain"
1113
- type="button"
1114
- aria-labelledby="remove_select-multi-typeahead-expanded_chip_four select-multi-typeahead-expanded-chip_four"
1115
- aria-label="Remove"
1116
- id="remove_select-multi-typeahead-expanded_chip_four"
1117
- >
1118
- <i class="fas fa-times" aria-hidden="true"></i>
1119
- </button>
1108
+ <li class="pf-v6-c-label-group__list-item">
1109
+ <span class="pf-v6-c-label pf-m-outline">
1110
+ <span class="pf-v6-c-label__content">
1111
+ <span class="pf-v6-c-label__content">
1112
+ <span
1113
+ class="pf-v6-c-label__text"
1114
+ id="select-multi-typeahead-expanded-label_four"
1115
+ >Ohio</span>
1116
+ </span>
1117
+ <span class="pf-v6-c-label__actions">
1118
+ <button
1119
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1120
+ type="button"
1121
+ aria-labelledby="remove_select-multi-typeahead-expanded_label_four select-multi-typeahead-expanded-label_four"
1122
+ aria-label="Remove"
1123
+ id="remove_select-multi-typeahead-expanded_label_four"
1124
+ >
1125
+ <i class="fas fa-times" aria-hidden="true"></i>
1126
+ </button>
1127
+ </span>
1120
1128
  </span>
1121
- </div>
1129
+ </span>
1122
1130
  </li>
1123
- <li class="pf-v6-c-chip-group__list-item">
1124
- <div class="pf-v6-c-chip">
1125
- <span class="pf-v6-c-chip__content">
1126
- <span
1127
- class="pf-v6-c-chip__text"
1128
- id="select-multi-typeahead-expanded-chip_five"
1129
- >Washington</span>
1131
+ <li class="pf-v6-c-label-group__list-item">
1132
+ <span class="pf-v6-c-label pf-m-outline">
1133
+ <span class="pf-v6-c-label__content">
1134
+ <span class="pf-v6-c-label__content">
1135
+ <span
1136
+ class="pf-v6-c-label__text"
1137
+ id="select-multi-typeahead-expanded-label_five"
1138
+ >Washington</span>
1139
+ </span>
1140
+ <span class="pf-v6-c-label__actions">
1141
+ <button
1142
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1143
+ type="button"
1144
+ aria-labelledby="remove_select-multi-typeahead-expanded_label_five select-multi-typeahead-expanded-label_five"
1145
+ aria-label="Remove"
1146
+ id="remove_select-multi-typeahead-expanded_label_five"
1147
+ >
1148
+ <i class="fas fa-times" aria-hidden="true"></i>
1149
+ </button>
1150
+ </span>
1130
1151
  </span>
1131
- <span class="pf-v6-c-chip__actions">
1132
- <button
1133
- class="pf-v6-c-button pf-m-plain"
1134
- type="button"
1135
- aria-labelledby="remove_select-multi-typeahead-expanded_chip_five select-multi-typeahead-expanded-chip_five"
1136
- aria-label="Remove"
1137
- id="remove_select-multi-typeahead-expanded_chip_five"
1138
- >
1139
- <i class="fas fa-times" aria-hidden="true"></i>
1140
- </button>
1141
- </span>
1142
- </div>
1152
+ </span>
1143
1153
  </li>
1144
1154
  </ul>
1145
1155
  </div>
@@ -1216,80 +1226,88 @@ The single select typeahead should be used when the user is selecting one option
1216
1226
 
1217
1227
  <div class="pf-v6-c-select__toggle pf-m-typeahead">
1218
1228
  <div class="pf-v6-c-select__toggle-wrapper">
1219
- <div class="pf-v6-c-chip-group" role="group">
1220
- <div class="pf-v6-c-chip-group__main">
1229
+ <div class="pf-v6-c-label-group">
1230
+ <div class="pf-v6-c-label-group__main">
1221
1231
  <ul
1222
- class="pf-v6-c-chip-group__list"
1232
+ class="pf-v6-c-label-group__list"
1223
1233
  role="list"
1224
- aria-label="Chip group list"
1234
+ aria-label="Label group list"
1225
1235
  >
1226
- <li class="pf-v6-c-chip-group__list-item">
1227
- <div class="pf-v6-c-chip">
1228
- <span class="pf-v6-c-chip__content">
1229
- <span
1230
- class="pf-v6-c-chip__text"
1231
- id="select-multi-typeahead-expanded-selected-chip_one"
1232
- >Arkansas</span>
1233
- </span>
1234
- <span class="pf-v6-c-chip__actions">
1235
- <button
1236
- class="pf-v6-c-button pf-m-plain"
1237
- type="button"
1238
- aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_one select-multi-typeahead-expanded-selected-chip_one"
1239
- aria-label="Remove"
1240
- id="remove_select-multi-typeahead-expanded-selected_chip_one"
1241
- >
1242
- <i class="fas fa-times" aria-hidden="true"></i>
1243
- </button>
1236
+ <li class="pf-v6-c-label-group__list-item">
1237
+ <span class="pf-v6-c-label pf-m-outline">
1238
+ <span class="pf-v6-c-label__content">
1239
+ <span class="pf-v6-c-label__content">
1240
+ <span
1241
+ class="pf-v6-c-label__text"
1242
+ id="select-multi-typeahead-expanded-selected-label_one"
1243
+ >Arkansas</span>
1244
+ </span>
1245
+ <span class="pf-v6-c-label__actions">
1246
+ <button
1247
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1248
+ type="button"
1249
+ aria-labelledby="remove_select-multi-typeahead-expanded-selected_label_one select-multi-typeahead-expanded-selected-label_one"
1250
+ aria-label="Remove"
1251
+ id="remove_select-multi-typeahead-expanded-selected_label_one"
1252
+ >
1253
+ <i class="fas fa-times" aria-hidden="true"></i>
1254
+ </button>
1255
+ </span>
1244
1256
  </span>
1245
- </div>
1257
+ </span>
1246
1258
  </li>
1247
- <li class="pf-v6-c-chip-group__list-item">
1248
- <div class="pf-v6-c-chip">
1249
- <span class="pf-v6-c-chip__content">
1250
- <span
1251
- class="pf-v6-c-chip__text"
1252
- id="select-multi-typeahead-expanded-selected-chip_two"
1253
- >Massachusetts</span>
1254
- </span>
1255
- <span class="pf-v6-c-chip__actions">
1256
- <button
1257
- class="pf-v6-c-button pf-m-plain"
1258
- type="button"
1259
- aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_two select-multi-typeahead-expanded-selected-chip_two"
1260
- aria-label="Remove"
1261
- id="remove_select-multi-typeahead-expanded-selected_chip_two"
1262
- >
1263
- <i class="fas fa-times" aria-hidden="true"></i>
1264
- </button>
1259
+ <li class="pf-v6-c-label-group__list-item">
1260
+ <span class="pf-v6-c-label pf-m-outline">
1261
+ <span class="pf-v6-c-label__content">
1262
+ <span class="pf-v6-c-label__content">
1263
+ <span
1264
+ class="pf-v6-c-label__text"
1265
+ id="select-multi-typeahead-expanded-selected-label_two"
1266
+ >Massachusetts</span>
1267
+ </span>
1268
+ <span class="pf-v6-c-label__actions">
1269
+ <button
1270
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1271
+ type="button"
1272
+ aria-labelledby="remove_select-multi-typeahead-expanded-selected_label_two select-multi-typeahead-expanded-selected-label_two"
1273
+ aria-label="Remove"
1274
+ id="remove_select-multi-typeahead-expanded-selected_label_two"
1275
+ >
1276
+ <i class="fas fa-times" aria-hidden="true"></i>
1277
+ </button>
1278
+ </span>
1265
1279
  </span>
1266
- </div>
1280
+ </span>
1267
1281
  </li>
1268
- <li class="pf-v6-c-chip-group__list-item">
1269
- <div class="pf-v6-c-chip">
1270
- <span class="pf-v6-c-chip__content">
1271
- <span
1272
- class="pf-v6-c-chip__text"
1273
- id="select-multi-typeahead-expanded-selected-chip_three"
1274
- >New Mexico</span>
1282
+ <li class="pf-v6-c-label-group__list-item">
1283
+ <span class="pf-v6-c-label pf-m-outline">
1284
+ <span class="pf-v6-c-label__content">
1285
+ <span class="pf-v6-c-label__content">
1286
+ <span
1287
+ class="pf-v6-c-label__text"
1288
+ id="select-multi-typeahead-expanded-selected-label_three"
1289
+ >New Mexico</span>
1290
+ </span>
1291
+ <span class="pf-v6-c-label__actions">
1292
+ <button
1293
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1294
+ type="button"
1295
+ aria-labelledby="remove_select-multi-typeahead-expanded-selected_label_three select-multi-typeahead-expanded-selected-label_three"
1296
+ aria-label="Remove"
1297
+ id="remove_select-multi-typeahead-expanded-selected_label_three"
1298
+ >
1299
+ <i class="fas fa-times" aria-hidden="true"></i>
1300
+ </button>
1301
+ </span>
1275
1302
  </span>
1276
- <span class="pf-v6-c-chip__actions">
1277
- <button
1278
- class="pf-v6-c-button pf-m-plain"
1279
- type="button"
1280
- aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_three select-multi-typeahead-expanded-selected-chip_three"
1281
- aria-label="Remove"
1282
- id="remove_select-multi-typeahead-expanded-selected_chip_three"
1283
- >
1284
- <i class="fas fa-times" aria-hidden="true"></i>
1285
- </button>
1286
- </span>
1287
- </div>
1303
+ </span>
1288
1304
  </li>
1289
- <li class="pf-v6-c-chip-group__list-item">
1290
- <button class="pf-v6-c-chip pf-m-overflow">
1291
- <span class="pf-v6-c-chip__content">
1292
- <span class="pf-v6-c-chip__text">2 more</span>
1305
+ <li class="pf-v6-c-label-group__list-item">
1306
+ <button class="pf-v6-c-label pf-m-overflow">
1307
+ <span class="pf-v6-c-label__content">
1308
+ <span class="pf-v6-c-label__content">
1309
+ <span class="pf-v6-c-label__text">2 more</span>
1310
+ </span>
1293
1311
  </span>
1294
1312
  </button>
1295
1313
  </li>
@@ -1359,117 +1377,127 @@ The single select typeahead should be used when the user is selecting one option
1359
1377
 
1360
1378
  <div class="pf-v6-c-select__toggle pf-m-typeahead">
1361
1379
  <div class="pf-v6-c-select__toggle-wrapper">
1362
- <div class="pf-v6-c-chip-group" role="group">
1363
- <div class="pf-v6-c-chip-group__main">
1380
+ <div class="pf-v6-c-label-group">
1381
+ <div class="pf-v6-c-label-group__main">
1364
1382
  <ul
1365
- class="pf-v6-c-chip-group__list"
1383
+ class="pf-v6-c-label-group__list"
1366
1384
  role="list"
1367
- aria-label="Chip group list"
1385
+ aria-label="Label group list"
1368
1386
  >
1369
- <li class="pf-v6-c-chip-group__list-item">
1370
- <div class="pf-v6-c-chip">
1371
- <span class="pf-v6-c-chip__content">
1372
- <span
1373
- class="pf-v6-c-chip__text"
1374
- id="select-multi-typeahead-invalid-chip_one"
1375
- >Arkansas</span>
1376
- </span>
1377
- <span class="pf-v6-c-chip__actions">
1378
- <button
1379
- class="pf-v6-c-button pf-m-plain"
1380
- type="button"
1381
- aria-labelledby="remove_select-multi-typeahead-invalid_chip_one select-multi-typeahead-invalid-chip_two"
1382
- aria-label="Remove"
1383
- id="remove_select-multi-typeahead-invalid_chip_one"
1384
- >
1385
- <i class="fas fa-times" aria-hidden="true"></i>
1386
- </button>
1387
+ <li class="pf-v6-c-label-group__list-item">
1388
+ <span class="pf-v6-c-label pf-m-outline">
1389
+ <span class="pf-v6-c-label__content">
1390
+ <span class="pf-v6-c-label__content">
1391
+ <span
1392
+ class="pf-v6-c-label__text"
1393
+ id="select-multi-typeahead-invalid-label_one"
1394
+ >Arkansas</span>
1395
+ </span>
1396
+ <span class="pf-v6-c-label__actions">
1397
+ <button
1398
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1399
+ type="button"
1400
+ aria-labelledby="remove_select-multi-typeahead-invalid_label_one select-multi-typeahead-invalid-label_two"
1401
+ aria-label="Remove"
1402
+ id="remove_select-multi-typeahead-invalid_label_one"
1403
+ >
1404
+ <i class="fas fa-times" aria-hidden="true"></i>
1405
+ </button>
1406
+ </span>
1387
1407
  </span>
1388
- </div>
1408
+ </span>
1389
1409
  </li>
1390
- <li class="pf-v6-c-chip-group__list-item">
1391
- <div class="pf-v6-c-chip">
1392
- <span class="pf-v6-c-chip__content">
1393
- <span
1394
- class="pf-v6-c-chip__text"
1395
- id="select-multi-typeahead-invalid-chip_two"
1396
- >Massachusetts</span>
1397
- </span>
1398
- <span class="pf-v6-c-chip__actions">
1399
- <button
1400
- class="pf-v6-c-button pf-m-plain"
1401
- type="button"
1402
- aria-labelledby="remove_select-multi-typeahead-invalid_chip_two select-multi-typeahead-invalid-chip_two"
1403
- aria-label="Remove"
1404
- id="remove_select-multi-typeahead-invalid_chip_two"
1405
- >
1406
- <i class="fas fa-times" aria-hidden="true"></i>
1407
- </button>
1410
+ <li class="pf-v6-c-label-group__list-item">
1411
+ <span class="pf-v6-c-label pf-m-outline">
1412
+ <span class="pf-v6-c-label__content">
1413
+ <span class="pf-v6-c-label__content">
1414
+ <span
1415
+ class="pf-v6-c-label__text"
1416
+ id="select-multi-typeahead-invalid-label_two"
1417
+ >Massachusetts</span>
1418
+ </span>
1419
+ <span class="pf-v6-c-label__actions">
1420
+ <button
1421
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1422
+ type="button"
1423
+ aria-labelledby="remove_select-multi-typeahead-invalid_label_two select-multi-typeahead-invalid-label_two"
1424
+ aria-label="Remove"
1425
+ id="remove_select-multi-typeahead-invalid_label_two"
1426
+ >
1427
+ <i class="fas fa-times" aria-hidden="true"></i>
1428
+ </button>
1429
+ </span>
1408
1430
  </span>
1409
- </div>
1431
+ </span>
1410
1432
  </li>
1411
- <li class="pf-v6-c-chip-group__list-item">
1412
- <div class="pf-v6-c-chip">
1413
- <span class="pf-v6-c-chip__content">
1414
- <span
1415
- class="pf-v6-c-chip__text"
1416
- id="select-multi-typeahead-invalid-chip_three"
1417
- >New Mexico</span>
1433
+ <li class="pf-v6-c-label-group__list-item">
1434
+ <span class="pf-v6-c-label pf-m-outline">
1435
+ <span class="pf-v6-c-label__content">
1436
+ <span class="pf-v6-c-label__content">
1437
+ <span
1438
+ class="pf-v6-c-label__text"
1439
+ id="select-multi-typeahead-invalid-label_three"
1440
+ >New Mexico</span>
1441
+ </span>
1442
+ <span class="pf-v6-c-label__actions">
1443
+ <button
1444
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1445
+ type="button"
1446
+ aria-labelledby="remove_select-multi-typeahead-invalid_label_three select-multi-typeahead-invalid-label_three"
1447
+ aria-label="Remove"
1448
+ id="remove_select-multi-typeahead-invalid_label_three"
1449
+ >
1450
+ <i class="fas fa-times" aria-hidden="true"></i>
1451
+ </button>
1452
+ </span>
1418
1453
  </span>
1419
- <span class="pf-v6-c-chip__actions">
1420
- <button
1421
- class="pf-v6-c-button pf-m-plain"
1422
- type="button"
1423
- aria-labelledby="remove_select-multi-typeahead-invalid_chip_three select-multi-typeahead-invalid-chip_three"
1424
- aria-label="Remove"
1425
- id="remove_select-multi-typeahead-invalid_chip_three"
1426
- >
1427
- <i class="fas fa-times" aria-hidden="true"></i>
1428
- </button>
1429
- </span>
1430
- </div>
1454
+ </span>
1431
1455
  </li>
1432
- <li class="pf-v6-c-chip-group__list-item">
1433
- <div class="pf-v6-c-chip">
1434
- <span class="pf-v6-c-chip__content">
1435
- <span
1436
- class="pf-v6-c-chip__text"
1437
- id="select-multi-typeahead-invalid-chip_four"
1438
- >Ohio</span>
1439
- </span>
1440
- <span class="pf-v6-c-chip__actions">
1441
- <button
1442
- class="pf-v6-c-button pf-m-plain"
1443
- type="button"
1444
- aria-labelledby="remove_select-multi-typeahead-invalid_chip_four select-multi-typeahead-invalid-chip_four"
1445
- aria-label="Remove"
1446
- id="remove_select-multi-typeahead-invalid_chip_four"
1447
- >
1448
- <i class="fas fa-times" aria-hidden="true"></i>
1449
- </button>
1456
+ <li class="pf-v6-c-label-group__list-item">
1457
+ <span class="pf-v6-c-label pf-m-outline">
1458
+ <span class="pf-v6-c-label__content">
1459
+ <span class="pf-v6-c-label__content">
1460
+ <span
1461
+ class="pf-v6-c-label__text"
1462
+ id="select-multi-typeahead-invalid-label_four"
1463
+ >Ohio</span>
1464
+ </span>
1465
+ <span class="pf-v6-c-label__actions">
1466
+ <button
1467
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1468
+ type="button"
1469
+ aria-labelledby="remove_select-multi-typeahead-invalid_label_four select-multi-typeahead-invalid-label_four"
1470
+ aria-label="Remove"
1471
+ id="remove_select-multi-typeahead-invalid_label_four"
1472
+ >
1473
+ <i class="fas fa-times" aria-hidden="true"></i>
1474
+ </button>
1475
+ </span>
1450
1476
  </span>
1451
- </div>
1477
+ </span>
1452
1478
  </li>
1453
- <li class="pf-v6-c-chip-group__list-item">
1454
- <div class="pf-v6-c-chip">
1455
- <span class="pf-v6-c-chip__content">
1456
- <span
1457
- class="pf-v6-c-chip__text"
1458
- id="select-multi-typeahead-invalid-chip_five"
1459
- >Washington</span>
1460
- </span>
1461
- <span class="pf-v6-c-chip__actions">
1462
- <button
1463
- class="pf-v6-c-button pf-m-plain"
1464
- type="button"
1465
- aria-labelledby="remove_select-multi-typeahead-invalid_chip_five select-multi-typeahead-invalid-chip_five"
1466
- aria-label="Remove"
1467
- id="remove_select-multi-typeahead-invalid_chip_five"
1468
- >
1469
- <i class="fas fa-times" aria-hidden="true"></i>
1470
- </button>
1479
+ <li class="pf-v6-c-label-group__list-item">
1480
+ <span class="pf-v6-c-label pf-m-outline">
1481
+ <span class="pf-v6-c-label__content">
1482
+ <span class="pf-v6-c-label__content">
1483
+ <span
1484
+ class="pf-v6-c-label__text"
1485
+ id="select-multi-typeahead-invalid-label_five"
1486
+ >Washington</span>
1487
+ </span>
1488
+ <span class="pf-v6-c-label__actions">
1489
+ <button
1490
+ class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1491
+ type="button"
1492
+ aria-labelledby="remove_select-multi-typeahead-invalid_label_five select-multi-typeahead-invalid-label_five"
1493
+ aria-label="Remove"
1494
+ id="remove_select-multi-typeahead-invalid_label_five"
1495
+ >
1496
+ <i class="fas fa-times" aria-hidden="true"></i>
1497
+ </button>
1498
+ </span>
1471
1499
  </span>
1472
- </div>
1500
+ </span>
1473
1501
  </li>
1474
1502
  </ul>
1475
1503
  </div>