@patternfly/patternfly 6.3.0-prerelease.18 → 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 (14) hide show
  1. package/components/Tabs/tabs.css +25 -15
  2. package/components/Tabs/tabs.scss +26 -13
  3. package/components/_index.css +25 -15
  4. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  5. package/docs/demos/Card/examples/Card.md +0 -57
  6. package/docs/demos/DescriptionList/examples/DescriptionList.md +0 -38
  7. package/docs/demos/Drawer/examples/Drawer.md +0 -38
  8. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -76
  9. package/docs/demos/Tabs/examples/Tabs.md +0 -570
  10. package/package.json +1 -1
  11. package/patternfly-no-globals.css +25 -15
  12. package/patternfly.css +25 -15
  13. package/patternfly.min.css +1 -1
  14. 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.18",
4
+ "version": "6.3.0-prerelease.19",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -26122,25 +26122,28 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26122
26122
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
26123
26123
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
26124
26124
  --pf-v6-c-tabs--link-accent--start: 0;
26125
- --pf-v6-c-tabs--link-accent--length: auto;
26125
+ --pf-v6-c-tabs--link-accent--length: 0;
26126
26126
  --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
26127
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);
26128
26130
  --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
26129
26131
  --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
26130
- --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
26132
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: 0;
26131
26133
  --pf-v6-c-tabs--link-accent--Width: initial;
26132
26134
  --pf-v6-c-tabs--link-accent--Height: 0;
26133
26135
  --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
26134
26136
  --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
26135
- --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;
26136
26141
  --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
26137
- --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
26138
- --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
26139
- --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
26140
26142
  --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
26141
26143
  --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
26142
- --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
26143
- --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;
26144
26147
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
26145
26148
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
26146
26149
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -26300,11 +26303,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26300
26303
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
26301
26304
  --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
26302
26305
  --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
26303
- --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
26304
26306
  --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
26305
26307
  --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
26306
26308
  --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
26307
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);
26308
26313
  display: inline-flex;
26309
26314
  flex-direction: column;
26310
26315
  height: 100%;
@@ -26881,15 +26886,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26881
26886
  }
26882
26887
 
26883
26888
  @media (prefers-reduced-motion: no-preference) {
26884
- .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
26885
- .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 {
26886
26891
  content: revert;
26887
26892
  }
26888
- .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 {
26889
26894
  position: absolute;
26890
- 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);
26891
26896
  inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
26892
- 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);
26893
26898
  width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
26894
26899
  height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
26895
26900
  content: "";
@@ -26898,7 +26903,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26898
26903
  border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
26899
26904
  transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
26900
26905
  transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
26901
- 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);
26902
26912
  }
26903
26913
  .pf-v6-c-tabs.pf-m-initializing-accent {
26904
26914
  --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
package/patternfly.css CHANGED
@@ -26258,25 +26258,28 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26258
26258
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
26259
26259
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
26260
26260
  --pf-v6-c-tabs--link-accent--start: 0;
26261
- --pf-v6-c-tabs--link-accent--length: auto;
26261
+ --pf-v6-c-tabs--link-accent--length: 0;
26262
26262
  --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
26263
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);
26264
26266
  --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
26265
26267
  --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
26266
- --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
26268
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: 0;
26267
26269
  --pf-v6-c-tabs--link-accent--Width: initial;
26268
26270
  --pf-v6-c-tabs--link-accent--Height: 0;
26269
26271
  --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
26270
26272
  --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
26271
- --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;
26272
26277
  --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
26273
- --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
26274
- --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
26275
- --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
26276
26278
  --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
26277
26279
  --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
26278
- --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
26279
- --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;
26280
26283
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
26281
26284
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
26282
26285
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -26436,11 +26439,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26436
26439
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
26437
26440
  --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
26438
26441
  --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
26439
- --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
26440
26442
  --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
26441
26443
  --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
26442
26444
  --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
26443
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);
26444
26449
  display: inline-flex;
26445
26450
  flex-direction: column;
26446
26451
  height: 100%;
@@ -27017,15 +27022,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
27017
27022
  }
27018
27023
 
27019
27024
  @media (prefers-reduced-motion: no-preference) {
27020
- .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
27021
- .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 {
27022
27027
  content: revert;
27023
27028
  }
27024
- .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 {
27025
27030
  position: absolute;
27026
- 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);
27027
27032
  inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
27028
- 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);
27029
27034
  width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
27030
27035
  height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
27031
27036
  content: "";
@@ -27034,7 +27039,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
27034
27039
  border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
27035
27040
  transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
27036
27041
  transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
27037
- 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);
27038
27048
  }
27039
27049
  .pf-v6-c-tabs.pf-m-initializing-accent {
27040
27050
  --pf-v6-c-tabs--link-accent--TransitionDuration: 0;