@patternfly/patternfly 6.0.0-alpha.173 → 6.0.0-alpha.175

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 (95) hide show
  1. package/components/Button/button.css +5 -1
  2. package/components/Button/button.scss +5 -1
  3. package/components/Card/card.css +2 -2
  4. package/components/Card/card.scss +1 -1
  5. package/components/ClipboardCopy/clipboard-copy.css +2 -2
  6. package/components/ClipboardCopy/clipboard-copy.scss +2 -2
  7. package/components/Content/content.css +19 -43
  8. package/components/Content/content.scss +17 -60
  9. package/components/JumpLinks/jump-links.css +0 -7
  10. package/components/JumpLinks/jump-links.scss +0 -9
  11. package/components/Label/label.css +2 -2
  12. package/components/Label/label.scss +2 -2
  13. package/components/List/list.css +33 -40
  14. package/components/List/list.scss +39 -48
  15. package/components/NumberInput/number-input.css +0 -1
  16. package/components/NumberInput/number-input.scss +0 -1
  17. package/components/Tabs/tabs.css +1 -18
  18. package/components/Tabs/tabs.scss +1 -18
  19. package/components/_index.css +64 -116
  20. package/docs/components/AboutModalBox/examples/AboutModalBox.md +1 -1
  21. package/docs/components/ActionList/examples/ActionList.md +7 -7
  22. package/docs/components/Alert/examples/Alert.md +44 -46
  23. package/docs/components/BackToTop/examples/BackToTop.md +3 -5
  24. package/docs/components/Banner/examples/Banner.md +1 -1
  25. package/docs/components/Button/examples/Button.md +35 -35
  26. package/docs/components/CalendarMonth/examples/CalendarMonth.md +8 -8
  27. package/docs/components/Card/examples/Card.md +36 -20
  28. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +32 -29
  29. package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
  30. package/docs/components/CodeEditor/examples/CodeEditor.md +18 -21
  31. package/docs/components/DataList/examples/DataList.md +17 -17
  32. package/docs/components/DatePicker/examples/DatePicker.md +6 -6
  33. package/docs/components/DescriptionList/examples/DescriptionList.md +100 -150
  34. package/docs/components/Drawer/examples/Drawer.md +19 -19
  35. package/docs/components/DualListSelector/examples/DualListSelector.md +84 -84
  36. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  37. package/docs/components/Form/examples/Form.md +18 -19
  38. package/docs/components/Hint/examples/Hint.md +2 -2
  39. package/docs/components/InlineEdit/examples/InlineEdit.md +24 -24
  40. package/docs/components/InputGroup/examples/InputGroup.md +2 -2
  41. package/docs/components/JumpLinks/examples/JumpLinks.md +8 -8
  42. package/docs/components/Label/examples/Label.md +217 -217
  43. package/docs/components/LogViewer/examples/LogViewer.md +77 -97
  44. package/docs/components/Login/examples/Login.md +37 -32
  45. package/docs/components/Masthead/examples/masthead.md +6 -6
  46. package/docs/components/Menu/examples/Menu.md +10 -10
  47. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  48. package/docs/components/ModalBox/examples/ModalBox.md +17 -17
  49. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  50. package/docs/components/Nav/examples/Navigation.md +4 -4
  51. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +2 -2
  52. package/docs/components/NumberInput/examples/NumberInput.md +24 -24
  53. package/docs/components/OverflowMenu/examples/overflow-menu.md +6 -6
  54. package/docs/components/Page/examples/Page.md +7 -7
  55. package/docs/components/Pagination/examples/Pagination.md +53 -44
  56. package/docs/components/Popover/examples/Popover.md +30 -15
  57. package/docs/components/Slider/examples/Slider.md +8 -8
  58. package/docs/components/Table/examples/Table.md +433 -203
  59. package/docs/components/Tabs/examples/Tabs.md +364 -358
  60. package/docs/components/TextInputGroup/examples/TextInputGroup.md +364 -404
  61. package/docs/components/Toolbar/examples/Toolbar.md +59 -59
  62. package/docs/components/TreeView/examples/TreeView.md +4 -4
  63. package/docs/components/Wizard/examples/Wizard.md +10 -10
  64. package/docs/demos/AboutModal/examples/AboutModal.md +2 -2
  65. package/docs/demos/Alert/examples/Alert.md +6 -6
  66. package/docs/demos/BackToTop/examples/BackToTop.md +4 -6
  67. package/docs/demos/Banner/examples/Banner.md +2 -2
  68. package/docs/demos/Button/examples/Button.md +1 -1
  69. package/docs/demos/Card/examples/Card.md +54 -79
  70. package/docs/demos/CardView/examples/CardView.md +8 -7
  71. package/docs/demos/Dashboard/examples/Dashboard.md +25 -37
  72. package/docs/demos/DataList/examples/DataList.md +38 -34
  73. package/docs/demos/DescriptionList/examples/DescriptionList.md +4 -4
  74. package/docs/demos/Drawer/examples/Drawer.md +8 -8
  75. package/docs/demos/Form/examples/BasicForms.md +69 -86
  76. package/docs/demos/JumpLinks/examples/JumpLinks.md +14 -20
  77. package/docs/demos/Masthead/examples/Masthead.md +13 -13
  78. package/docs/demos/Modal/examples/Modal.md +15 -15
  79. package/docs/demos/Nav/examples/Nav.md +9 -9
  80. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  81. package/docs/demos/Page/examples/Page.md +9 -9
  82. package/docs/demos/Page/examples/Penta.md +2 -2
  83. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +3 -3
  84. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  85. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +35 -35
  86. package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
  87. package/docs/demos/Table/examples/Table.md +132 -115
  88. package/docs/demos/Tabs/examples/Tabs.md +11 -11
  89. package/docs/demos/Toolbar/examples/Toolbar.md +37 -36
  90. package/docs/demos/Wizard/examples/Wizard.md +22 -23
  91. package/package.json +1 -1
  92. package/patternfly-no-globals.css +64 -116
  93. package/patternfly.css +64 -116
  94. package/patternfly.min.css +1 -1
  95. package/patternfly.min.css.map +1 -1
@@ -102,13 +102,8 @@
102
102
  --pf-v6-c-tabs__item--ScrollSnapAlign: end;
103
103
  --pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis: y;
104
104
  --pf-v6-c-tabs__toggle--Display: flex;
105
- --pf-v6-c-tabs__toggle-icon--Color: currentcolor;
106
105
  --pf-v6-c-tabs__toggle-icon--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
107
106
  --pf-v6-c-tabs__toggle-icon--Rotate: 0;
108
- --pf-v6-c-tabs__toggle-text--MarginInlineStart: 0;
109
- --pf-v6-c-tabs__toggle-button__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
110
- --pf-v6-c-tabs__toggle-button__toggle-text--Color: var(--pf-t--global--text--color--regular);
111
- --pf-v6-c-tabs--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
112
107
  --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
113
108
  --pf-v6-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
114
109
  --pf-v6-c-tabs--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -345,7 +340,6 @@
345
340
  }
346
341
  .pf-v6-c-tabs.pf-m-vertical.pf-m-expanded {
347
342
  --pf-v6-c-tabs__list--Display: flex;
348
- --pf-v6-c-tabs__toggle-icon--Color: var(--pf-v6-c-tabs--m-expanded__toggle-icon--Color);
349
343
  --pf-v6-c-tabs__toggle-icon--Rotate: var(--pf-v6-c-tabs--m-expanded__toggle-icon--Rotate);
350
344
  }
351
345
  .pf-v6-c-tabs.pf-m-box.pf-m-vertical {
@@ -399,19 +393,13 @@
399
393
  align-items: center;
400
394
  }
401
395
 
402
- .pf-v6-c-tabs__toggle-button {
403
- --pf-v6-c-tabs__toggle-text--MarginInlineStart: var(--pf-v6-c-tabs__toggle-button__toggle-text--MarginInlineStart);
404
- --pf-v6-c-tabs__toggle-text--Color: var(--pf-v6-c-tabs__toggle-button__toggle-text--Color);
405
- }
406
396
  .pf-v6-c-tabs__toggle-button .pf-v6-c-button {
407
- display: flex;
408
- text-align: start;
397
+ justify-content: start;
409
398
  white-space: normal;
410
399
  }
411
400
 
412
401
  .pf-v6-c-tabs__toggle-icon {
413
402
  display: inline-block;
414
- color: var(--pf-v6-c-tabs__toggle-icon--Color);
415
403
  transition: var(--pf-v6-c-tabs__toggle-icon--Transition);
416
404
  transform: rotate(var(--pf-v6-c-tabs__toggle-icon--Rotate));
417
405
  }
@@ -419,11 +407,6 @@
419
407
  scale: -1 1;
420
408
  }
421
409
 
422
- .pf-v6-c-tabs__toggle-text {
423
- margin-inline-start: var(--pf-v6-c-tabs__toggle-text--MarginInlineStart);
424
- color: var(--pf-v6-c-tabs__toggle-text--Color, inherit);
425
- }
426
-
427
410
  .pf-v6-c-tabs__list {
428
411
  scrollbar-width: none;
429
412
  -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -129,13 +129,8 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
129
129
 
130
130
  // Expandable
131
131
  --#{$tabs}__toggle--Display: flex;
132
- --#{$tabs}__toggle-icon--Color: currentcolor;
133
132
  --#{$tabs}__toggle-icon--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
134
133
  --#{$tabs}__toggle-icon--Rotate: 0;
135
- --#{$tabs}__toggle-text--MarginInlineStart: 0;
136
- --#{$tabs}__toggle-button__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
137
- --#{$tabs}__toggle-button__toggle-text--Color: var(--pf-t--global--text--color--regular);
138
- --#{$tabs}--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
139
134
  --#{$tabs}--m-expanded__toggle-icon--Rotate: 90deg;
140
135
  --#{$tabs}--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
141
136
  --#{$tabs}--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -389,7 +384,6 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
389
384
 
390
385
  &.pf-m-expanded {
391
386
  --#{$tabs}__list--Display: flex;
392
- --#{$tabs}__toggle-icon--Color: var(--#{$tabs}--m-expanded__toggle-icon--Color);
393
387
  --#{$tabs}__toggle-icon--Rotate: var(--#{$tabs}--m-expanded__toggle-icon--Rotate);
394
388
  }
395
389
  }
@@ -466,12 +460,8 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
466
460
  }
467
461
 
468
462
  .#{$tabs}__toggle-button {
469
- --#{$tabs}__toggle-text--MarginInlineStart: var(--#{$tabs}__toggle-button__toggle-text--MarginInlineStart);
470
- --#{$tabs}__toggle-text--Color: var(--#{$tabs}__toggle-button__toggle-text--Color);
471
-
472
463
  .#{$button} {
473
- display: flex;
474
- text-align: start;
464
+ justify-content: start;
475
465
  white-space: normal;
476
466
  }
477
467
  }
@@ -480,17 +470,10 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
480
470
  @include pf-v6-mirror-inline-on-rtl;
481
471
 
482
472
  display: inline-block;
483
- color: var(--#{$tabs}__toggle-icon--Color);
484
473
  transition: var(--#{$tabs}__toggle-icon--Transition);
485
474
  transform: rotate(var(--#{$tabs}__toggle-icon--Rotate));
486
475
  }
487
476
 
488
- .#{$tabs}__toggle-text {
489
- margin-inline-start: var(--#{$tabs}__toggle-text--MarginInlineStart);
490
- color: var(--#{$tabs}__toggle-text--Color, inherit);
491
- }
492
-
493
-
494
477
  // Tab list
495
478
  .#{$tabs}__list {
496
479
  @include pf-v6-overflow-hide-scroll;
@@ -1490,6 +1490,7 @@ button.pf-v6-c-breadcrumb__link {
1490
1490
  --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1491
1491
  --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
1492
1492
  --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
1493
+ --pf-v6-c-button--m-link--m-inline--JustifyContent: flex-start;
1493
1494
  --pf-v6-c-button--m-link--m-inline--FontSize: initial;
1494
1495
  --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
1495
1496
  --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
@@ -1510,7 +1511,8 @@ button.pf-v6-c-breadcrumb__link {
1510
1511
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1511
1512
  --pf-v6-c-button--m-plain--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
1512
1513
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1513
- --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
1514
+ --pf-v6-c-button--m-plain--Color: var(--pf-t--global--text--color--regular);
1515
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--icon--color--regular);
1514
1516
  --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1515
1517
  --pf-v6-c-button--m-plain--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--m-plain--PaddingBlockStart) + var(--pf-v6-c-button--m-plain--PaddingBlockEnd));
1516
1518
  --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
@@ -1741,6 +1743,7 @@ button.pf-v6-c-breadcrumb__link {
1741
1743
  }
1742
1744
  .pf-v6-c-button.pf-m-link.pf-m-inline {
1743
1745
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
1746
+ --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
1744
1747
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
1745
1748
  --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
1746
1749
  --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
@@ -1860,6 +1863,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1860
1863
  .pf-v6-c-button.pf-m-plain {
1861
1864
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-plain--BorderRadius);
1862
1865
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
1866
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color);
1863
1867
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
1864
1868
  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--PaddingBlockStart);
1865
1869
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
@@ -2495,8 +2499,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2495
2499
  .pf-v6-c-card__title:not(:last-child) {
2496
2500
  padding-block-end: var(--pf-v6-c-card__title--not--last-child--PaddingBlockEnd);
2497
2501
  }
2498
- .pf-v6-c-card__header button.pf-m-inline.pf-m-disabled,
2499
- .pf-v6-c-card__title button.pf-m-inline.pf-m-disabled {
2502
+ .pf-v6-c-card__header .pf-v6-c-button.pf-m-inline:disabled,
2503
+ .pf-v6-c-card__title .pf-v6-c-button.pf-m-inline:disabled {
2500
2504
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-card--c-button--disabled--Color);
2501
2505
  }
2502
2506
 
@@ -2691,8 +2695,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2691
2695
  }
2692
2696
 
2693
2697
  .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain {
2694
- --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--Color);
2695
- --pf-v6-c-button--m-plain--hover--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color);
2698
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--Color);
2699
+ --pf-v6-c-button--m-plain--hover__icon--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color);
2696
2700
  }
2697
2701
 
2698
2702
  :where(:root, .pf-v6-c-code-block) {
@@ -2979,16 +2983,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2979
2983
  --pf-v6-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
2980
2984
  --pf-v6-c-content--blockquote--BorderInlineStartColor: var(--pf-t--global--border--color--default);
2981
2985
  --pf-v6-c-content--blockquote--BorderInlineStartWidth: var(--pf-t--global--border--width--300);
2982
- --pf-v6-c-content--ol--PaddingInlineStart: var(--pf-t--global--spacer--lg);
2983
- --pf-v6-c-content--ol--MarginInlineStart: var(--pf-t--global--spacer--lg);
2984
- --pf-v6-c-content--ol--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
2985
- --pf-v6-c-content--ol--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
2986
- --pf-v6-c-content--ul--PaddingInlineStart: var(--pf-t--global--spacer--lg);
2987
- --pf-v6-c-content--ul--MarginInlineStart: var(--pf-t--global--spacer--lg);
2988
- --pf-v6-c-content--ul--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
2989
- --pf-v6-c-content--ul--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
2986
+ --pf-v6-c-content--list--Gap: var(--pf-t--global--spacer--sm);
2987
+ --pf-v6-c-content--list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
2988
+ --pf-v6-c-content--list--nested--MarginBlockStart: var(--pf-v6-c-content--list--Gap);
2990
2989
  --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style);
2991
- --pf-v6-c-content--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
2992
2990
  --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
2993
2991
  --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
2994
2992
  --pf-v6-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -3058,17 +3056,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3058
3056
  margin-block-end: 0;
3059
3057
  }
3060
3058
 
3061
- :is(.pf-v6-c-content--ol,
3062
- .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
3063
- margin: 0;
3064
- }
3065
- :is(.pf-v6-c-content--ol,
3066
- .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
3067
- padding-inline-start: 0;
3068
- margin-inline-start: 0;
3069
- list-style: none;
3070
- }
3071
-
3072
3059
  :is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
3073
3060
  margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);
3074
3061
  margin-block-end: var(--pf-v6-c-content--h1--MarginBlockEnd);
@@ -3142,36 +3129,29 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3142
3129
  border: none;
3143
3130
  }
3144
3131
 
3145
- :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) {
3146
- padding-inline-start: var(--pf-v6-c-content--ol--PaddingInlineStart);
3147
- margin-inline-start: var(--pf-v6-c-content--ol--MarginInlineStart);
3132
+ :is(.pf-v6-c-content--ol,
3133
+ .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
3134
+ display: flex;
3135
+ flex-direction: column;
3136
+ gap: var(--pf-v6-c-content--list--Gap);
3137
+ padding-inline-start: var(--pf-v6-c-content--list--PaddingInlineStart);
3148
3138
  }
3149
- :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ul,
3150
- ul) {
3151
- --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
3152
- margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
3139
+ :is(.pf-v6-c-content--ol,
3140
+ .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
3141
+ padding-inline-start: 0;
3142
+ list-style: none;
3153
3143
  }
3154
- :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ol,
3155
- ol) {
3156
- --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
3157
- margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
3144
+ :is(.pf-v6-c-content--ol,
3145
+ .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
3146
+ .pf-v6-c-content--ul,
3147
+ ol,
3148
+ ul) {
3149
+ margin-block-start: var(--pf-v6-c-content--list--nested--MarginBlockStart);
3158
3150
  }
3159
3151
 
3160
3152
  :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) {
3161
- padding-inline-start: var(--pf-v6-c-content--ul--PaddingInlineStart);
3162
- margin-inline-start: var(--pf-v6-c-content--ul--MarginInlineStart);
3163
3153
  list-style: var(--pf-v6-c-content--ul--ListStyle);
3164
3154
  }
3165
- :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ul,
3166
- ul) {
3167
- --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
3168
- margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
3169
- }
3170
- :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
3171
- ol) {
3172
- --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
3173
- margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
3174
- }
3175
3155
 
3176
3156
  :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
3177
3157
  display: grid;
@@ -7646,8 +7626,6 @@ label.pf-v6-c-input-group__text {
7646
7626
  --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-t--global--transition);
7647
7627
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
7648
7628
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
7649
- --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
7650
- --pf-v6-c-jump-links__toggle-text--Color: var(--pf-t--global--text--color--regular);
7651
7629
  }
7652
7630
 
7653
7631
  .pf-v6-c-jump-links {
@@ -7843,11 +7821,6 @@ label.pf-v6-c-input-group__text {
7843
7821
  scale: -1 1;
7844
7822
  }
7845
7823
 
7846
- .pf-v6-c-jump-links__toggle-text {
7847
- margin-inline-start: var(--pf-v6-c-jump-links__toggle-text--MarginInlineStart);
7848
- color: var(--pf-v6-c-jump-links__toggle-text--Color);
7849
- }
7850
-
7851
7824
  :where(:root, .pf-v6-c-label) {
7852
7825
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
7853
7826
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -8038,7 +8011,7 @@ label.pf-v6-c-input-group__text {
8038
8011
  --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
8039
8012
  --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
8040
8013
  --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
8041
- --pf-v6-c-label--m-disabled--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
8014
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
8042
8015
  }
8043
8016
 
8044
8017
  .pf-v6-c-label {
@@ -8281,7 +8254,7 @@ label.pf-v6-c-input-group__text {
8281
8254
  pointer-events: none;
8282
8255
  }
8283
8256
  .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
8284
- --pf-v6-c-button--m-plain--disabled--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled--Color);
8257
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
8285
8258
  }
8286
8259
 
8287
8260
  .pf-v6-c-label,
@@ -8478,14 +8451,16 @@ input.pf-v6-c-label__content {
8478
8451
 
8479
8452
  :where(:root, .pf-v6-c-list) {
8480
8453
  --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8481
- --pf-v6-c-list--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
8482
- --pf-v6-c-list--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
8483
8454
  --pf-v6-c-list--ul--ListStyle: var(--pf-t--global--list-style);
8484
- --pf-v6-c-list--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
8485
- --pf-v6-c-list--m-inline--li--MarginInlineEnd: var(--pf-t--global--spacer--lg);
8486
- --pf-v6-c-list--m-bordered--li--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
8487
- --pf-v6-c-list--m-bordered--li--BorderBlockEndColor: var(--pf-t--global--border--color--default);
8488
- --pf-v6-c-list--m-bordered--li--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
8455
+ --pf-v6-c-list--Gap: var(--pf-t--global--spacer--sm);
8456
+ --pf-v6-c-list--nested--PaddingBlockStart: var(--pf-v6-c-list--Gap);
8457
+ --pf-v6-c-list--m-plain--PaddingInlineStart: 0;
8458
+ --pf-v6-c-list--m-inline--PaddingInlineStart: 0;
8459
+ --pf-v6-c-list--m-inline--ColumnGap: var(--pf-t--global--spacer--lg);
8460
+ --pf-v6-c-list--m-inline--RowGap: var(--pf-t--global--spacer--xs);
8461
+ --pf-v6-c-list--m-bordered--li--PaddingBlockStart: var(--pf-v6-c-list--Gap);
8462
+ --pf-v6-c-list--m-bordered--li--BorderBlockStartColor: var(--pf-t--global--border--color--default);
8463
+ --pf-v6-c-list--m-bordered--li--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
8489
8464
  --pf-v6-c-list__item-icon--MinWidth: var(--pf-t--global--icon--size--sm);
8490
8465
  --pf-v6-c-list__item-icon--MarginBlockStart: var(--pf-t--global--spacer--xs);
8491
8466
  --pf-v6-c-list__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -8497,32 +8472,18 @@ input.pf-v6-c-label__content {
8497
8472
  }
8498
8473
 
8499
8474
  .pf-v6-c-list {
8475
+ display: flex;
8476
+ flex-direction: column;
8477
+ gap: var(--pf-v6-c-list--Gap);
8500
8478
  padding-inline-start: var(--pf-v6-c-list--PaddingInlineStart);
8501
8479
  }
8502
- .pf-v6-c-list ol,
8503
- .pf-v6-c-list ul {
8504
- margin-block-start: var(--pf-v6-c-list--nested--MarginBlockStart);
8505
- margin-inline-start: var(--pf-v6-c-list--nested--MarginInlineStart);
8506
- }
8507
- .pf-v6-c-list li + li {
8508
- margin-block-start: var(--pf-v6-c-list--li--MarginBlockStart);
8480
+ .pf-v6-c-list .pf-v6-c-list {
8481
+ padding-block-start: var(--pf-v6-c-list--nested--PaddingBlockStart);
8509
8482
  }
8510
8483
  ul.pf-v6-c-list {
8511
8484
  list-style: var(--pf-v6-c-list--ul--ListStyle);
8512
8485
  }
8513
8486
 
8514
- .pf-v6-c-list .pf-v6-c-list__item {
8515
- display: flex;
8516
- }
8517
- .pf-v6-c-list .pf-v6-c-list__item-icon {
8518
- flex-shrink: 0;
8519
- min-width: var(--pf-v6-c-list__item-icon--MinWidth);
8520
- margin-block-start: var(--pf-v6-c-list__item-icon--MarginBlockStart);
8521
- margin-inline-end: var(--pf-v6-c-list__item-icon--MarginInlineEnd);
8522
- font-size: var(--pf-v6-c-list__item-icon--FontSize);
8523
- line-height: 1;
8524
- color: var(--pf-v6-c-list__item-icon--Color);
8525
- }
8526
8487
  .pf-v6-c-list.pf-m-icon-lg {
8527
8488
  --pf-v6-c-list__item-icon--MinWidth: var(--pf-v6-c-list--m-icon-lg__item-icon--MinWidth);
8528
8489
  --pf-v6-c-list__item-icon--MarginBlockStart: 0;
@@ -8530,28 +8491,33 @@ ul.pf-v6-c-list {
8530
8491
  --pf-v6-c-list__item-icon--FontSize: var(--pf-v6-c-list--m-icon-lg__item-icon--FontSize);
8531
8492
  }
8532
8493
  .pf-v6-c-list.pf-m-plain {
8533
- --pf-v6-c-list--PaddingInlineStart: 0;
8494
+ --pf-v6-c-list--PaddingInlineStart: var(--pf-v6-c-list--m-plain--PaddingInlineStart);
8534
8495
  list-style: none;
8535
8496
  }
8536
8497
  .pf-v6-c-list.pf-m-inline {
8537
- --pf-v6-c-list--PaddingInlineStart: 0;
8538
- display: flex;
8498
+ --pf-v6-c-list--PaddingInlineStart: var(--pf-v6-c-list--m-inline--PaddingInlineStart);
8499
+ --pf-v6-c-list--Gap: var(--pf-v6-c-list--m-inline--RowGap) var(--pf-v6-c-list--m-inline--ColumnGap);
8500
+ flex-direction: row;
8539
8501
  flex-wrap: wrap;
8540
8502
  list-style: none;
8541
8503
  }
8542
- .pf-v6-c-list.pf-m-inline li {
8543
- --pf-v6-c-list--li--MarginBlockStart: 0;
8504
+ .pf-v6-c-list.pf-m-bordered > * + * {
8505
+ padding-block-start: var(--pf-v6-c-list--m-bordered--li--PaddingBlockStart);
8506
+ border-block-start: var(--pf-v6-c-list--m-bordered--li--BorderBlockStartWidth) solid var(--pf-v6-c-list--m-bordered--li--BorderBlockStartColor);
8544
8507
  }
8545
- .pf-v6-c-list.pf-m-inline li:not(:last-child) {
8546
- margin-inline-end: var(--pf-v6-c-list--m-inline--li--MarginInlineEnd);
8547
- }
8548
- .pf-v6-c-list.pf-m-bordered > * {
8549
- padding-block-end: var(--pf-v6-c-list--m-bordered--li--PaddingBlockEnd);
8550
- border-block-end: var(--pf-v6-c-list--m-bordered--li--BorderBlockEndWidth) solid var(--pf-v6-c-list--m-bordered--li--BorderBlockEndColor);
8508
+
8509
+ .pf-v6-c-list__item {
8510
+ display: flex;
8551
8511
  }
8552
- .pf-v6-c-list.pf-m-bordered > :last-child {
8553
- --pf-v6-c-list--m-bordered--li--PaddingBlockEnd: 0;
8554
- --pf-v6-c-list--m-bordered--li--BorderBlockEndWidth: 0;
8512
+
8513
+ .pf-v6-c-list__item-icon {
8514
+ flex-shrink: 0;
8515
+ min-width: var(--pf-v6-c-list__item-icon--MinWidth);
8516
+ margin-block-start: var(--pf-v6-c-list__item-icon--MarginBlockStart);
8517
+ margin-inline-end: var(--pf-v6-c-list__item-icon--MarginInlineEnd);
8518
+ font-size: var(--pf-v6-c-list__item-icon--FontSize);
8519
+ line-height: 1;
8520
+ color: var(--pf-v6-c-list__item-icon--Color);
8555
8521
  }
8556
8522
 
8557
8523
  :where(:root, .pf-v6-c-log-viewer) {
@@ -18303,13 +18269,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18303
18269
  --pf-v6-c-tabs__item--ScrollSnapAlign: end;
18304
18270
  --pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis: y;
18305
18271
  --pf-v6-c-tabs__toggle--Display: flex;
18306
- --pf-v6-c-tabs__toggle-icon--Color: currentcolor;
18307
18272
  --pf-v6-c-tabs__toggle-icon--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
18308
18273
  --pf-v6-c-tabs__toggle-icon--Rotate: 0;
18309
- --pf-v6-c-tabs__toggle-text--MarginInlineStart: 0;
18310
- --pf-v6-c-tabs__toggle-button__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
18311
- --pf-v6-c-tabs__toggle-button__toggle-text--Color: var(--pf-t--global--text--color--regular);
18312
- --pf-v6-c-tabs--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
18313
18274
  --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
18314
18275
  --pf-v6-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
18315
18276
  --pf-v6-c-tabs--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -18546,7 +18507,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18546
18507
  }
18547
18508
  .pf-v6-c-tabs.pf-m-vertical.pf-m-expanded {
18548
18509
  --pf-v6-c-tabs__list--Display: flex;
18549
- --pf-v6-c-tabs__toggle-icon--Color: var(--pf-v6-c-tabs--m-expanded__toggle-icon--Color);
18550
18510
  --pf-v6-c-tabs__toggle-icon--Rotate: var(--pf-v6-c-tabs--m-expanded__toggle-icon--Rotate);
18551
18511
  }
18552
18512
  .pf-v6-c-tabs.pf-m-box.pf-m-vertical {
@@ -18600,19 +18560,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18600
18560
  align-items: center;
18601
18561
  }
18602
18562
 
18603
- .pf-v6-c-tabs__toggle-button {
18604
- --pf-v6-c-tabs__toggle-text--MarginInlineStart: var(--pf-v6-c-tabs__toggle-button__toggle-text--MarginInlineStart);
18605
- --pf-v6-c-tabs__toggle-text--Color: var(--pf-v6-c-tabs__toggle-button__toggle-text--Color);
18606
- }
18607
18563
  .pf-v6-c-tabs__toggle-button .pf-v6-c-button {
18608
- display: flex;
18609
- text-align: start;
18564
+ justify-content: start;
18610
18565
  white-space: normal;
18611
18566
  }
18612
18567
 
18613
18568
  .pf-v6-c-tabs__toggle-icon {
18614
18569
  display: inline-block;
18615
- color: var(--pf-v6-c-tabs__toggle-icon--Color);
18616
18570
  transition: var(--pf-v6-c-tabs__toggle-icon--Transition);
18617
18571
  transform: rotate(var(--pf-v6-c-tabs__toggle-icon--Rotate));
18618
18572
  }
@@ -18620,11 +18574,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18620
18574
  scale: -1 1;
18621
18575
  }
18622
18576
 
18623
- .pf-v6-c-tabs__toggle-text {
18624
- margin-inline-start: var(--pf-v6-c-tabs__toggle-text--MarginInlineStart);
18625
- color: var(--pf-v6-c-tabs__toggle-text--Color, inherit);
18626
- }
18627
-
18628
18577
  .pf-v6-c-tabs__list {
18629
18578
  scrollbar-width: none;
18630
18579
  -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -21943,7 +21892,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21943
21892
  }
21944
21893
 
21945
21894
  .pf-v6-c-number-input__icon {
21946
- display: flex;
21947
21895
  font-size: var(--pf-v6-c-number-input__icon--FontSize);
21948
21896
  }
21949
21897
 
@@ -24,7 +24,7 @@ cssPrefix: pf-v6-c-about-modal-box
24
24
  type="button"
25
25
  aria-label="Close dialog"
26
26
  >
27
- <span class="pf-v6-c-button__text">
27
+ <span class="pf-v6-c-button__icon">
28
28
  <i class="fas fa-times" aria-hidden="true"></i>
29
29
  </span>
30
30
  </button>
@@ -40,7 +40,7 @@ cssPrefix: pf-v6-c-action-list
40
40
  type="button"
41
41
  aria-label="Toggle"
42
42
  >
43
- <span class="pf-v6-c-button__text">
43
+ <span class="pf-v6-c-button__icon">
44
44
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
45
45
  </span>
46
46
  </button>
@@ -56,14 +56,14 @@ cssPrefix: pf-v6-c-action-list
56
56
  <div class="pf-v6-c-action-list pf-m-icons">
57
57
  <div class="pf-v6-c-action-list__item">
58
58
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
59
- <span class="pf-v6-c-button__text">
59
+ <span class="pf-v6-c-button__icon">
60
60
  <i class="fas fa-times" aria-hidden="true"></i>
61
61
  </span>
62
62
  </button>
63
63
  </div>
64
64
  <div class="pf-v6-c-action-list__item">
65
65
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Toggle">
66
- <span class="pf-v6-c-button__text">
66
+ <span class="pf-v6-c-button__icon">
67
67
  <i class="fas fa-check" aria-hidden="true"></i>
68
68
  </span>
69
69
  </button>
@@ -78,7 +78,7 @@ cssPrefix: pf-v6-c-action-list
78
78
  type="button"
79
79
  aria-label="Close"
80
80
  >
81
- <span class="pf-v6-c-button__text">
81
+ <span class="pf-v6-c-button__icon pf-m-start">
82
82
  <i class="fas fa-times" aria-hidden="true"></i>
83
83
  </span>
84
84
  </button>
@@ -89,7 +89,7 @@ cssPrefix: pf-v6-c-action-list
89
89
  type="button"
90
90
  aria-label="Toggle"
91
91
  >
92
- <span class="pf-v6-c-button__text">
92
+ <span class="pf-v6-c-button__icon">
93
93
  <i class="fas fa-check" aria-hidden="true"></i>
94
94
  </span>
95
95
  </button>
@@ -102,7 +102,7 @@ cssPrefix: pf-v6-c-action-list
102
102
  type="button"
103
103
  aria-label="Close"
104
104
  >
105
- <span class="pf-v6-c-button__text">
105
+ <span class="pf-v6-c-button__icon">
106
106
  <i class="fas fa-times" aria-hidden="true"></i>
107
107
  </span>
108
108
  </button>
@@ -113,7 +113,7 @@ cssPrefix: pf-v6-c-action-list
113
113
  type="button"
114
114
  aria-label="Toggle"
115
115
  >
116
- <span class="pf-v6-c-button__text">
116
+ <span class="pf-v6-c-button__icon">
117
117
  <i class="fas fa-check" aria-hidden="true"></i>
118
118
  </span>
119
119
  </button>