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

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 (19) hide show
  1. package/components/ProgressStepper/progress-stepper.scss +1 -0
  2. package/components/Spinner/spinner.css +5 -0
  3. package/components/Spinner/spinner.scss +6 -0
  4. package/components/Tabs/tabs.css +25 -15
  5. package/components/Tabs/tabs.scss +26 -13
  6. package/components/_index.css +30 -15
  7. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  8. package/docs/components/Spinner/examples/Spinner.md +10 -0
  9. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  10. package/docs/demos/Card/examples/Card.md +0 -57
  11. package/docs/demos/DescriptionList/examples/DescriptionList.md +0 -38
  12. package/docs/demos/Drawer/examples/Drawer.md +0 -38
  13. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -76
  14. package/docs/demos/Tabs/examples/Tabs.md +0 -570
  15. package/package.json +1 -1
  16. package/patternfly-no-globals.css +30 -15
  17. package/patternfly.css +30 -15
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.3.0-prerelease.17",
4
+ "version": "6.3.0-prerelease.19",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -22397,6 +22397,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
22397
22397
  --pf-v6-c-spinner--StrokeWidth: 10;
22398
22398
  --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
22399
22399
  --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
22400
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
22400
22401
  --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
22401
22402
  --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
22402
22403
  --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
@@ -22413,6 +22414,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
22413
22414
  .pf-v6-c-spinner.pf-m-inline {
22414
22415
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
22415
22416
  }
22417
+ .pf-v6-c-spinner.pf-m-xs {
22418
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
22419
+ --pf-v6-c-spinner--StrokeWidth: 15;
22420
+ }
22416
22421
  .pf-v6-c-spinner.pf-m-sm {
22417
22422
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
22418
22423
  }
@@ -26117,25 +26122,28 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26117
26122
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
26118
26123
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
26119
26124
  --pf-v6-c-tabs--link-accent--start: 0;
26120
- --pf-v6-c-tabs--link-accent--length: auto;
26125
+ --pf-v6-c-tabs--link-accent--length: 0;
26121
26126
  --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
26122
26127
  --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
26128
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
26129
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
26123
26130
  --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
26124
26131
  --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
26125
- --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
26132
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: 0;
26126
26133
  --pf-v6-c-tabs--link-accent--Width: initial;
26127
26134
  --pf-v6-c-tabs--link-accent--Height: 0;
26128
26135
  --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
26129
26136
  --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
26130
- --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
26137
+ --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--link-accent--start);
26138
+ --pf-v6-c-tabs--link-accent--TranslateY: 0;
26139
+ --pf-v6-c-tabs--link-accent--TransformOrigin: 0 center;
26140
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: 0;
26131
26141
  --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
26132
- --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
26133
- --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
26134
- --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
26135
26142
  --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
26136
26143
  --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
26137
- --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
26138
- --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
26144
+ --pf-v6-c-tabs--m-vertical--link-accent--TranslateX: 0;
26145
+ --pf-v6-c-tabs--m-vertical--link-accent--TranslateY: var(--pf-v6-c-tabs--link-accent--start);
26146
+ --pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin: center 0;
26139
26147
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
26140
26148
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
26141
26149
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -26295,11 +26303,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26295
26303
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
26296
26304
  --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
26297
26305
  --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
26298
- --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
26299
26306
  --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
26300
26307
  --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
26301
26308
  --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
26302
26309
  --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
26310
+ --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateX);
26311
+ --pf-v6-c-tabs--link-accent--TranslateY: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateY);
26312
+ --pf-v6-c-tabs--link-accent--TransformOrigin: var(--pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin);
26303
26313
  display: inline-flex;
26304
26314
  flex-direction: column;
26305
26315
  height: 100%;
@@ -26876,15 +26886,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26876
26886
  }
26877
26887
 
26878
26888
  @media (prefers-reduced-motion: no-preference) {
26879
- .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
26880
- .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
26889
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__link::after,
26890
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
26881
26891
  content: revert;
26882
26892
  }
26883
- .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
26893
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
26884
26894
  position: absolute;
26885
- inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
26895
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart);
26886
26896
  inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
26887
- inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
26897
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart);
26888
26898
  width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
26889
26899
  height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
26890
26900
  content: "";
@@ -26893,7 +26903,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26893
26903
  border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
26894
26904
  transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
26895
26905
  transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
26896
- transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
26906
+ transition-property: width, height, translate;
26907
+ transform-origin: var(--pf-v6-c-tabs--link-accent--TransformOrigin);
26908
+ translate: var(--pf-v6-c-tabs--link-accent--TranslateX) var(--pf-v6-c-tabs--link-accent--TranslateY);
26909
+ }
26910
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
26911
+ translate: calc(var(--pf-v6-c-tabs--link-accent--TranslateX) * var(--pf-v6-global--inverse--multiplier)) var(--pf-v6-c-tabs--link-accent--TranslateY);
26897
26912
  }
26898
26913
  .pf-v6-c-tabs.pf-m-initializing-accent {
26899
26914
  --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
package/patternfly.css CHANGED
@@ -22533,6 +22533,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
22533
22533
  --pf-v6-c-spinner--StrokeWidth: 10;
22534
22534
  --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
22535
22535
  --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
22536
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
22536
22537
  --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
22537
22538
  --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
22538
22539
  --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
@@ -22549,6 +22550,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
22549
22550
  .pf-v6-c-spinner.pf-m-inline {
22550
22551
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
22551
22552
  }
22553
+ .pf-v6-c-spinner.pf-m-xs {
22554
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
22555
+ --pf-v6-c-spinner--StrokeWidth: 15;
22556
+ }
22552
22557
  .pf-v6-c-spinner.pf-m-sm {
22553
22558
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
22554
22559
  }
@@ -26253,25 +26258,28 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26253
26258
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
26254
26259
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
26255
26260
  --pf-v6-c-tabs--link-accent--start: 0;
26256
- --pf-v6-c-tabs--link-accent--length: auto;
26261
+ --pf-v6-c-tabs--link-accent--length: 0;
26257
26262
  --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
26258
26263
  --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
26264
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
26265
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
26259
26266
  --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
26260
26267
  --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
26261
- --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
26268
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: 0;
26262
26269
  --pf-v6-c-tabs--link-accent--Width: initial;
26263
26270
  --pf-v6-c-tabs--link-accent--Height: 0;
26264
26271
  --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
26265
26272
  --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
26266
- --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
26273
+ --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--link-accent--start);
26274
+ --pf-v6-c-tabs--link-accent--TranslateY: 0;
26275
+ --pf-v6-c-tabs--link-accent--TransformOrigin: 0 center;
26276
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: 0;
26267
26277
  --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
26268
- --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
26269
- --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
26270
- --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
26271
26278
  --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
26272
26279
  --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
26273
- --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
26274
- --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
26280
+ --pf-v6-c-tabs--m-vertical--link-accent--TranslateX: 0;
26281
+ --pf-v6-c-tabs--m-vertical--link-accent--TranslateY: var(--pf-v6-c-tabs--link-accent--start);
26282
+ --pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin: center 0;
26275
26283
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
26276
26284
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
26277
26285
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -26431,11 +26439,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26431
26439
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
26432
26440
  --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
26433
26441
  --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
26434
- --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
26435
26442
  --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
26436
26443
  --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
26437
26444
  --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
26438
26445
  --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
26446
+ --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateX);
26447
+ --pf-v6-c-tabs--link-accent--TranslateY: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateY);
26448
+ --pf-v6-c-tabs--link-accent--TransformOrigin: var(--pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin);
26439
26449
  display: inline-flex;
26440
26450
  flex-direction: column;
26441
26451
  height: 100%;
@@ -27012,15 +27022,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
27012
27022
  }
27013
27023
 
27014
27024
  @media (prefers-reduced-motion: no-preference) {
27015
- .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
27016
- .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
27025
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__link::after,
27026
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
27017
27027
  content: revert;
27018
27028
  }
27019
- .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
27029
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
27020
27030
  position: absolute;
27021
- inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
27031
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart);
27022
27032
  inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
27023
- inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
27033
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart);
27024
27034
  width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
27025
27035
  height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
27026
27036
  content: "";
@@ -27029,7 +27039,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
27029
27039
  border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
27030
27040
  transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
27031
27041
  transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
27032
- transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
27042
+ transition-property: width, height, translate;
27043
+ transform-origin: var(--pf-v6-c-tabs--link-accent--TransformOrigin);
27044
+ translate: var(--pf-v6-c-tabs--link-accent--TranslateX) var(--pf-v6-c-tabs--link-accent--TranslateY);
27045
+ }
27046
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
27047
+ translate: calc(var(--pf-v6-c-tabs--link-accent--TranslateX) * var(--pf-v6-global--inverse--multiplier)) var(--pf-v6-c-tabs--link-accent--TranslateY);
27033
27048
  }
27034
27049
  .pf-v6-c-tabs.pf-m-initializing-accent {
27035
27050
  --pf-v6-c-tabs--link-accent--TransitionDuration: 0;