@patternfly/react-templates 6.2.0-prerelease.17 → 6.2.0-prerelease.18

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.
@@ -475,88 +475,6 @@
475
475
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
476
476
  }
477
477
 
478
- .pf-v6-c-check {
479
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
480
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
481
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
482
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
483
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
484
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
485
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
486
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
487
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
488
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
489
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
490
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
491
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
492
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
493
- }
494
-
495
- .pf-v6-c-check {
496
- display: grid;
497
- grid-template-columns: auto 1fr;
498
- grid-gap: var(--pf-v6-c-check--GridGap);
499
- accent-color: var(--pf-v6-c-check--AccentColor);
500
- }
501
-
502
- .pf-v6-c-check.pf-m-standalone {
503
- display: inline-grid;
504
- grid-template-columns: auto;
505
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
506
- }
507
-
508
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
509
- align-self: center;
510
- transform: none;
511
- }
512
-
513
- .pf-v6-c-check__input {
514
- align-self: start;
515
- font-size: var(--pf-v6-c-check__label--FontSize);
516
- line-height: var(--pf-v6-c-check__label--LineHeight);
517
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
518
- }
519
-
520
- .pf-v6-c-check__label {
521
- font-size: var(--pf-v6-c-check__label--FontSize);
522
- font-weight: var(--pf-v6-c-check__label--FontWeight);
523
- line-height: var(--pf-v6-c-check__label--LineHeight);
524
- color: var(--pf-v6-c-check__label--Color);
525
- }
526
-
527
- .pf-v6-c-check__description {
528
- grid-column: 2;
529
- font-size: var(--pf-v6-c-check__description--FontSize);
530
- color: var(--pf-v6-c-check__description--Color);
531
- }
532
-
533
- .pf-v6-c-check__body {
534
- grid-column: 2;
535
- }
536
-
537
- .pf-v6-c-check__label,
538
- .pf-v6-c-check__input {
539
- justify-self: start;
540
- }
541
-
542
- label.pf-v6-c-check, .pf-v6-c-check__label,
543
- .pf-v6-c-check__input {
544
- cursor: pointer;
545
- }
546
-
547
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
548
- .pf-v6-c-check__input:disabled,
549
- .pf-v6-c-check__input.pf-m-disabled {
550
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
551
- cursor: not-allowed;
552
- }
553
-
554
- .pf-v6-c-check__label-required {
555
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
556
- font-size: var(--pf-v6-c-check__label-required--FontSize);
557
- color: var(--pf-v6-c-check__label-required--Color);
558
- }
559
-
560
478
  .pf-v6-c-button {
561
479
  --pf-v6-c-button--Display: inline-flex;
562
480
  --pf-v6-c-button--AlignItems: baseline;
@@ -1205,235 +1123,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1205
1123
  align-items: center;
1206
1124
  }
1207
1125
 
1208
- .pf-v6-c-label-group {
1209
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1210
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1211
- --pf-v6-c-label-group--MaxWidth: 100%;
1212
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1213
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1214
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1215
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1216
- --pf-v6-c-label-group__main--MaxWidth: 100%;
1217
- --pf-v6-c-label-group__main--MinWidth: 0;
1218
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1219
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1220
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1221
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1222
- --pf-v6-c-label-group__list--MaxWidth: 100%;
1223
- --pf-v6-c-label-group__list--MinWidth: 0;
1224
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1225
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1226
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1227
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1228
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1229
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1230
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1231
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1232
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1233
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1234
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1235
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
1236
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1237
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1238
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1239
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1240
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1241
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1242
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1243
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1244
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1245
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1246
- }
1247
-
1248
- .pf-v6-c-label-group {
1249
- display: inline-flex;
1250
- row-gap: var(--pf-v6-c-label-group--RowGap);
1251
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
1252
- align-items: center;
1253
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1254
- }
1255
-
1256
- .pf-v6-c-label-group.pf-m-category {
1257
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1258
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1259
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1260
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1261
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1262
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1263
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1264
- }
1265
-
1266
- .pf-v6-c-label-group.pf-m-vertical {
1267
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1268
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1269
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1270
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1271
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1272
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1273
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1274
- }
1275
-
1276
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1277
- align-items: flex-start;
1278
- }
1279
-
1280
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1281
- flex-direction: column;
1282
- align-items: flex-start;
1283
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1284
- }
1285
-
1286
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1287
- flex-direction: column;
1288
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1289
- }
1290
-
1291
- .pf-v6-c-label-group.pf-m-editable,
1292
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1293
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1294
- display: flex;
1295
- }
1296
-
1297
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1298
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1299
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1300
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1301
- flex: 1;
1302
- }
1303
-
1304
- .pf-v6-c-label-group__main {
1305
- display: flex;
1306
- flex: 1;
1307
- flex-wrap: wrap;
1308
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
1309
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1310
- align-items: baseline;
1311
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1312
- }
1313
-
1314
- .pf-v6-c-label-group__list {
1315
- display: inline-flex;
1316
- flex-wrap: wrap;
1317
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1318
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1319
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1320
- }
1321
-
1322
- .pf-v6-c-label-group__list-item {
1323
- display: inline-flex;
1324
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1325
- }
1326
-
1327
- .pf-v6-c-label-group__label {
1328
- overflow: hidden;
1329
- text-overflow: ellipsis;
1330
- white-space: nowrap;
1331
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1332
- }
1333
-
1334
- .pf-v6-c-label-group__close {
1335
- display: flex;
1336
- align-self: flex-start;
1337
- }
1338
-
1339
- .pf-v6-c-label-group__close .pf-v6-c-button {
1340
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1341
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1342
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1343
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1344
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1345
- }
1346
-
1347
- .pf-v6-c-label-group__textarea {
1348
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1349
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1350
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1351
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1352
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1353
- white-space: nowrap;
1354
- resize: none;
1355
- border: 0;
1356
- -ms-overflow-style: none;
1357
- scrollbar-width: none;
1358
- }
1359
-
1360
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1361
- display: none;
1362
- }
1363
-
1364
- .pf-v6-c-badge {
1365
- --pf-v6-c-badge--BorderColor: transparent;
1366
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1367
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1368
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1369
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1370
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1371
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1372
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1373
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1374
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1375
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1376
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1377
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1378
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1379
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1380
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1381
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1382
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1383
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1384
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1385
- }
1386
-
1387
- .pf-v6-c-badge {
1388
- position: relative;
1389
- display: inline-block;
1390
- min-width: var(--pf-v6-c-badge--MinWidth);
1391
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1392
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1393
- font-size: var(--pf-v6-c-badge--FontSize);
1394
- font-weight: var(--pf-v6-c-badge--FontWeight);
1395
- color: var(--pf-v6-c-badge--Color);
1396
- text-align: center;
1397
- white-space: nowrap;
1398
- background-color: var(--pf-v6-c-badge--BackgroundColor);
1399
- border-radius: var(--pf-v6-c-badge--BorderRadius);
1400
- }
1401
-
1402
- .pf-v6-c-badge::after {
1403
- position: absolute;
1404
- inset: 0;
1405
- pointer-events: none;
1406
- content: "";
1407
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1408
- border-radius: inherit;
1409
- }
1410
-
1411
- .pf-v6-c-badge.pf-m-read {
1412
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1413
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1414
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1415
- }
1416
-
1417
- .pf-v6-c-badge.pf-m-unread {
1418
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1419
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1420
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1421
- }
1422
-
1423
- .pf-v6-c-badge.pf-m-disabled {
1424
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1425
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1426
- }
1427
-
1428
- .pf-v6-c-badge.pf-m-disabled::after {
1429
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1430
- }
1431
-
1432
- .pf-v6-c-badge__toggle-icon {
1433
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1434
- color: var(--pf-v6-c-badge__toggle-icon--Color);
1435
- }
1436
-
1437
1126
  .pf-v6-c-label {
1438
1127
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1439
1128
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -2185,128 +1874,357 @@ input.pf-v6-c-label__content {
2185
1874
  display: flex;
2186
1875
  }
2187
1876
 
2188
- .pf-v6-c-divider {
2189
- --pf-v6-c-divider--Display: flex;
2190
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2191
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2192
- --pf-v6-c-divider--before--FlexBasis: 100%;
1877
+ .pf-v6-c-label-group {
1878
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1879
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1880
+ --pf-v6-c-label-group--MaxWidth: 100%;
1881
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1882
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1883
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1884
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1885
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
1886
+ --pf-v6-c-label-group__main--MinWidth: 0;
1887
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1888
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1889
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1890
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1891
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
1892
+ --pf-v6-c-label-group__list--MinWidth: 0;
1893
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1894
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1895
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1896
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1897
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1898
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1899
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1900
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1901
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1902
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1903
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1904
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
1905
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1906
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1907
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1908
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1909
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1910
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1911
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1912
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1913
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1914
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2193
1915
  }
2194
1916
 
2195
- .pf-v6-c-divider {
2196
- flex-direction: row;
2197
- width: 100%;
2198
- height: var(--pf-v6-c-divider--Size);
2199
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2200
- --pf-v6-hidden-visible--hidden--Display: none;
2201
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2202
- display: var(--pf-v6-hidden-visible--Display);
2203
- flex-shrink: 0;
2204
- align-items: stretch;
2205
- align-self: stretch;
2206
- justify-content: center;
2207
- border: 0;
1917
+ .pf-v6-c-label-group {
1918
+ display: inline-flex;
1919
+ row-gap: var(--pf-v6-c-label-group--RowGap);
1920
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
1921
+ align-items: center;
1922
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
2208
1923
  }
2209
1924
 
2210
- .pf-v6-c-divider.pf-m-hidden {
2211
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1925
+ .pf-v6-c-label-group.pf-m-category {
1926
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1927
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1928
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1929
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1930
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1931
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1932
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2212
1933
  }
2213
1934
 
2214
- @media screen and (min-width: 36rem) {
2215
- .pf-v6-c-divider.pf-m-hidden-on-sm {
2216
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2217
- }
2218
- .pf-v6-c-divider.pf-m-visible-on-sm {
2219
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2220
- }
2221
- }
2222
- @media screen and (min-width: 48rem) {
2223
- .pf-v6-c-divider.pf-m-hidden-on-md {
2224
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2225
- }
2226
- .pf-v6-c-divider.pf-m-visible-on-md {
2227
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2228
- }
2229
- }
2230
- @media screen and (min-width: 62rem) {
2231
- .pf-v6-c-divider.pf-m-hidden-on-lg {
2232
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2233
- }
2234
- .pf-v6-c-divider.pf-m-visible-on-lg {
2235
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2236
- }
2237
- }
2238
- @media screen and (min-width: 75rem) {
2239
- .pf-v6-c-divider.pf-m-hidden-on-xl {
2240
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2241
- }
2242
- .pf-v6-c-divider.pf-m-visible-on-xl {
2243
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2244
- }
2245
- }
2246
- @media screen and (min-width: 90.625rem) {
2247
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
2248
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2249
- }
2250
- .pf-v6-c-divider.pf-m-visible-on-2xl {
2251
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2252
- }
2253
- }
2254
- .pf-v6-c-divider::before {
2255
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2256
- content: "";
2257
- background-color: var(--pf-v6-c-divider--Color);
1935
+ .pf-v6-c-label-group.pf-m-vertical {
1936
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1937
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1938
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1939
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1940
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1941
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1942
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2258
1943
  }
2259
1944
 
2260
- .pf-v6-c-divider.pf-m-horizontal {
2261
- flex-direction: row;
2262
- width: 100%;
2263
- height: var(--pf-v6-c-divider--Size);
1945
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1946
+ align-items: flex-start;
2264
1947
  }
2265
1948
 
2266
- .pf-v6-c-divider.pf-m-vertical {
1949
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2267
1950
  flex-direction: column;
2268
- width: var(--pf-v6-c-divider--Size);
2269
- height: inherit;
1951
+ align-items: flex-start;
1952
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2270
1953
  }
2271
1954
 
2272
- .pf-v6-c-divider.pf-m-inset-none {
2273
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1955
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1956
+ flex-direction: column;
1957
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2274
1958
  }
2275
1959
 
2276
- .pf-v6-c-divider.pf-m-inset-xs {
2277
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1960
+ .pf-v6-c-label-group.pf-m-editable,
1961
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1962
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1963
+ display: flex;
2278
1964
  }
2279
1965
 
2280
- .pf-v6-c-divider.pf-m-inset-sm {
2281
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1966
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1967
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1968
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1969
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1970
+ flex: 1;
2282
1971
  }
2283
1972
 
2284
- .pf-v6-c-divider.pf-m-inset-md {
2285
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1973
+ .pf-v6-c-label-group__main {
1974
+ display: flex;
1975
+ flex: 1;
1976
+ flex-wrap: wrap;
1977
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1978
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1979
+ align-items: baseline;
1980
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2286
1981
  }
2287
1982
 
2288
- .pf-v6-c-divider.pf-m-inset-lg {
2289
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1983
+ .pf-v6-c-label-group__list {
1984
+ display: inline-flex;
1985
+ flex-wrap: wrap;
1986
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1987
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1988
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
2290
1989
  }
2291
1990
 
2292
- .pf-v6-c-divider.pf-m-inset-xl {
2293
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1991
+ .pf-v6-c-label-group__list-item {
1992
+ display: inline-flex;
1993
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2294
1994
  }
2295
1995
 
2296
- .pf-v6-c-divider.pf-m-inset-2xl {
2297
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1996
+ .pf-v6-c-label-group__label {
1997
+ overflow: hidden;
1998
+ text-overflow: ellipsis;
1999
+ white-space: nowrap;
2000
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2298
2001
  }
2299
2002
 
2300
- .pf-v6-c-divider.pf-m-inset-3xl {
2301
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2003
+ .pf-v6-c-label-group__close {
2004
+ display: flex;
2005
+ align-self: flex-start;
2302
2006
  }
2303
2007
 
2304
- @media (min-width: 36rem) {
2305
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
2306
- flex-direction: row;
2307
- width: 100%;
2308
- height: var(--pf-v6-c-divider--Size);
2309
- }
2008
+ .pf-v6-c-label-group__close .pf-v6-c-button {
2009
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2010
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2011
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2012
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2013
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2014
+ }
2015
+
2016
+ .pf-v6-c-label-group__textarea {
2017
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2018
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2019
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2020
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2021
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2022
+ white-space: nowrap;
2023
+ resize: none;
2024
+ border: 0;
2025
+ -ms-overflow-style: none;
2026
+ scrollbar-width: none;
2027
+ }
2028
+
2029
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2030
+ display: none;
2031
+ }
2032
+
2033
+ .pf-v6-c-badge {
2034
+ --pf-v6-c-badge--BorderColor: transparent;
2035
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2036
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2037
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2038
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2039
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2040
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2041
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2042
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2043
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2044
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2045
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2046
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2047
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2048
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2049
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2050
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2051
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2052
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2053
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2054
+ }
2055
+
2056
+ .pf-v6-c-badge {
2057
+ position: relative;
2058
+ display: inline-block;
2059
+ min-width: var(--pf-v6-c-badge--MinWidth);
2060
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2061
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2062
+ font-size: var(--pf-v6-c-badge--FontSize);
2063
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2064
+ color: var(--pf-v6-c-badge--Color);
2065
+ text-align: center;
2066
+ white-space: nowrap;
2067
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2068
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
2069
+ }
2070
+
2071
+ .pf-v6-c-badge::after {
2072
+ position: absolute;
2073
+ inset: 0;
2074
+ pointer-events: none;
2075
+ content: "";
2076
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2077
+ border-radius: inherit;
2078
+ }
2079
+
2080
+ .pf-v6-c-badge.pf-m-read {
2081
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2082
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2083
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2084
+ }
2085
+
2086
+ .pf-v6-c-badge.pf-m-unread {
2087
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2088
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2089
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2090
+ }
2091
+
2092
+ .pf-v6-c-badge.pf-m-disabled {
2093
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2094
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2095
+ }
2096
+
2097
+ .pf-v6-c-badge.pf-m-disabled::after {
2098
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2099
+ }
2100
+
2101
+ .pf-v6-c-badge__toggle-icon {
2102
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2103
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2104
+ }
2105
+
2106
+ .pf-v6-c-divider {
2107
+ --pf-v6-c-divider--Display: flex;
2108
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2109
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2110
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2111
+ }
2112
+
2113
+ .pf-v6-c-divider {
2114
+ flex-direction: row;
2115
+ width: 100%;
2116
+ height: var(--pf-v6-c-divider--Size);
2117
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2118
+ --pf-v6-hidden-visible--hidden--Display: none;
2119
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2120
+ display: var(--pf-v6-hidden-visible--Display);
2121
+ flex-shrink: 0;
2122
+ align-items: stretch;
2123
+ align-self: stretch;
2124
+ justify-content: center;
2125
+ border: 0;
2126
+ }
2127
+
2128
+ .pf-v6-c-divider.pf-m-hidden {
2129
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2130
+ }
2131
+
2132
+ @media screen and (min-width: 36rem) {
2133
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
2134
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2135
+ }
2136
+ .pf-v6-c-divider.pf-m-visible-on-sm {
2137
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2138
+ }
2139
+ }
2140
+ @media screen and (min-width: 48rem) {
2141
+ .pf-v6-c-divider.pf-m-hidden-on-md {
2142
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2143
+ }
2144
+ .pf-v6-c-divider.pf-m-visible-on-md {
2145
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2146
+ }
2147
+ }
2148
+ @media screen and (min-width: 62rem) {
2149
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
2150
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2151
+ }
2152
+ .pf-v6-c-divider.pf-m-visible-on-lg {
2153
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2154
+ }
2155
+ }
2156
+ @media screen and (min-width: 75rem) {
2157
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
2158
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2159
+ }
2160
+ .pf-v6-c-divider.pf-m-visible-on-xl {
2161
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2162
+ }
2163
+ }
2164
+ @media screen and (min-width: 90.625rem) {
2165
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
2166
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2167
+ }
2168
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
2169
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2170
+ }
2171
+ }
2172
+ .pf-v6-c-divider::before {
2173
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2174
+ content: "";
2175
+ background-color: var(--pf-v6-c-divider--Color);
2176
+ }
2177
+
2178
+ .pf-v6-c-divider.pf-m-horizontal {
2179
+ flex-direction: row;
2180
+ width: 100%;
2181
+ height: var(--pf-v6-c-divider--Size);
2182
+ }
2183
+
2184
+ .pf-v6-c-divider.pf-m-vertical {
2185
+ flex-direction: column;
2186
+ width: var(--pf-v6-c-divider--Size);
2187
+ height: inherit;
2188
+ }
2189
+
2190
+ .pf-v6-c-divider.pf-m-inset-none {
2191
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2192
+ }
2193
+
2194
+ .pf-v6-c-divider.pf-m-inset-xs {
2195
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2196
+ }
2197
+
2198
+ .pf-v6-c-divider.pf-m-inset-sm {
2199
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2200
+ }
2201
+
2202
+ .pf-v6-c-divider.pf-m-inset-md {
2203
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2204
+ }
2205
+
2206
+ .pf-v6-c-divider.pf-m-inset-lg {
2207
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2208
+ }
2209
+
2210
+ .pf-v6-c-divider.pf-m-inset-xl {
2211
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2212
+ }
2213
+
2214
+ .pf-v6-c-divider.pf-m-inset-2xl {
2215
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2216
+ }
2217
+
2218
+ .pf-v6-c-divider.pf-m-inset-3xl {
2219
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2220
+ }
2221
+
2222
+ @media (min-width: 36rem) {
2223
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
2224
+ flex-direction: row;
2225
+ width: 100%;
2226
+ height: var(--pf-v6-c-divider--Size);
2227
+ }
2310
2228
  }
2311
2229
  @media (min-width: 36rem) {
2312
2230
  .pf-v6-c-divider.pf-m-vertical-on-sm {
@@ -2468,37 +2386,315 @@ input.pf-v6-c-label__content {
2468
2386
  height: var(--pf-v6-c-divider--Size);
2469
2387
  }
2470
2388
  }
2471
- @media (min-width: 90.625rem) {
2472
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
2473
- flex-direction: column;
2474
- width: var(--pf-v6-c-divider--Size);
2475
- height: inherit;
2476
- }
2389
+ @media (min-width: 90.625rem) {
2390
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
2391
+ flex-direction: column;
2392
+ width: var(--pf-v6-c-divider--Size);
2393
+ height: inherit;
2394
+ }
2395
+ }
2396
+ @media (min-width: 90.625rem) {
2397
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2398
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2399
+ }
2400
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2401
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2402
+ }
2403
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2404
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2405
+ }
2406
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2407
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2408
+ }
2409
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2410
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2411
+ }
2412
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2413
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2414
+ }
2415
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2416
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2417
+ }
2418
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2419
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2420
+ }
2421
+ }
2422
+ .pf-v6-c-check {
2423
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2424
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2425
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2426
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2427
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2428
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2429
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2430
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2431
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2432
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2433
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2434
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2435
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2436
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2437
+ }
2438
+
2439
+ .pf-v6-c-check {
2440
+ display: grid;
2441
+ grid-template-columns: auto 1fr;
2442
+ grid-gap: var(--pf-v6-c-check--GridGap);
2443
+ accent-color: var(--pf-v6-c-check--AccentColor);
2444
+ }
2445
+
2446
+ .pf-v6-c-check.pf-m-standalone {
2447
+ display: inline-grid;
2448
+ grid-template-columns: auto;
2449
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2450
+ }
2451
+
2452
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2453
+ align-self: center;
2454
+ transform: none;
2455
+ }
2456
+
2457
+ .pf-v6-c-check__input {
2458
+ align-self: start;
2459
+ font-size: var(--pf-v6-c-check__label--FontSize);
2460
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2461
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2462
+ }
2463
+
2464
+ .pf-v6-c-check__label {
2465
+ font-size: var(--pf-v6-c-check__label--FontSize);
2466
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
2467
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2468
+ color: var(--pf-v6-c-check__label--Color);
2469
+ }
2470
+
2471
+ .pf-v6-c-check__description {
2472
+ grid-column: 2;
2473
+ font-size: var(--pf-v6-c-check__description--FontSize);
2474
+ color: var(--pf-v6-c-check__description--Color);
2475
+ }
2476
+
2477
+ .pf-v6-c-check__body {
2478
+ grid-column: 2;
2479
+ }
2480
+
2481
+ .pf-v6-c-check__label,
2482
+ .pf-v6-c-check__input {
2483
+ justify-self: start;
2484
+ }
2485
+
2486
+ label.pf-v6-c-check, .pf-v6-c-check__label,
2487
+ .pf-v6-c-check__input {
2488
+ cursor: pointer;
2489
+ }
2490
+
2491
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2492
+ .pf-v6-c-check__input:disabled,
2493
+ .pf-v6-c-check__input.pf-m-disabled {
2494
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2495
+ cursor: not-allowed;
2496
+ }
2497
+
2498
+ .pf-v6-c-check__label-required {
2499
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2500
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
2501
+ color: var(--pf-v6-c-check__label-required--Color);
2502
+ }
2503
+
2504
+ .pf-v6-c-breadcrumb {
2505
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2506
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
2507
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2508
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
2509
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2510
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
2511
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2512
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2513
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
2514
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
2515
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
2516
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
2517
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
2518
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
2519
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
2520
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
2521
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
2522
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2523
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
2524
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2525
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2526
+ }
2527
+
2528
+ .pf-v6-c-breadcrumb {
2529
+ display: inline-flex;
2530
+ }
2531
+
2532
+ .pf-v6-c-breadcrumb__list {
2533
+ display: flex;
2534
+ flex-wrap: wrap;
2535
+ align-items: center;
2536
+ }
2537
+
2538
+ .pf-v6-c-breadcrumb__item {
2539
+ display: flex;
2540
+ align-items: baseline;
2541
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
2542
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
2543
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
2544
+ white-space: nowrap;
2545
+ list-style: none;
2546
+ }
2547
+
2548
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
2549
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2550
+ }
2551
+
2552
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
2553
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2554
+ }
2555
+
2556
+ .pf-v6-c-breadcrumb__item-divider {
2557
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
2558
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
2559
+ line-height: 1;
2560
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
2561
+ }
2562
+
2563
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
2564
+ scale: -1 1;
2565
+ }
2566
+
2567
+ .pf-v6-c-breadcrumb__link {
2568
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
2569
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
2570
+ font-size: inherit;
2571
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
2572
+ line-height: inherit;
2573
+ color: var(--pf-v6-c-breadcrumb__link--Color);
2574
+ text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecorationLine) var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
2575
+ word-break: break-word;
2576
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
2577
+ }
2578
+
2579
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
2580
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
2581
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
2582
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
2583
+ }
2584
+
2585
+ .pf-v6-c-breadcrumb__link.pf-m-current {
2586
+ cursor: default;
2587
+ }
2588
+
2589
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
2590
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
2591
+ text-decoration: none;
2592
+ }
2593
+
2594
+ button.pf-v6-c-breadcrumb__link {
2595
+ border: none;
2596
+ }
2597
+
2598
+ .pf-v6-c-breadcrumb__dropdown {
2599
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
2600
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
2601
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
2602
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
2603
+ }
2604
+
2605
+ .pf-v6-c-breadcrumb__heading {
2606
+ display: inline;
2607
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
2608
+ }
2609
+
2610
+ .pf-v6-c-breadcrumb__link,
2611
+ .pf-v6-c-breadcrumb__heading {
2612
+ white-space: normal;
2613
+ }
2614
+
2615
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
2616
+ display: none;
2617
+ }
2618
+
2619
+ .pf-v6-c-spinner {
2620
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
2621
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
2622
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
2623
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
2624
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
2625
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
2626
+ --pf-v6-c-spinner--StrokeWidth: 10;
2627
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
2628
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
2629
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
2630
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
2631
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
2632
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
2633
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
2634
+ }
2635
+
2636
+ .pf-v6-c-spinner {
2637
+ width: var(--pf-v6-c-spinner--Width);
2638
+ height: var(--pf-v6-c-spinner--Height);
2639
+ overflow: hidden;
2640
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
2641
+ }
2642
+
2643
+ .pf-v6-c-spinner.pf-m-inline {
2644
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
2645
+ }
2646
+
2647
+ .pf-v6-c-spinner.pf-m-sm {
2648
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
2649
+ }
2650
+
2651
+ .pf-v6-c-spinner.pf-m-md {
2652
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
2653
+ }
2654
+
2655
+ .pf-v6-c-spinner.pf-m-lg {
2656
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
2657
+ }
2658
+
2659
+ .pf-v6-c-spinner.pf-m-xl {
2660
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
2477
2661
  }
2478
- @media (min-width: 90.625rem) {
2479
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2480
- --pf-v6-c-divider--before--FlexBasis: 100%;
2481
- }
2482
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2483
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2484
- }
2485
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2486
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2662
+
2663
+ .pf-v6-c-spinner__path {
2664
+ width: 100%;
2665
+ height: 100%;
2666
+ stroke: var(--pf-v6-c-spinner--Color);
2667
+ stroke-dasharray: 283;
2668
+ stroke-dashoffset: 280;
2669
+ stroke-linecap: round;
2670
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
2671
+ transform-origin: 50% 50%;
2672
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
2673
+ }
2674
+
2675
+ @keyframes pf-v6-c-spinner-animation-rotate {
2676
+ 0% {
2677
+ transform: rotate(0deg);
2487
2678
  }
2488
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2489
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2679
+ 100% {
2680
+ transform: rotate(360deg);
2490
2681
  }
2491
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2492
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2682
+ }
2683
+ @keyframes pf-v6-c-spinner-animation-dash {
2684
+ 0% {
2685
+ stroke-dashoffset: 280;
2686
+ transform: rotate(0);
2493
2687
  }
2494
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2495
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2688
+ 15% {
2689
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
2496
2690
  }
2497
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2498
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2691
+ 40% {
2692
+ stroke-dasharray: 220;
2693
+ stroke-dashoffset: 150;
2499
2694
  }
2500
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2501
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2695
+ 100% {
2696
+ stroke-dashoffset: 280;
2697
+ transform: rotate(720deg);
2502
2698
  }
2503
2699
  }
2504
2700
  .pf-v6-c-menu {
@@ -3137,121 +3333,6 @@ input.pf-v6-c-label__content {
3137
3333
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3138
3334
  }
3139
3335
 
3140
- .pf-v6-c-breadcrumb {
3141
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3142
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3143
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3144
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3145
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3146
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3147
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3148
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3149
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3150
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3151
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3152
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3153
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3154
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3155
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3156
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3157
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3158
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3159
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3160
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3161
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3162
- }
3163
-
3164
- .pf-v6-c-breadcrumb {
3165
- display: inline-flex;
3166
- }
3167
-
3168
- .pf-v6-c-breadcrumb__list {
3169
- display: flex;
3170
- flex-wrap: wrap;
3171
- align-items: center;
3172
- }
3173
-
3174
- .pf-v6-c-breadcrumb__item {
3175
- display: flex;
3176
- align-items: baseline;
3177
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3178
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3179
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3180
- white-space: nowrap;
3181
- list-style: none;
3182
- }
3183
-
3184
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3185
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3186
- }
3187
-
3188
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3189
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3190
- }
3191
-
3192
- .pf-v6-c-breadcrumb__item-divider {
3193
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3194
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3195
- line-height: 1;
3196
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3197
- }
3198
-
3199
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3200
- scale: -1 1;
3201
- }
3202
-
3203
- .pf-v6-c-breadcrumb__link {
3204
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3205
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3206
- font-size: inherit;
3207
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3208
- line-height: inherit;
3209
- color: var(--pf-v6-c-breadcrumb__link--Color);
3210
- text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecorationLine) var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3211
- word-break: break-word;
3212
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3213
- }
3214
-
3215
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3216
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3217
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3218
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3219
- }
3220
-
3221
- .pf-v6-c-breadcrumb__link.pf-m-current {
3222
- cursor: default;
3223
- }
3224
-
3225
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3226
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3227
- text-decoration: none;
3228
- }
3229
-
3230
- button.pf-v6-c-breadcrumb__link {
3231
- border: none;
3232
- }
3233
-
3234
- .pf-v6-c-breadcrumb__dropdown {
3235
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3236
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3237
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3238
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3239
- }
3240
-
3241
- .pf-v6-c-breadcrumb__heading {
3242
- display: inline;
3243
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3244
- }
3245
-
3246
- .pf-v6-c-breadcrumb__link,
3247
- .pf-v6-c-breadcrumb__heading {
3248
- white-space: normal;
3249
- }
3250
-
3251
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3252
- display: none;
3253
- }
3254
-
3255
3336
  .pf-v6-c-tooltip {
3256
3337
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3257
3338
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3381,86 +3462,4 @@ button.pf-v6-c-breadcrumb__link {
3381
3462
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3382
3463
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3383
3464
  transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
3384
- }
3385
-
3386
- .pf-v6-c-spinner {
3387
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3388
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3389
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3390
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3391
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3392
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3393
- --pf-v6-c-spinner--StrokeWidth: 10;
3394
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3395
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3396
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3397
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3398
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3399
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3400
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3401
- }
3402
-
3403
- .pf-v6-c-spinner {
3404
- width: var(--pf-v6-c-spinner--Width);
3405
- height: var(--pf-v6-c-spinner--Height);
3406
- overflow: hidden;
3407
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3408
- }
3409
-
3410
- .pf-v6-c-spinner.pf-m-inline {
3411
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3412
- }
3413
-
3414
- .pf-v6-c-spinner.pf-m-sm {
3415
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3416
- }
3417
-
3418
- .pf-v6-c-spinner.pf-m-md {
3419
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3420
- }
3421
-
3422
- .pf-v6-c-spinner.pf-m-lg {
3423
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3424
- }
3425
-
3426
- .pf-v6-c-spinner.pf-m-xl {
3427
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3428
- }
3429
-
3430
- .pf-v6-c-spinner__path {
3431
- width: 100%;
3432
- height: 100%;
3433
- stroke: var(--pf-v6-c-spinner--Color);
3434
- stroke-dasharray: 283;
3435
- stroke-dashoffset: 280;
3436
- stroke-linecap: round;
3437
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3438
- transform-origin: 50% 50%;
3439
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3440
- }
3441
-
3442
- @keyframes pf-v6-c-spinner-animation-rotate {
3443
- 0% {
3444
- transform: rotate(0deg);
3445
- }
3446
- 100% {
3447
- transform: rotate(360deg);
3448
- }
3449
- }
3450
- @keyframes pf-v6-c-spinner-animation-dash {
3451
- 0% {
3452
- stroke-dashoffset: 280;
3453
- transform: rotate(0);
3454
- }
3455
- 15% {
3456
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3457
- }
3458
- 40% {
3459
- stroke-dasharray: 220;
3460
- stroke-dashoffset: 150;
3461
- }
3462
- 100% {
3463
- stroke-dashoffset: 280;
3464
- transform: rotate(720deg);
3465
- }
3466
3465
  }