@patternfly/patternfly 6.2.0 → 6.3.0-prerelease.2

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 (18) hide show
  1. package/components/Card/card.css +3 -0
  2. package/components/Card/card.scss +3 -0
  3. package/components/FormControl/form-control.css +1 -2
  4. package/components/FormControl/form-control.scss +1 -5
  5. package/components/Tabs/tabs.css +65 -0
  6. package/components/Tabs/tabs.scss +77 -0
  7. package/components/_index.css +68 -2
  8. package/docs/components/Tabs/examples/Tabs.md +6741 -12
  9. package/docs/demos/Card/examples/Card.md +57 -0
  10. package/docs/demos/DescriptionList/examples/DescriptionList.md +38 -0
  11. package/docs/demos/Drawer/examples/Drawer.md +38 -0
  12. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +76 -0
  13. package/docs/demos/Tabs/examples/Tabs.md +570 -0
  14. package/package.json +5 -5
  15. package/patternfly-no-globals.css +68 -2
  16. package/patternfly.css +68 -2
  17. package/patternfly.min.css +1 -1
  18. 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.2.0",
4
+ "version": "6.3.0-prerelease.2",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,11 +47,11 @@
47
47
  "@commitlint/config-conventional": "^19.1.0",
48
48
  "@fortawesome/fontawesome": "^1.1.8",
49
49
  "@octokit/rest": "^20.1.0",
50
- "@patternfly/documentation-framework": "6.5.20",
50
+ "@patternfly/documentation-framework": "6.8.3",
51
51
  "@patternfly/patternfly-a11y": "5.0.0",
52
- "@patternfly/react-code-editor": "6.1.0",
53
- "@patternfly/react-core": "6.1.0",
54
- "@patternfly/react-table": "6.1.0",
52
+ "@patternfly/react-code-editor": "6.2.0",
53
+ "@patternfly/react-core": "6.2.0",
54
+ "@patternfly/react-table": "6.2.0",
55
55
  "@starptech/prettyhtml": "^0.10.0",
56
56
  "backstopjs": "^6.3.23",
57
57
  "cheerio": "^1.0.0-rc.12",
package/patternfly-no-globals.css CHANGED
@@ -9791,6 +9791,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9791
9791
  --pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
9792
9792
  --pf-v6-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
9793
9793
  --pf-v6-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
9794
+ --pf-v6-c-card__title-text--OverflowWrap: break-word;
9794
9795
  --pf-v6-c-card--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
9795
9796
  --pf-v6-c-card__body--FontSize: var(--pf-t--global--font--size--body--default);
9796
9797
  --pf-v6-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default);
@@ -10003,11 +10004,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10003
10004
  }
10004
10005
 
10005
10006
  .pf-v6-c-card__title-text {
10007
+ overflow: auto;
10006
10008
  font-family: var(--pf-v6-c-card__title-text--FontFamily);
10007
10009
  font-size: var(--pf-v6-c-card__title-text--FontSize);
10008
10010
  font-weight: var(--pf-v6-c-card__title-text--FontWeight);
10009
10011
  line-height: var(--pf-v6-c-card__title-text--LineHeight);
10010
10012
  color: var(--pf-v6-c-card__title-text--Color);
10013
+ overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
10011
10014
  }
10012
10015
 
10013
10016
  .pf-v6-c-card__actions {
@@ -14529,12 +14532,11 @@ ul) {
14529
14532
  padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart);
14530
14533
  padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
14531
14534
  color: var(--pf-v6-c-form-control--Color);
14535
+ appearance: none;
14532
14536
  background-color: transparent;
14533
14537
  border: none;
14534
14538
  border-radius: var(--pf-v6-c-form-control--BorderRadius);
14535
14539
  outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
14536
- -moz-appearance: none;
14537
- -webkit-appearance: none;
14538
14540
  }
14539
14541
  .pf-v6-c-form-control > ::placeholder {
14540
14542
  color: var(--pf-v6-c-form-control--m-placeholder--Color);
@@ -25777,6 +25779,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25777
25779
  }
25778
25780
  }
25779
25781
 
25782
+ @property --pf-v6-c-tabs--link-accent--length {
25783
+ syntax: "<length>";
25784
+ inherits: true;
25785
+ initial-value: 0px;
25786
+ }
25787
+ @property --pf-v6-c-tabs--link-accent--start {
25788
+ syntax: "<length>";
25789
+ inherits: true;
25790
+ initial-value: 0px;
25791
+ }
25780
25792
  .pf-v6-c-tabs {
25781
25793
  --pf-v6-c-tabs--inset: 0;
25782
25794
  --pf-v6-c-tabs--Width: auto;
@@ -25838,6 +25850,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25838
25850
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
25839
25851
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
25840
25852
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
25853
+ --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
25854
+ --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
25841
25855
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
25842
25856
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
25843
25857
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -25862,6 +25876,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25862
25876
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
25863
25877
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
25864
25878
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
25879
+ --pf-v6-c-tabs--link-accent--start: 0;
25880
+ --pf-v6-c-tabs--link-accent--length: auto;
25881
+ --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
25882
+ --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
25883
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
25884
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
25885
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
25886
+ --pf-v6-c-tabs--link-accent--Width: initial;
25887
+ --pf-v6-c-tabs--link-accent--Height: 0;
25888
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
25889
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
25890
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
25891
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
25892
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
25893
+ --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
25894
+ --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
25895
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
25896
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
25897
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
25898
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
25865
25899
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25866
25900
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
25867
25901
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -26019,6 +26053,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26019
26053
  --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
26020
26054
  --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
26021
26055
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
26056
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
26057
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
26058
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
26059
+ --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
26060
+ --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
26061
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
26062
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
26022
26063
  display: inline-flex;
26023
26064
  flex-direction: column;
26024
26065
  height: 100%;
@@ -26281,6 +26322,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26281
26322
  text-decoration-line: none;
26282
26323
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
26283
26324
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
26325
+ transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
26284
26326
  }
26285
26327
  .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
26286
26328
  --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -26593,6 +26635,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26593
26635
  }
26594
26636
  }
26595
26637
 
26638
+ @media (prefers-reduced-motion: no-preference) {
26639
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
26640
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
26641
+ content: revert;
26642
+ }
26643
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
26644
+ position: absolute;
26645
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
26646
+ inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
26647
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
26648
+ width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
26649
+ height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
26650
+ content: "";
26651
+ border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
26652
+ border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
26653
+ border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
26654
+ transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
26655
+ transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
26656
+ transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
26657
+ }
26658
+ .pf-v6-c-tabs.pf-m-initializing-accent {
26659
+ --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
26660
+ }
26661
+ }
26596
26662
  .pf-v6-c-text-input-group {
26597
26663
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
26598
26664
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
package/patternfly.css CHANGED
@@ -9927,6 +9927,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9927
9927
  --pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
9928
9928
  --pf-v6-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
9929
9929
  --pf-v6-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
9930
+ --pf-v6-c-card__title-text--OverflowWrap: break-word;
9930
9931
  --pf-v6-c-card--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
9931
9932
  --pf-v6-c-card__body--FontSize: var(--pf-t--global--font--size--body--default);
9932
9933
  --pf-v6-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default);
@@ -10139,11 +10140,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10139
10140
  }
10140
10141
 
10141
10142
  .pf-v6-c-card__title-text {
10143
+ overflow: auto;
10142
10144
  font-family: var(--pf-v6-c-card__title-text--FontFamily);
10143
10145
  font-size: var(--pf-v6-c-card__title-text--FontSize);
10144
10146
  font-weight: var(--pf-v6-c-card__title-text--FontWeight);
10145
10147
  line-height: var(--pf-v6-c-card__title-text--LineHeight);
10146
10148
  color: var(--pf-v6-c-card__title-text--Color);
10149
+ overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
10147
10150
  }
10148
10151
 
10149
10152
  .pf-v6-c-card__actions {
@@ -14665,12 +14668,11 @@ ul) {
14665
14668
  padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart);
14666
14669
  padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
14667
14670
  color: var(--pf-v6-c-form-control--Color);
14671
+ appearance: none;
14668
14672
  background-color: transparent;
14669
14673
  border: none;
14670
14674
  border-radius: var(--pf-v6-c-form-control--BorderRadius);
14671
14675
  outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
14672
- -moz-appearance: none;
14673
- -webkit-appearance: none;
14674
14676
  }
14675
14677
  .pf-v6-c-form-control > ::placeholder {
14676
14678
  color: var(--pf-v6-c-form-control--m-placeholder--Color);
@@ -25913,6 +25915,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25913
25915
  }
25914
25916
  }
25915
25917
 
25918
+ @property --pf-v6-c-tabs--link-accent--length {
25919
+ syntax: "<length>";
25920
+ inherits: true;
25921
+ initial-value: 0px;
25922
+ }
25923
+ @property --pf-v6-c-tabs--link-accent--start {
25924
+ syntax: "<length>";
25925
+ inherits: true;
25926
+ initial-value: 0px;
25927
+ }
25916
25928
  .pf-v6-c-tabs {
25917
25929
  --pf-v6-c-tabs--inset: 0;
25918
25930
  --pf-v6-c-tabs--Width: auto;
@@ -25974,6 +25986,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25974
25986
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
25975
25987
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
25976
25988
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
25989
+ --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
25990
+ --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
25977
25991
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
25978
25992
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
25979
25993
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -25998,6 +26012,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25998
26012
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
25999
26013
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
26000
26014
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
26015
+ --pf-v6-c-tabs--link-accent--start: 0;
26016
+ --pf-v6-c-tabs--link-accent--length: auto;
26017
+ --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
26018
+ --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
26019
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
26020
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
26021
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
26022
+ --pf-v6-c-tabs--link-accent--Width: initial;
26023
+ --pf-v6-c-tabs--link-accent--Height: 0;
26024
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
26025
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
26026
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
26027
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
26028
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
26029
+ --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
26030
+ --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
26031
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
26032
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
26033
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
26034
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
26001
26035
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
26002
26036
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
26003
26037
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -26155,6 +26189,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26155
26189
  --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
26156
26190
  --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
26157
26191
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
26192
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
26193
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
26194
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
26195
+ --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
26196
+ --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
26197
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
26198
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
26158
26199
  display: inline-flex;
26159
26200
  flex-direction: column;
26160
26201
  height: 100%;
@@ -26417,6 +26458,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26417
26458
  text-decoration-line: none;
26418
26459
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
26419
26460
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
26461
+ transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
26420
26462
  }
26421
26463
  .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
26422
26464
  --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -26729,6 +26771,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26729
26771
  }
26730
26772
  }
26731
26773
 
26774
+ @media (prefers-reduced-motion: no-preference) {
26775
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
26776
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
26777
+ content: revert;
26778
+ }
26779
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
26780
+ position: absolute;
26781
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
26782
+ inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
26783
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
26784
+ width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
26785
+ height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
26786
+ content: "";
26787
+ border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
26788
+ border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
26789
+ border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
26790
+ transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
26791
+ transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
26792
+ transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
26793
+ }
26794
+ .pf-v6-c-tabs.pf-m-initializing-accent {
26795
+ --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
26796
+ }
26797
+ }
26732
26798
  .pf-v6-c-text-input-group {
26733
26799
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
26734
26800
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);