@patternfly/patternfly 6.3.0-prerelease.19 → 6.3.0-prerelease.20

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 (11) hide show
  1. package/components/DualListSelector/dual-list-selector.css +36 -0
  2. package/components/DualListSelector/dual-list-selector.scss +43 -0
  3. package/components/ExpandableSection/expandable-section.css +14 -14
  4. package/components/ExpandableSection/expandable-section.scss +15 -14
  5. package/components/_index.css +50 -14
  6. package/docs/components/DualListSelector/examples/DualListSelector.md +518 -0
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +50 -14
  9. package/patternfly.css +50 -14
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -12343,6 +12343,17 @@ ul) {
12343
12343
  --pf-v6-c-dual-list-selector__menu--MinHeight: 12.5rem;
12344
12344
  --pf-v6-c-dual-list-selector__menu--MaxHeight: 20rem;
12345
12345
  --pf-v6-c-dual-list-selector__menu--MarginBlockStart: var(--pf-t--global--spacer--md);
12346
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: 0s;
12347
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
12348
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: 0s;
12349
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
12350
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--slide: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide);
12351
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--fade: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--fade);
12352
+ --pf-v6-c-dual-list-selector__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
12353
+ --pf-v6-c-dual-list-selector__list--Opacity: 0;
12354
+ --pf-v6-c-dual-list-selector--m-expanded__list--Opacity: 1;
12355
+ --pf-v6-c-dual-list-selector__list--TranslateY: 0;
12356
+ --pf-v6-c-dual-list-selector--m-expanded__list--TranslateY: 0;
12346
12357
  --pf-v6-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
12347
12358
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
12348
12359
  --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
@@ -12380,6 +12391,13 @@ ul) {
12380
12391
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
12381
12392
  --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
12382
12393
  }
12394
+ @media screen and (prefers-reduced-motion: no-preference) {
12395
+ .pf-v6-c-dual-list-selector {
12396
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
12397
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
12398
+ --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
12399
+ }
12400
+ }
12383
12401
 
12384
12402
  .pf-v6-c-dual-list-selector {
12385
12403
  display: grid;
@@ -12475,9 +12493,27 @@ ul) {
12475
12493
  .pf-v6-c-dual-list-selector__list-item.pf-m-expandable {
12476
12494
  --pf-v6-c-dual-list-selector__item--PaddingInlineStart: var(--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart);
12477
12495
  }
12496
+ .pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expandable > .pf-v6-c-dual-list-selector__list {
12497
+ max-height: 0;
12498
+ visibility: hidden;
12499
+ opacity: var(--pf-v6-c-dual-list-selector__list--Opacity);
12500
+ transition-delay: 0s, 0s, var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade);
12501
+ transition-timing-function: var(--pf-v6-c-dual-list-selector__list--TransitionTimingFunction);
12502
+ transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--slide), 0s, 0s;
12503
+ transition-property: opacity, translate, visibility, max-height;
12504
+ translate: 0 var(--pf-v6-c-dual-list-selector__list--TranslateY);
12505
+ }
12478
12506
  .pf-v6-c-dual-list-selector__list-item.pf-m-expanded {
12479
12507
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
12480
12508
  }
12509
+ .pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expanded > .pf-v6-c-dual-list-selector__list {
12510
+ max-height: 9999px;
12511
+ visibility: revert;
12512
+ opacity: var(--pf-v6-c-dual-list-selector--m-expanded__list--Opacity);
12513
+ transition-delay: 0s;
12514
+ transition-duration: var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade), var(--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide), 0s, 0s;
12515
+ translate: 0 var(--pf-v6-c-dual-list-selector--m-expanded__list--TranslateY);
12516
+ }
12481
12517
  .pf-v6-c-dual-list-selector__list-item.pf-m-disabled {
12482
12518
  --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color);
12483
12519
  --pf-v6-c-dual-list-selector__item-toggle-icon--Color: var(--pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color);
@@ -14020,6 +14056,7 @@ ul) {
14020
14056
  --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
14021
14057
  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
14022
14058
  --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
14059
+ --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
14023
14060
  --pf-v6-c-expandable-section__content--Opacity: 0;
14024
14061
  --pf-v6-c-expandable-section__content--TranslateY: 0;
14025
14062
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
@@ -14051,7 +14088,10 @@ ul) {
14051
14088
  .pf-v6-c-expandable-section {
14052
14089
  display: flex;
14053
14090
  flex-direction: column;
14054
- gap: var(--pf-v6-c-expandable-section--Gap);
14091
+ gap: 0;
14092
+ transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
14093
+ transition-duration: 0s;
14094
+ transition-property: gap;
14055
14095
  }
14056
14096
  .pf-v6-c-expandable-section.pf-m-expanded {
14057
14097
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
@@ -14062,6 +14102,10 @@ ul) {
14062
14102
  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
14063
14103
  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
14064
14104
  --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
14105
+ --pf-v6-c-expandable-section__content--Visibility: auto;
14106
+ --pf-v6-c-expandable-section__content--MaxHeight: 9999px;
14107
+ --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
14108
+ gap: var(--pf-v6-c-expandable-section--Gap);
14065
14109
  }
14066
14110
  .pf-v6-c-expandable-section.pf-m-limit-width {
14067
14111
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -14113,23 +14157,15 @@ ul) {
14113
14157
  display: revert;
14114
14158
  }
14115
14159
  .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
14116
- display: none;
14160
+ max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
14161
+ visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
14117
14162
  opacity: var(--pf-v6-c-expandable-section__content--Opacity);
14163
+ transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);
14118
14164
  transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
14119
- transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
14120
- transition-property: opacity, translate, display;
14121
- transition-behavior: allow-discrete;
14165
+ transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), 0s, 0s;
14166
+ transition-property: opacity, translate, visibility, max-height;
14122
14167
  translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
14123
14168
  }
14124
- .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
14125
- display: revert;
14126
- }
14127
- @starting-style {
14128
- .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
14129
- --pf-v6-c-expandable-section__content--Opacity: 0;
14130
- --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
14131
- }
14132
- }
14133
14169
 
14134
14170
  .pf-v6-c-file-upload {
14135
14171
  --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--gap--group--vertical);