@patternfly/patternfly 6.0.0-alpha.122 → 6.0.0-alpha.123

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.
@@ -25418,54 +25418,61 @@ label.pf-v6-c-tree-view__node-text {
25418
25418
  --pf-v6-c-wizard__title-text--Color: var(--pf-t--global--text--color--regular);
25419
25419
  --pf-v6-c-wizard__description--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25420
25420
  --pf-v6-c-wizard__description--Color: var(--pf-t--global--text--color--subtle);
25421
- --pf-v6-c-wizard__nav-link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25422
- --pf-v6-c-wizard__nav-link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
25423
- --pf-v6-c-wizard__nav-link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
25424
- --pf-v6-c-wizard__nav-link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
25421
+ --pf-v6-c-wizard__nav-link--Gap: var(--pf-t--global--spacer--xs);
25425
25422
  --pf-v6-c-wizard__nav-link--Color: var(--pf-t--global--text--color--subtle);
25426
25423
  --pf-v6-c-wizard__nav-link--TextDecoration: none;
25427
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
25428
- --pf-v6-c-wizard__nav-link--BorderRadius: var(--pf-t--global--border--radius--small);
25429
25424
  --pf-v6-c-wizard__nav-link--hover--Color: var(--pf-t--global--text--color--subtle);
25430
25425
  --pf-v6-c-wizard__nav-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
25431
25426
  --pf-v6-c-wizard__nav-link--m-current--Color: var(--pf-t--global--text--color--regular);
25432
25427
  --pf-v6-c-wizard__nav-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
25433
25428
  --pf-v6-c-wizard__nav-link--m-disabled--Color: var(--pf-t--global--text--color--disabled);
25434
25429
  --pf-v6-c-wizard__nav-link--m-disabled--BackgroundColor: transparent;
25430
+ --pf-v6-c-wizard__nav-link-main--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25431
+ --pf-v6-c-wizard__nav-link-main--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
25432
+ --pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
25433
+ --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
25434
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
25435
+ --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
25435
25436
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
25436
25437
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
25437
25438
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
25438
25439
  --pf-v6-c-wizard__nav-link-toggle-icon--Transition: var(--pf-t--global--transition);
25439
25440
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
25440
25441
  --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
25441
- --pf-v6-c-wizard__nav-link--before--Width: 1.5rem;
25442
- --pf-v6-c-wizard__nav-link--before--Height: 1.5rem;
25443
- --pf-v6-c-wizard__nav-link--before--InsetBlockStart: calc(calc(var(--pf-v6-c-wizard__nav-link--PaddingBlockStart) + var(--pf-v6-c-wizard__nav-link--PaddingBlockEnd) + 1em * var(--pf-t--global--font--line-height--body)) / 2);
25442
+ --pf-v6-c-wizard__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
25443
+ --pf-v6-c-wizard__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
25444
+ --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
25444
25445
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
25445
25446
  --pf-v6-c-wizard__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large);
25446
25447
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-t--global--text--color--regular);
25447
25448
  --pf-v6-c-wizard__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default);
25448
- --pf-v6-c-wizard__nav-link--before--TranslateX: calc(-100% - var(--pf-t--global--spacer--xs));
25449
- --pf-v6-c-wizard__nav-link--before--TranslateY: -50%;
25450
25449
  --pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default);
25451
25450
  --pf-v6-c-wizard__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default);
25452
25451
  --pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
25453
25452
  --pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
25453
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
25454
+ --pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
25455
+ --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
25456
+ --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
25454
25457
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
25455
25458
  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
25456
25459
  --pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
25457
25460
  --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
25458
25461
  --pf-v6-c-wizard__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
25459
- --pf-v6-c-wizard__toggle--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) + var(--pf-v6-c-wizard__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
25462
+ --pf-v6-c-wizard__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
25460
25463
  --pf-v6-c-wizard__toggle--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
25461
25464
  --pf-v6-c-wizard__toggle--BorderBlockEndColor: var(--pf-t--global--border--color--default);
25462
- --pf-v6-c-wizard--m-in-page__toggle--xl--PaddingInlineStart: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-wizard__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
25463
- --pf-v6-c-wizard__toggle-num--before--InsetBlockStart: -0.125rem;
25465
+ --pf-v6-c-wizard__toggle-num--InsetBlockStart: 0;
25464
25466
  --pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--sm);
25465
25467
  --pf-v6-c-wizard__toggle-list-item--MarginBlockEnd: var(--pf-t--global--spacer--xs);
25468
+ --pf-v6-c-wizard__toggle-list-item--Gap: var(--pf-t--global--spacer--sm);
25469
+ --pf-v6-c-wizard__nav-link-status-icon--LineHeight: 1;
25470
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
25471
+ --pf-v6-c-wizard__toggle--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
25472
+ --pf-v6-c-wizard__toggle-status-icon--InsetBlockStart: 2px;
25473
+ --pf-v6-c-wizard__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
25466
25474
  --pf-v6-c-wizard__toggle-list--MarginInlineEnd: var(--pf-t--global--spacer--sm);
25467
25475
  --pf-v6-c-wizard__toggle-list--MarginBlockEnd: calc(var(--pf-v6-c-wizard__toggle-list-item--MarginBlockEnd) * -1);
25468
- --pf-v6-c-wizard__toggle-separator--MarginInlineStart: var(--pf-t--global--spacer--sm);
25469
25476
  --pf-v6-c-wizard__toggle-separator--Color: var(--pf-t--global--border--color--default);
25470
25477
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
25471
25478
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
@@ -25479,8 +25486,8 @@ label.pf-v6-c-tree-view__node-text {
25479
25486
  --pf-v6-c-wizard__nav-list--PaddingBlockStart: var(--pf-t--global--spacer--lg);
25480
25487
  --pf-v6-c-wizard__nav-list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
25481
25488
  --pf-v6-c-wizard__nav-list--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
25482
- --pf-v6-c-wizard__nav-list--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) + var(--pf-v6-c-wizard__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
25483
- --pf-v6-c-wizard__nav-list--nested--MarginInlineStart: var(--pf-t--global--spacer--md);
25489
+ --pf-v6-c-wizard__nav-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
25490
+ --pf-v6-c-wizard__nav-list--nested--MarginInlineStart: var(--pf-t--global--spacer--lg);
25484
25491
  --pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
25485
25492
  --pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
25486
25493
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -25497,8 +25504,8 @@ label.pf-v6-c-tree-view__node-text {
25497
25504
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
25498
25505
  --pf-v6-c-wizard__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
25499
25506
  --pf-v6-c-wizard__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
25500
- --pf-v6-c-wizard__footer--BorderWidth: var(--pf-t--global--border--width--divider--default);
25501
- --pf-v6-c-wizard__footer--BorderColor: var(--pf-t--global--border--color--default);
25507
+ --pf-v6-c-wizard__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
25508
+ --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
25502
25509
  --pf-v6-c-wizard__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
25503
25510
  --pf-v6-c-wizard__footer--child--MarginBlockEnd: var(--pf-t--global--spacer--sm);
25504
25511
  --pf-v6-c-wizard__footer-cancel--MarginInlineStart: calc(var(--pf-t--global--spacer--2xl) - var(--pf-v6-c-wizard__footer--child--MarginInlineEnd));
@@ -25610,6 +25617,9 @@ label.pf-v6-c-tree-view__node-text {
25610
25617
  }
25611
25618
 
25612
25619
  .pf-v6-c-wizard__toggle-list-item {
25620
+ display: flex;
25621
+ gap: var(--pf-v6-c-wizard__toggle-list-item--Gap);
25622
+ align-items: baseline;
25613
25623
  margin-block-end: var(--pf-v6-c-wizard__toggle-list-item--MarginBlockEnd);
25614
25624
  text-align: start;
25615
25625
  word-break: break-word;
@@ -25617,14 +25627,25 @@ label.pf-v6-c-tree-view__node-text {
25617
25627
  .pf-v6-c-wizard__toggle-list-item:not(:last-child) {
25618
25628
  margin-inline-end: var(--pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd);
25619
25629
  }
25630
+ .pf-v6-c-wizard__toggle-list-item.pf-m-danger {
25631
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
25632
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
25633
+ }
25620
25634
 
25621
25635
  .pf-v6-c-wizard__toggle-num {
25622
- --pf-v6-c-wizard__nav-link--before--TranslateY: 0;
25623
- --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-v6-c-wizard__toggle-num--before--InsetBlockStart);
25636
+ position: relative;
25637
+ inset-block-start: var(--pf-v6-c-wizard__toggle-num--InsetBlockStart);
25638
+ }
25639
+
25640
+ .pf-v6-c-wizard__toggle-status-icon {
25641
+ position: relative;
25642
+ inset-block-start: var(--pf-v6-c-wizard__toggle-status-icon--InsetBlockStart);
25643
+ font-size: var(--pf-v6-c-wizard__toggle-status-icon--FontSize);
25644
+ line-height: var(--pf-v6-c-wizard__nav-link-status-icon--LineHeight);
25645
+ color: var(--pf-v6-c-wizard__toggle-status-icon--Color);
25624
25646
  }
25625
25647
 
25626
25648
  .pf-v6-c-wizard__toggle-separator {
25627
- margin-inline-start: var(--pf-v6-c-wizard__toggle-separator--MarginInlineStart);
25628
25649
  color: var(--pf-v6-c-wizard__toggle-separator--Color);
25629
25650
  }
25630
25651
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__toggle-separator {
@@ -25723,30 +25744,26 @@ label.pf-v6-c-tree-view__node-text {
25723
25744
  }
25724
25745
  .pf-v6-c-wizard__nav-item :where(:hover) {
25725
25746
  --pf-v6-c-wizard__nav-link--Color: var({$wizard}__nav-link--hover--Color);
25726
- --pf-v6-c-wizard__nav-link--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
25747
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
25727
25748
  }
25728
25749
 
25729
25750
  .pf-v6-c-wizard__nav-link {
25730
25751
  position: relative;
25731
- display: inline-block;
25752
+ display: flex;
25753
+ gap: var(--pf-v6-c-wizard__nav-link--Gap);
25732
25754
  width: 100%;
25733
- padding-block-start: var(--pf-v6-c-wizard__nav-link--PaddingBlockStart);
25734
- padding-block-end: var(--pf-v6-c-wizard__nav-link--PaddingBlockEnd);
25735
- padding-inline-start: var(--pf-v6-c-wizard__nav-link--PaddingInlineStart);
25736
- padding-inline-end: var(--pf-v6-c-wizard__nav-link--PaddingInlineEnd);
25755
+ padding-inline: 0;
25737
25756
  color: var(--pf-v6-c-wizard__nav-link--Color);
25738
25757
  text-align: start;
25739
25758
  text-decoration: var(--pf-v6-c-wizard__nav-link--TextDecoration);
25740
25759
  word-break: break-word;
25741
- background-color: var(--pf-v6-c-wizard__nav-link--BackgroundColor);
25760
+ counter-increment: wizard-nav-count;
25761
+ background-color: transparent;
25742
25762
  border: none;
25743
25763
  border-radius: var(--pf-v6-c-wizard__nav-link--BorderRadius);
25744
25764
  }
25745
25765
  .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
25746
- transform: translateX(var(--pf-v6-c-wizard__nav-link--before--TranslateX)) translateY(var(--pf-v6-c-wizard__nav-link--before--TranslateY));
25747
- position: absolute;
25748
- inset-block-start: var(--pf-v6-c-wizard__nav-link--before--InsetBlockStart);
25749
- inset-inline-start: 0;
25766
+ position: relative;
25750
25767
  display: inline-flex;
25751
25768
  align-items: center;
25752
25769
  justify-content: center;
@@ -25758,30 +25775,33 @@ label.pf-v6-c-tree-view__node-text {
25758
25775
  background-color: var(--pf-v6-c-wizard__nav-link--before--BackgroundColor);
25759
25776
  border-radius: var(--pf-v6-c-wizard__nav-link--before--BorderRadius);
25760
25777
  }
25761
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
25762
- transform: translateX(calc(var(--pf-v6-c-wizard__nav-link--before--TranslateX) * var(--pf-v6-global--inverse--multiplier))) translateY(var(--pf-v6-c-wizard__nav-link--before--TranslateY));
25763
- }
25764
25778
 
25765
25779
  .pf-v6-c-wizard__nav-link::before {
25780
+ inset-block-start: var(--pf-v6-c-wizard__nav-link--before--InsetBlockStart);
25766
25781
  content: counter(wizard-nav-count);
25767
- counter-increment: wizard-nav-count;
25768
25782
  }
25769
25783
  .pf-v6-c-wizard__nav-link.pf-m-current {
25770
25784
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-current--Color);
25771
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--BackgroundColor);
25785
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--BackgroundColor);
25772
25786
  }
25773
25787
  .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link.pf-m-current::before {
25774
25788
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);
25775
25789
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
25776
25790
  }
25777
25791
 
25792
+ .pf-v6-c-wizard__nav-link.pf-m-danger {
25793
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
25794
+ }
25795
+ .pf-v6-c-wizard__nav-link.pf-m-danger::before {
25796
+ display: none;
25797
+ }
25778
25798
  .pf-v6-c-wizard__nav-link:where(:hover, :focus) {
25779
25799
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--hover--Color);
25780
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);
25800
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);
25781
25801
  }
25782
25802
  .pf-v6-c-wizard__nav-link:disabled, .pf-v6-c-wizard__nav-link.pf-m-disabled {
25783
25803
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--Color);
25784
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-disabled--BackgroundColor);
25804
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-disabled--BackgroundColor);
25785
25805
  pointer-events: none;
25786
25806
  }
25787
25807
  .pf-v6-c-wizard__nav-link:disabled::before, .pf-v6-c-wizard__nav-link.pf-m-disabled::before {
@@ -25793,6 +25813,25 @@ label.pf-v6-c-tree-view__node-text {
25793
25813
  flex-grow: 1;
25794
25814
  }
25795
25815
 
25816
+ .pf-v6-c-wizard__nav-link-main {
25817
+ display: flex;
25818
+ justify-content: space-between;
25819
+ padding-block-start: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockStart);
25820
+ padding-block-end: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockEnd);
25821
+ padding-inline-start: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineStart);
25822
+ padding-inline-end: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineEnd);
25823
+ background-color: var(--pf-v6-c-wizard__nav-link-main--BackgroundColor);
25824
+ border: none;
25825
+ border-radius: var(--pf-v6-c-wizard__nav-link-main--BorderRadius);
25826
+ }
25827
+
25828
+ .pf-v6-c-wizard__nav-link-status-icon {
25829
+ position: relative;
25830
+ inset-block-start: var(--pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart);
25831
+ font-size: var(--pf-v6-c-wizard__nav-link-status-icon--FontSize);
25832
+ color: var(--pf-v6-c-wizard__nav-link-status-icon--Color);
25833
+ }
25834
+
25796
25835
  .pf-v6-c-wizard__nav-link-toggle {
25797
25836
  padding-inline-start: var(--pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart);
25798
25837
  padding-inline-end: var(--pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd);
@@ -25837,7 +25876,7 @@ label.pf-v6-c-tree-view__node-text {
25837
25876
  padding-inline-start: var(--pf-v6-c-wizard__footer--PaddingInlineStart);
25838
25877
  padding-inline-end: var(--pf-v6-c-wizard__footer--PaddingInlineEnd);
25839
25878
  background-color: var(--pf-v6-c-wizard__footer--BackgroundColor);
25840
- border-block-start: var(--pf-v6-c-wizard__footer--BorderWidth) solid var(--pf-v6-c-wizard__footer--BorderColor);
25879
+ border-block-start: var(--pf-v6-c-wizard__footer--BorderBlockStartWidth) solid var(--pf-v6-c-wizard__footer--BorderBlockStartColor);
25841
25880
  }
25842
25881
  .pf-v6-c-wizard__footer > * {
25843
25882
  margin-block-end: var(--pf-v6-c-wizard__footer--child--MarginBlockEnd);