@patternfly/react-templates 6.2.1-prerelease.10 → 6.2.1-prerelease.12

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 (6) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/umd/assets/{output-BYdBYBe8.css → output-B5m6pu2s.css} +652 -651
  6. package/package.json +3 -3
package/dist/umd/assets/{output-BYdBYBe8.css → output-B5m6pu2s.css} RENAMED
@@ -319,6 +319,161 @@
319
319
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
320
320
  }
321
321
  }
322
+ .pf-v6-c-badge {
323
+ --pf-v6-c-badge--BorderColor: transparent;
324
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
325
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
326
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
327
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
328
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
329
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
330
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
331
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
332
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
333
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
334
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
335
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
336
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
337
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
338
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
339
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
340
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
341
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
342
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
343
+ }
344
+
345
+ .pf-v6-c-badge {
346
+ position: relative;
347
+ display: inline-block;
348
+ min-width: var(--pf-v6-c-badge--MinWidth);
349
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
350
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
351
+ font-size: var(--pf-v6-c-badge--FontSize);
352
+ font-weight: var(--pf-v6-c-badge--FontWeight);
353
+ color: var(--pf-v6-c-badge--Color);
354
+ text-align: center;
355
+ white-space: nowrap;
356
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
357
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
358
+ }
359
+
360
+ .pf-v6-c-badge::after {
361
+ position: absolute;
362
+ inset: 0;
363
+ pointer-events: none;
364
+ content: "";
365
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
366
+ border-radius: inherit;
367
+ }
368
+
369
+ .pf-v6-c-badge.pf-m-read {
370
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
371
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
372
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
373
+ }
374
+
375
+ .pf-v6-c-badge.pf-m-unread {
376
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
377
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
378
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
379
+ }
380
+
381
+ .pf-v6-c-badge.pf-m-disabled {
382
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
383
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
384
+ }
385
+
386
+ .pf-v6-c-badge.pf-m-disabled::after {
387
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
388
+ }
389
+
390
+ .pf-v6-c-badge__toggle-icon {
391
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
392
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
393
+ }
394
+
395
+ .pf-v6-c-check {
396
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
397
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
398
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
399
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
400
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
401
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
402
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
403
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
404
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
405
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
406
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
407
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
408
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
409
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
410
+ }
411
+
412
+ .pf-v6-c-check {
413
+ display: grid;
414
+ grid-template-columns: auto 1fr;
415
+ grid-gap: var(--pf-v6-c-check--GridGap);
416
+ accent-color: var(--pf-v6-c-check--AccentColor);
417
+ }
418
+
419
+ .pf-v6-c-check.pf-m-standalone {
420
+ display: inline-grid;
421
+ grid-template-columns: auto;
422
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
423
+ }
424
+
425
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
426
+ align-self: center;
427
+ transform: none;
428
+ }
429
+
430
+ .pf-v6-c-check__input {
431
+ align-self: start;
432
+ font-size: var(--pf-v6-c-check__label--FontSize);
433
+ line-height: var(--pf-v6-c-check__label--LineHeight);
434
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
435
+ }
436
+
437
+ .pf-v6-c-check__label {
438
+ font-size: var(--pf-v6-c-check__label--FontSize);
439
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
440
+ line-height: var(--pf-v6-c-check__label--LineHeight);
441
+ color: var(--pf-v6-c-check__label--Color);
442
+ }
443
+
444
+ .pf-v6-c-check__description {
445
+ grid-column: 2;
446
+ font-size: var(--pf-v6-c-check__description--FontSize);
447
+ color: var(--pf-v6-c-check__description--Color);
448
+ }
449
+
450
+ .pf-v6-c-check__body {
451
+ grid-column: 2;
452
+ }
453
+
454
+ .pf-v6-c-check__label,
455
+ .pf-v6-c-check__input {
456
+ justify-self: start;
457
+ }
458
+
459
+ label.pf-v6-c-check, .pf-v6-c-check__label,
460
+ .pf-v6-c-check__input {
461
+ cursor: pointer;
462
+ }
463
+
464
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
465
+ .pf-v6-c-check__input:disabled,
466
+ .pf-v6-c-check__input.pf-m-disabled {
467
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
468
+ cursor: not-allowed;
469
+ }
470
+
471
+ .pf-v6-c-check__label-required {
472
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
473
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
474
+ color: var(--pf-v6-c-check__label-required--Color);
475
+ }
476
+
322
477
  .pf-v6-c-menu-toggle {
323
478
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
324
479
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -839,162 +994,6 @@
839
994
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
840
995
  }
841
996
 
842
- .pf-v6-c-label-group {
843
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
844
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
845
- --pf-v6-c-label-group--MaxWidth: 100%;
846
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
847
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
848
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
849
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
850
- --pf-v6-c-label-group__main--MaxWidth: 100%;
851
- --pf-v6-c-label-group__main--MinWidth: 0;
852
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
853
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
854
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
855
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
856
- --pf-v6-c-label-group__list--MaxWidth: 100%;
857
- --pf-v6-c-label-group__list--MinWidth: 0;
858
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
859
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
860
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
861
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
862
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
863
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
864
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
865
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
866
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
867
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
868
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
869
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
870
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
871
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
872
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
873
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
874
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
875
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
876
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
877
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
878
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
879
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
880
- }
881
-
882
- .pf-v6-c-label-group {
883
- display: inline-flex;
884
- row-gap: var(--pf-v6-c-label-group--RowGap);
885
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
886
- align-items: center;
887
- max-width: var(--pf-v6-c-label-group--MaxWidth);
888
- }
889
-
890
- .pf-v6-c-label-group.pf-m-category {
891
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
892
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
893
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
894
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
895
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
896
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
897
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
898
- }
899
-
900
- .pf-v6-c-label-group.pf-m-vertical {
901
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
902
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
903
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
904
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
905
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
906
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
907
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
908
- }
909
-
910
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
911
- align-items: flex-start;
912
- }
913
-
914
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
915
- flex-direction: column;
916
- align-items: flex-start;
917
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
918
- }
919
-
920
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
921
- flex-direction: column;
922
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
923
- }
924
-
925
- .pf-v6-c-label-group.pf-m-editable,
926
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
927
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
928
- display: flex;
929
- }
930
-
931
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
932
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
933
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
934
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
935
- flex: 1;
936
- }
937
-
938
- .pf-v6-c-label-group__main {
939
- display: flex;
940
- flex: 1;
941
- flex-wrap: wrap;
942
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
943
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
944
- align-items: baseline;
945
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
946
- }
947
-
948
- .pf-v6-c-label-group__list {
949
- display: inline-flex;
950
- flex-wrap: wrap;
951
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
952
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
953
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
954
- }
955
-
956
- .pf-v6-c-label-group__list-item {
957
- display: inline-flex;
958
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
959
- }
960
-
961
- .pf-v6-c-label-group__label {
962
- overflow: hidden;
963
- text-overflow: ellipsis;
964
- white-space: nowrap;
965
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
966
- }
967
-
968
- .pf-v6-c-label-group__close {
969
- display: flex;
970
- align-self: flex-start;
971
- }
972
-
973
- .pf-v6-c-label-group__close .pf-v6-c-button {
974
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
975
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
976
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
977
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
978
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
979
- }
980
-
981
- .pf-v6-c-label-group__textarea {
982
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
983
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
984
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
985
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
986
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
987
- white-space: nowrap;
988
- resize: none;
989
- border: 0;
990
- -ms-overflow-style: none;
991
- scrollbar-width: none;
992
- }
993
-
994
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
995
- display: none;
996
- }
997
-
998
997
  .pf-v6-c-button {
999
998
  --pf-v6-c-button--Display: inline-flex;
1000
999
  --pf-v6-c-button--AlignItems: baseline;
@@ -1707,225 +1706,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1707
1706
  transform: scale(1.5);
1708
1707
  }
1709
1708
  }
1710
- .pf-v6-c-text-input-group {
1711
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1712
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
1713
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1714
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1715
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1716
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1717
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1718
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1719
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1720
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1721
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1722
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1723
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1724
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1725
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1726
- --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1727
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1728
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1729
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
1730
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1731
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1732
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1733
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1734
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1735
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1736
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1737
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1738
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1739
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1740
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1741
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1742
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1743
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1744
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1745
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1746
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1747
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1748
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1749
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1750
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1751
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1752
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1753
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1754
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1755
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1756
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1757
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1758
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1759
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1760
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1761
- }
1762
-
1763
- .pf-v6-c-text-input-group {
1764
- position: relative;
1765
- display: flex;
1766
- width: 100%;
1767
- font-size: var(--pf-v6-c-text-input-group__FontSize);
1768
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
1769
- color: var(--pf-v6-c-text-input-group--Color, inherit);
1770
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1771
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1772
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1773
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1774
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1775
- }
1776
-
1777
- .pf-v6-c-text-input-group::before {
1778
- position: absolute;
1779
- inset: 0;
1780
- pointer-events: none;
1781
- content: "";
1782
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1783
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1784
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1785
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1786
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1787
- }
1788
-
1789
- .pf-v6-c-text-input-group.pf-m-disabled {
1790
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1791
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1792
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1793
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1794
- pointer-events: none;
1795
- }
1796
-
1797
- .pf-v6-c-text-input-group.pf-m-plain {
1798
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
1799
- }
1800
-
1801
- .pf-v6-c-text-input-group.pf-m-plain::before {
1802
- border: 0;
1803
- }
1804
-
1805
- .pf-v6-c-text-input-group.pf-m-success {
1806
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1807
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1808
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1809
- }
1810
-
1811
- .pf-v6-c-text-input-group.pf-m-warning {
1812
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1813
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1814
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1815
- }
1816
-
1817
- .pf-v6-c-text-input-group.pf-m-error {
1818
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1819
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1820
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1821
- }
1822
-
1823
- .pf-v6-c-text-input-group:hover {
1824
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1825
- }
1826
-
1827
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1828
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1829
- }
1830
-
1831
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1832
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1833
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1834
- }
1835
-
1836
- .pf-v6-c-text-input-group__main {
1837
- display: flex;
1838
- flex: 1;
1839
- flex-wrap: wrap;
1840
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1841
- min-width: 0;
1842
- }
1843
-
1844
- .pf-v6-c-text-input-group__main.pf-m-icon {
1845
- --pf-v6-c-text-input-group__text--Position: relative;
1846
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1847
- display: inline-flex;
1848
- align-items: center;
1849
- justify-content: center;
1850
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1851
- }
1852
-
1853
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1854
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1855
- }
1856
-
1857
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1858
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1859
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1860
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1861
- }
1862
-
1863
- .pf-v6-c-text-input-group__text {
1864
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
1865
- display: inline-grid;
1866
- flex: 1;
1867
- grid-template-areas: "text-input";
1868
- grid-template-columns: 1fr;
1869
- }
1870
-
1871
- .pf-v6-c-text-input-group__icon {
1872
- position: absolute;
1873
- inset-block-start: 50%;
1874
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1875
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1876
- color: var(--pf-v6-c-text-input-group__icon--Color);
1877
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1878
- }
1879
-
1880
- .pf-v6-c-text-input-group__icon.pf-m-status {
1881
- inset-inline-start: auto;
1882
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1883
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1884
- }
1885
-
1886
- .pf-v6-c-text-input-group__text-input {
1887
- overflow: hidden;
1888
- text-overflow: ellipsis;
1889
- white-space: nowrap;
1890
- position: relative;
1891
- width: 100%;
1892
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1893
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1894
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1895
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1896
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1897
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1898
- border: 0;
1899
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1900
- }
1901
-
1902
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1903
- grid-area: text-input;
1904
- }
1905
-
1906
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
1907
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1908
- }
1909
-
1910
- .pf-v6-c-text-input-group__text-input::placeholder {
1911
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1912
- }
1913
-
1914
- .pf-v6-c-text-input-group__utilities {
1915
- display: flex;
1916
- align-items: center;
1917
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1918
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1919
- }
1920
-
1921
- .pf-v6-c-text-input-group__utilities > * + * {
1922
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1923
- }
1924
-
1925
- .pf-v6-c-text-input-group__group {
1926
- display: flex;
1927
- }
1928
-
1929
1709
  .pf-v6-c-label {
1930
1710
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1931
1711
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -2459,159 +2239,379 @@ input.pf-v6-c-label__content {
2459
2239
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2460
2240
  }
2461
2241
 
2462
- .pf-v6-c-check {
2463
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2464
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2465
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2466
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2467
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2468
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2469
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2470
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2471
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2472
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2473
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2474
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2475
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2476
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2242
+ .pf-v6-c-text-input-group {
2243
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2244
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
2245
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2246
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2247
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2248
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2249
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2250
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2251
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2252
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2253
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2254
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2255
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2256
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
2257
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
2258
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
2259
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2260
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2261
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
2262
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2263
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2264
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2265
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2266
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2267
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2268
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2269
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2270
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2271
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2272
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2273
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2274
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2275
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2276
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2277
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2278
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2279
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2280
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2281
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2282
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2283
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2284
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2285
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2286
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2287
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2288
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2289
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2290
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2291
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2292
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2477
2293
  }
2478
2294
 
2479
- .pf-v6-c-check {
2480
- display: grid;
2481
- grid-template-columns: auto 1fr;
2482
- grid-gap: var(--pf-v6-c-check--GridGap);
2483
- accent-color: var(--pf-v6-c-check--AccentColor);
2295
+ .pf-v6-c-text-input-group {
2296
+ position: relative;
2297
+ display: flex;
2298
+ width: 100%;
2299
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
2300
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
2301
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
2302
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2303
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2304
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2305
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2306
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2484
2307
  }
2485
2308
 
2486
- .pf-v6-c-check.pf-m-standalone {
2487
- display: inline-grid;
2488
- grid-template-columns: auto;
2489
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2309
+ .pf-v6-c-text-input-group::before {
2310
+ position: absolute;
2311
+ inset: 0;
2312
+ pointer-events: none;
2313
+ content: "";
2314
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2315
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2316
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2317
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2318
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2490
2319
  }
2491
2320
 
2492
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2493
- align-self: center;
2494
- transform: none;
2321
+ .pf-v6-c-text-input-group.pf-m-disabled {
2322
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2323
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2324
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2325
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2326
+ pointer-events: none;
2495
2327
  }
2496
2328
 
2497
- .pf-v6-c-check__input {
2498
- align-self: start;
2499
- font-size: var(--pf-v6-c-check__label--FontSize);
2500
- line-height: var(--pf-v6-c-check__label--LineHeight);
2501
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2329
+ .pf-v6-c-text-input-group.pf-m-plain {
2330
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
2502
2331
  }
2503
2332
 
2504
- .pf-v6-c-check__label {
2505
- font-size: var(--pf-v6-c-check__label--FontSize);
2506
- font-weight: var(--pf-v6-c-check__label--FontWeight);
2507
- line-height: var(--pf-v6-c-check__label--LineHeight);
2508
- color: var(--pf-v6-c-check__label--Color);
2333
+ .pf-v6-c-text-input-group.pf-m-plain::before {
2334
+ border: 0;
2509
2335
  }
2510
2336
 
2511
- .pf-v6-c-check__description {
2512
- grid-column: 2;
2513
- font-size: var(--pf-v6-c-check__description--FontSize);
2514
- color: var(--pf-v6-c-check__description--Color);
2337
+ .pf-v6-c-text-input-group.pf-m-success {
2338
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2339
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2340
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2515
2341
  }
2516
2342
 
2517
- .pf-v6-c-check__body {
2518
- grid-column: 2;
2343
+ .pf-v6-c-text-input-group.pf-m-warning {
2344
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2345
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2346
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2519
2347
  }
2520
2348
 
2521
- .pf-v6-c-check__label,
2522
- .pf-v6-c-check__input {
2523
- justify-self: start;
2349
+ .pf-v6-c-text-input-group.pf-m-error {
2350
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2351
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2352
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2524
2353
  }
2525
2354
 
2526
- label.pf-v6-c-check, .pf-v6-c-check__label,
2527
- .pf-v6-c-check__input {
2528
- cursor: pointer;
2355
+ .pf-v6-c-text-input-group:hover {
2356
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2529
2357
  }
2530
2358
 
2531
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2532
- .pf-v6-c-check__input:disabled,
2533
- .pf-v6-c-check__input.pf-m-disabled {
2534
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2535
- cursor: not-allowed;
2359
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2360
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2536
2361
  }
2537
2362
 
2538
- .pf-v6-c-check__label-required {
2539
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2540
- font-size: var(--pf-v6-c-check__label-required--FontSize);
2541
- color: var(--pf-v6-c-check__label-required--Color);
2363
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2364
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2365
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2542
2366
  }
2543
2367
 
2544
- .pf-v6-c-badge {
2545
- --pf-v6-c-badge--BorderColor: transparent;
2546
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2547
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2548
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2549
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2550
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2551
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2552
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2553
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2554
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2555
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2556
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2557
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2558
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2559
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2560
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2561
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2562
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2563
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2564
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2368
+ .pf-v6-c-text-input-group__main {
2369
+ display: flex;
2370
+ flex: 1;
2371
+ flex-wrap: wrap;
2372
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2373
+ min-width: 0;
2565
2374
  }
2566
2375
 
2567
- .pf-v6-c-badge {
2568
- position: relative;
2569
- display: inline-block;
2570
- min-width: var(--pf-v6-c-badge--MinWidth);
2571
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2572
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2573
- font-size: var(--pf-v6-c-badge--FontSize);
2574
- font-weight: var(--pf-v6-c-badge--FontWeight);
2575
- color: var(--pf-v6-c-badge--Color);
2576
- text-align: center;
2577
- white-space: nowrap;
2578
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2579
- border-radius: var(--pf-v6-c-badge--BorderRadius);
2376
+ .pf-v6-c-text-input-group__main.pf-m-icon {
2377
+ --pf-v6-c-text-input-group__text--Position: relative;
2378
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2379
+ display: inline-flex;
2380
+ align-items: center;
2381
+ justify-content: center;
2382
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2580
2383
  }
2581
2384
 
2582
- .pf-v6-c-badge::after {
2583
- position: absolute;
2584
- inset: 0;
2585
- pointer-events: none;
2586
- content: "";
2587
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2588
- border-radius: inherit;
2385
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2386
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2589
2387
  }
2590
2388
 
2591
- .pf-v6-c-badge.pf-m-read {
2592
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2593
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2594
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2389
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2390
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2391
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2392
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2595
2393
  }
2596
2394
 
2597
- .pf-v6-c-badge.pf-m-unread {
2598
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2599
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2600
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2395
+ .pf-v6-c-text-input-group__text {
2396
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
2397
+ display: inline-grid;
2398
+ flex: 1;
2399
+ grid-template-areas: "text-input";
2400
+ grid-template-columns: 1fr;
2601
2401
  }
2602
2402
 
2603
- .pf-v6-c-badge.pf-m-disabled {
2604
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2605
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2606
- }
2403
+ .pf-v6-c-text-input-group__icon {
2404
+ position: absolute;
2405
+ inset-block-start: 50%;
2406
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2407
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2408
+ color: var(--pf-v6-c-text-input-group__icon--Color);
2409
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2410
+ }
2607
2411
 
2608
- .pf-v6-c-badge.pf-m-disabled::after {
2609
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2412
+ .pf-v6-c-text-input-group__icon.pf-m-status {
2413
+ inset-inline-start: auto;
2414
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2415
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2610
2416
  }
2611
2417
 
2612
- .pf-v6-c-badge__toggle-icon {
2613
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2614
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2418
+ .pf-v6-c-text-input-group__text-input {
2419
+ overflow: hidden;
2420
+ text-overflow: ellipsis;
2421
+ white-space: nowrap;
2422
+ position: relative;
2423
+ width: 100%;
2424
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2425
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2426
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2427
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2428
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2429
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2430
+ border: 0;
2431
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2432
+ }
2433
+
2434
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2435
+ grid-area: text-input;
2436
+ }
2437
+
2438
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
2439
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2440
+ }
2441
+
2442
+ .pf-v6-c-text-input-group__text-input::placeholder {
2443
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2444
+ }
2445
+
2446
+ .pf-v6-c-text-input-group__utilities {
2447
+ display: flex;
2448
+ align-items: center;
2449
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2450
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2451
+ }
2452
+
2453
+ .pf-v6-c-text-input-group__utilities > * + * {
2454
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2455
+ }
2456
+
2457
+ .pf-v6-c-text-input-group__group {
2458
+ display: flex;
2459
+ }
2460
+
2461
+ .pf-v6-c-label-group {
2462
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2463
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2464
+ --pf-v6-c-label-group--MaxWidth: 100%;
2465
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2466
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2467
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2468
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2469
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
2470
+ --pf-v6-c-label-group__main--MinWidth: 0;
2471
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2472
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2473
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2474
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2475
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
2476
+ --pf-v6-c-label-group__list--MinWidth: 0;
2477
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2478
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2479
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2480
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2481
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2482
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2483
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2484
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2485
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2486
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2487
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2488
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
2489
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2490
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2491
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2492
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2493
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2494
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2495
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2496
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2497
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2498
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2499
+ }
2500
+
2501
+ .pf-v6-c-label-group {
2502
+ display: inline-flex;
2503
+ row-gap: var(--pf-v6-c-label-group--RowGap);
2504
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
2505
+ align-items: center;
2506
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
2507
+ }
2508
+
2509
+ .pf-v6-c-label-group.pf-m-category {
2510
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2511
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2512
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2513
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2514
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2515
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2516
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2517
+ }
2518
+
2519
+ .pf-v6-c-label-group.pf-m-vertical {
2520
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2521
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2522
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2523
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2524
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2525
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2526
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2527
+ }
2528
+
2529
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2530
+ align-items: flex-start;
2531
+ }
2532
+
2533
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2534
+ flex-direction: column;
2535
+ align-items: flex-start;
2536
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2537
+ }
2538
+
2539
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2540
+ flex-direction: column;
2541
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2542
+ }
2543
+
2544
+ .pf-v6-c-label-group.pf-m-editable,
2545
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2546
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2547
+ display: flex;
2548
+ }
2549
+
2550
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2551
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2552
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2553
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2554
+ flex: 1;
2555
+ }
2556
+
2557
+ .pf-v6-c-label-group__main {
2558
+ display: flex;
2559
+ flex: 1;
2560
+ flex-wrap: wrap;
2561
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
2562
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2563
+ align-items: baseline;
2564
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2565
+ }
2566
+
2567
+ .pf-v6-c-label-group__list {
2568
+ display: inline-flex;
2569
+ flex-wrap: wrap;
2570
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
2571
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2572
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
2573
+ }
2574
+
2575
+ .pf-v6-c-label-group__list-item {
2576
+ display: inline-flex;
2577
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2578
+ }
2579
+
2580
+ .pf-v6-c-label-group__label {
2581
+ overflow: hidden;
2582
+ text-overflow: ellipsis;
2583
+ white-space: nowrap;
2584
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2585
+ }
2586
+
2587
+ .pf-v6-c-label-group__close {
2588
+ display: flex;
2589
+ align-self: flex-start;
2590
+ }
2591
+
2592
+ .pf-v6-c-label-group__close .pf-v6-c-button {
2593
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2594
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2595
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2596
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2597
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2598
+ }
2599
+
2600
+ .pf-v6-c-label-group__textarea {
2601
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2602
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2603
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2604
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2605
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2606
+ white-space: nowrap;
2607
+ resize: none;
2608
+ border: 0;
2609
+ -ms-overflow-style: none;
2610
+ scrollbar-width: none;
2611
+ }
2612
+
2613
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2614
+ display: none;
2615
2615
  }
2616
2616
 
2617
2617
  .pf-v6-c-menu {
@@ -3260,87 +3260,122 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3260
3260
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3261
3261
  }
3262
3262
 
3263
- .pf-v6-c-spinner {
3264
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3265
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3266
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3267
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3268
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3269
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3270
- --pf-v6-c-spinner--StrokeWidth: 10;
3271
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3272
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3273
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3274
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3275
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3276
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3277
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3263
+ .pf-v6-c-breadcrumb {
3264
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3265
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3266
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3267
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3268
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3269
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3270
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3271
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3272
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3273
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3274
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3275
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3276
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3277
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3278
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3279
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3280
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3281
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3282
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3283
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3284
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3278
3285
  }
3279
3286
 
3280
- .pf-v6-c-spinner {
3281
- width: var(--pf-v6-c-spinner--Width);
3282
- height: var(--pf-v6-c-spinner--Height);
3283
- overflow: hidden;
3284
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3287
+ .pf-v6-c-breadcrumb {
3288
+ display: inline-flex;
3285
3289
  }
3286
3290
 
3287
- .pf-v6-c-spinner.pf-m-inline {
3288
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3291
+ .pf-v6-c-breadcrumb__list {
3292
+ display: flex;
3293
+ flex-wrap: wrap;
3294
+ align-items: center;
3289
3295
  }
3290
3296
 
3291
- .pf-v6-c-spinner.pf-m-sm {
3292
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3297
+ .pf-v6-c-breadcrumb__item {
3298
+ display: flex;
3299
+ align-items: baseline;
3300
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3301
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3302
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3303
+ white-space: nowrap;
3304
+ list-style: none;
3293
3305
  }
3294
3306
 
3295
- .pf-v6-c-spinner.pf-m-md {
3296
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3307
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3308
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3297
3309
  }
3298
3310
 
3299
- .pf-v6-c-spinner.pf-m-lg {
3300
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3311
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3312
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3301
3313
  }
3302
3314
 
3303
- .pf-v6-c-spinner.pf-m-xl {
3304
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3315
+ .pf-v6-c-breadcrumb__item-divider {
3316
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3317
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3318
+ line-height: 1;
3319
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3305
3320
  }
3306
3321
 
3307
- .pf-v6-c-spinner__path {
3308
- width: 100%;
3309
- height: 100%;
3310
- stroke: var(--pf-v6-c-spinner--Color);
3311
- stroke-dasharray: 283;
3312
- stroke-dashoffset: 280;
3313
- stroke-linecap: round;
3314
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3315
- transform-origin: 50% 50%;
3316
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3322
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3323
+ scale: -1 1;
3317
3324
  }
3318
3325
 
3319
- @keyframes pf-v6-c-spinner-animation-rotate {
3320
- 0% {
3321
- transform: rotate(0deg);
3322
- }
3323
- 100% {
3324
- transform: rotate(360deg);
3325
- }
3326
+ .pf-v6-c-breadcrumb__link {
3327
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3328
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3329
+ font-size: inherit;
3330
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3331
+ line-height: inherit;
3332
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3333
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3334
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3335
+ word-break: break-word;
3336
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3326
3337
  }
3327
- @keyframes pf-v6-c-spinner-animation-dash {
3328
- 0% {
3329
- stroke-dashoffset: 280;
3330
- transform: rotate(0);
3331
- }
3332
- 15% {
3333
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3334
- }
3335
- 40% {
3336
- stroke-dasharray: 220;
3337
- stroke-dashoffset: 150;
3338
- }
3339
- 100% {
3340
- stroke-dashoffset: 280;
3341
- transform: rotate(720deg);
3342
- }
3338
+
3339
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3340
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3341
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3342
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3343
+ }
3344
+
3345
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3346
+ cursor: default;
3347
+ }
3348
+
3349
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3350
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3351
+ text-decoration-line: none;
3352
+ }
3353
+
3354
+ button.pf-v6-c-breadcrumb__link {
3355
+ border: none;
3356
+ }
3357
+
3358
+ .pf-v6-c-breadcrumb__dropdown {
3359
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3360
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3361
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3362
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3363
+ }
3364
+
3365
+ .pf-v6-c-breadcrumb__heading {
3366
+ display: inline;
3367
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3368
+ }
3369
+
3370
+ .pf-v6-c-breadcrumb__link,
3371
+ .pf-v6-c-breadcrumb__heading {
3372
+ white-space: normal;
3343
3373
  }
3374
+
3375
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3376
+ display: none;
3377
+ }
3378
+
3344
3379
  .pf-v6-c-tooltip {
3345
3380
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3346
3381
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3472,118 +3507,84 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3472
3507
  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));
3473
3508
  }
3474
3509
 
3475
- .pf-v6-c-breadcrumb {
3476
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3477
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3478
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3479
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3480
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3481
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3482
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3483
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3484
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3485
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3486
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3487
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3488
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3489
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3490
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3491
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3492
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3493
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3494
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3495
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3496
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3497
- }
3498
-
3499
- .pf-v6-c-breadcrumb {
3500
- display: inline-flex;
3501
- }
3502
-
3503
- .pf-v6-c-breadcrumb__list {
3504
- display: flex;
3505
- flex-wrap: wrap;
3506
- align-items: center;
3507
- }
3508
-
3509
- .pf-v6-c-breadcrumb__item {
3510
- display: flex;
3511
- align-items: baseline;
3512
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3513
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3514
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3515
- white-space: nowrap;
3516
- list-style: none;
3517
- }
3518
-
3519
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3520
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3521
- }
3522
-
3523
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3524
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3525
- }
3526
-
3527
- .pf-v6-c-breadcrumb__item-divider {
3528
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3529
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3530
- line-height: 1;
3531
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3532
- }
3533
-
3534
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3535
- scale: -1 1;
3510
+ .pf-v6-c-spinner {
3511
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3512
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3513
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3514
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3515
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3516
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3517
+ --pf-v6-c-spinner--StrokeWidth: 10;
3518
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3519
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3520
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3521
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3522
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3523
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3524
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3536
3525
  }
3537
3526
 
3538
- .pf-v6-c-breadcrumb__link {
3539
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3540
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3541
- font-size: inherit;
3542
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3543
- line-height: inherit;
3544
- color: var(--pf-v6-c-breadcrumb__link--Color);
3545
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3546
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3547
- word-break: break-word;
3548
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3527
+ .pf-v6-c-spinner {
3528
+ width: var(--pf-v6-c-spinner--Width);
3529
+ height: var(--pf-v6-c-spinner--Height);
3530
+ overflow: hidden;
3531
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3549
3532
  }
3550
3533
 
3551
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3552
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3553
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3554
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3534
+ .pf-v6-c-spinner.pf-m-inline {
3535
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3555
3536
  }
3556
3537
 
3557
- .pf-v6-c-breadcrumb__link.pf-m-current {
3558
- cursor: default;
3538
+ .pf-v6-c-spinner.pf-m-sm {
3539
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3559
3540
  }
3560
3541
 
3561
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3562
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3563
- text-decoration-line: none;
3542
+ .pf-v6-c-spinner.pf-m-md {
3543
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3564
3544
  }
3565
3545
 
3566
- button.pf-v6-c-breadcrumb__link {
3567
- border: none;
3546
+ .pf-v6-c-spinner.pf-m-lg {
3547
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3568
3548
  }
3569
3549
 
3570
- .pf-v6-c-breadcrumb__dropdown {
3571
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3572
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3573
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3574
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3550
+ .pf-v6-c-spinner.pf-m-xl {
3551
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3575
3552
  }
3576
3553
 
3577
- .pf-v6-c-breadcrumb__heading {
3578
- display: inline;
3579
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3554
+ .pf-v6-c-spinner__path {
3555
+ width: 100%;
3556
+ height: 100%;
3557
+ stroke: var(--pf-v6-c-spinner--Color);
3558
+ stroke-dasharray: 283;
3559
+ stroke-dashoffset: 280;
3560
+ stroke-linecap: round;
3561
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3562
+ transform-origin: 50% 50%;
3563
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3580
3564
  }
3581
3565
 
3582
- .pf-v6-c-breadcrumb__link,
3583
- .pf-v6-c-breadcrumb__heading {
3584
- white-space: normal;
3566
+ @keyframes pf-v6-c-spinner-animation-rotate {
3567
+ 0% {
3568
+ transform: rotate(0deg);
3569
+ }
3570
+ 100% {
3571
+ transform: rotate(360deg);
3572
+ }
3585
3573
  }
3586
-
3587
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3588
- display: none;
3574
+ @keyframes pf-v6-c-spinner-animation-dash {
3575
+ 0% {
3576
+ stroke-dashoffset: 280;
3577
+ transform: rotate(0);
3578
+ }
3579
+ 15% {
3580
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3581
+ }
3582
+ 40% {
3583
+ stroke-dasharray: 220;
3584
+ stroke-dashoffset: 150;
3585
+ }
3586
+ 100% {
3587
+ stroke-dashoffset: 280;
3588
+ transform: rotate(720deg);
3589
+ }
3589
3590
  }