@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/components/Tabs/tabs.css CHANGED
@@ -96,25 +96,28 @@
96
96
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
97
97
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
98
98
  --pf-v6-c-tabs--link-accent--start: 0;
99
- --pf-v6-c-tabs--link-accent--length: auto;
99
+ --pf-v6-c-tabs--link-accent--length: 0;
100
100
  --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
101
101
  --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
102
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
103
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
102
104
  --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
103
105
  --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
104
- --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
106
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: 0;
105
107
  --pf-v6-c-tabs--link-accent--Width: initial;
106
108
  --pf-v6-c-tabs--link-accent--Height: 0;
107
109
  --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
108
110
  --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
109
- --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
111
+ --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--link-accent--start);
112
+ --pf-v6-c-tabs--link-accent--TranslateY: 0;
113
+ --pf-v6-c-tabs--link-accent--TransformOrigin: 0 center;
114
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: 0;
110
115
  --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
111
- --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
112
- --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
113
- --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
114
116
  --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
115
117
  --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
116
- --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
117
- --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
118
+ --pf-v6-c-tabs--m-vertical--link-accent--TranslateX: 0;
119
+ --pf-v6-c-tabs--m-vertical--link-accent--TranslateY: var(--pf-v6-c-tabs--link-accent--start);
120
+ --pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin: center 0;
118
121
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
119
122
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
120
123
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -274,11 +277,13 @@
274
277
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
275
278
  --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
276
279
  --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
277
- --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
278
280
  --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
279
281
  --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
280
282
  --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
281
283
  --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
284
+ --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateX);
285
+ --pf-v6-c-tabs--link-accent--TranslateY: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateY);
286
+ --pf-v6-c-tabs--link-accent--TransformOrigin: var(--pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin);
282
287
  display: inline-flex;
283
288
  flex-direction: column;
284
289
  height: 100%;
@@ -855,15 +860,15 @@
855
860
  }
856
861
 
857
862
  @media (prefers-reduced-motion: no-preference) {
858
- .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
859
- .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
863
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__link::after,
864
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
860
865
  content: revert;
861
866
  }
862
- .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
867
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
863
868
  position: absolute;
864
- inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
869
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart);
865
870
  inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
866
- inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
871
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart);
867
872
  width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
868
873
  height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
869
874
  content: "";
@@ -872,7 +877,12 @@
872
877
  border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
873
878
  transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
874
879
  transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
875
- transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
880
+ transition-property: width, height, translate;
881
+ transform-origin: var(--pf-v6-c-tabs--link-accent--TransformOrigin);
882
+ translate: var(--pf-v6-c-tabs--link-accent--TranslateX) var(--pf-v6-c-tabs--link-accent--TranslateY);
883
+ }
884
+ :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 {
885
+ translate: calc(var(--pf-v6-c-tabs--link-accent--TranslateX) * var(--pf-v6-global--inverse--multiplier)) var(--pf-v6-c-tabs--link-accent--TranslateY);
876
886
  }
877
887
  .pf-v6-c-tabs.pf-m-initializing-accent {
878
888
  --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
package/components/Tabs/tabs.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  $pf-v6-c-tabs--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
4
4
  $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
5
5
 
6
+
6
7
  @property --#{$tabs}--link-accent--length {
7
8
  syntax: "<length>";
8
9
  inherits: true;
@@ -121,25 +122,28 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
121
122
 
122
123
  // Link accent
123
124
  --#{$tabs}--link-accent--start: 0; // needed to create react-token
124
- --#{$tabs}--link-accent--length: auto; // needed to create react-token
125
+ --#{$tabs}--link-accent--length: 0; // needed to create react-token
125
126
  --#{$tabs}--link-accent--color: var(--#{$tabs}__item--m-current__link--after--BorderColor);
126
127
  --#{$tabs}--link-accent--border-size: var(--#{$tabs}__item--m-current__link--after--BorderWidth);
128
+ --#{$tabs}--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
129
+ --#{$tabs}--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
127
130
  --#{$tabs}--link-accent--InsetBlockStart: auto;
128
131
  --#{$tabs}--link-accent--InsetBlockEnd: 0;
129
- --#{$tabs}--link-accent--InsetInlineStart: initial;
132
+ --#{$tabs}--link-accent--InsetInlineStart: 0;
130
133
  --#{$tabs}--link-accent--Width: initial;
131
134
  --#{$tabs}--link-accent--Height: 0;
132
135
  --#{$tabs}--link-accent--BorderBlockEndWidth: var(--#{$tabs}--link-accent--border-size);
133
136
  --#{$tabs}--link-accent--BorderInlineStartWidth: 0;
134
- --#{$tabs}--m-vertical--link-accent--InsetBlockStart: initial;
137
+ --#{$tabs}--link-accent--TranslateX: var(--#{$tabs}--link-accent--start);
138
+ --#{$tabs}--link-accent--TranslateY: 0;
139
+ --#{$tabs}--link-accent--TransformOrigin: 0 center;
140
+ --#{$tabs}--m-vertical--link-accent--InsetBlockStart: 0;
135
141
  --#{$tabs}--m-vertical--link-accent--InsetBlockEnd: auto;
136
- --#{$tabs}--m-vertical--link-accent--InsetInlineStart: 0;
137
- --#{$tabs}--m-vertical--link-accent--Width: 0;
138
- --#{$tabs}--m-vertical--link-accent--Height: initial;
139
142
  --#{$tabs}--m-vertical--link-accent--BorderBlockEndWidth: 0;
140
143
  --#{$tabs}--m-vertical--link-accent--BorderInlineStartWidth: var(--#{$tabs}--link-accent--border-size);
141
- --#{$tabs}--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
142
- --#{$tabs}--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
144
+ --#{$tabs}--m-vertical--link-accent--TranslateX: 0;
145
+ --#{$tabs}--m-vertical--link-accent--TranslateY: var(--#{$tabs}--link-accent--start);
146
+ --#{$tabs}--m-vertical--link-accent--TransformOrigin: center 0;
143
147
 
144
148
  // Scroll buttons
145
149
  --#{$tabs}__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -354,11 +358,13 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
354
358
  --#{$tabs}__list--ScrollSnapTypeAxis: var(--#{$tabs}--m-vertical__list--ScrollSnapTypeAxis);
355
359
  --#{$tabs}--link-accent--InsetBlockStart: var(--#{$tabs}--m-vertical--link-accent--InsetBlockStart);
356
360
  --#{$tabs}--link-accent--InsetBlockEnd: var(--#{$tabs}--m-vertical--link-accent--InsetBlockEnd);
357
- --#{$tabs}--link-accent--InsetInlineStart: var(--#{$tabs}--m-vertical--link-accent--InsetInlineStart);
358
361
  --#{$tabs}--link-accent--Width: var(--#{$tabs}--m-vertical--link-accent--Width);
359
362
  --#{$tabs}--link-accent--Height: var(--#{$tabs}--m-vertical--link-accent--Height);
360
363
  --#{$tabs}--link-accent--BorderBlockEndWidth: var(--#{$tabs}--m-vertical--link-accent--BorderBlockEndWidth);
361
364
  --#{$tabs}--link-accent--BorderInlineStartWidth: var(--#{$tabs}--m-vertical--link-accent--BorderInlineStartWidth);
365
+ --#{$tabs}--link-accent--TranslateX: var(--#{$tabs}--m-vertical--link-accent--TranslateX);
366
+ --#{$tabs}--link-accent--TranslateY: var(--#{$tabs}--m-vertical--link-accent--TranslateY);
367
+ --#{$tabs}--link-accent--TransformOrigin: var(--#{$tabs}--m-vertical--link-accent--TransformOrigin);
362
368
 
363
369
  display: inline-flex;
364
370
  flex-direction: column;
@@ -785,7 +791,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
785
791
  // stylelint-enable
786
792
 
787
793
  @media (prefers-reduced-motion: no-preference) {
788
- .#{$tabs}:not(.pf-m-box) {
794
+ .#{$tabs}.pf-m-animate-current:not(.pf-m-box) {
789
795
  .#{$tabs}__link,
790
796
  .#{$tabs}__item.pf-m-action {
791
797
  &::after {
@@ -795,9 +801,9 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
795
801
 
796
802
  .#{$tabs}__list::after {
797
803
  position: absolute;
798
- inset-block-start: var(--#{$tabs}--link-accent--InsetBlockStart, var(--#{$tabs}--link-accent--start));
804
+ inset-block-start: var(--#{$tabs}--link-accent--InsetBlockStart);
799
805
  inset-block-end: var(--#{$tabs}--link-accent--InsetBlockEnd);
800
- inset-inline-start: var(--#{$tabs}--link-accent--InsetInlineStart, var(--#{$tabs}--link-accent--start));
806
+ inset-inline-start: var(--#{$tabs}--link-accent--InsetInlineStart);
801
807
  width: var(--#{$tabs}--link-accent--Width, var(--#{$tabs}--link-accent--length));
802
808
  height: var(--#{$tabs}--link-accent--Height, var(--#{$tabs}--link-accent--length));
803
809
  content: "";
@@ -806,7 +812,14 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
806
812
  border-inline-start-width: var(--#{$tabs}--link-accent--BorderInlineStartWidth);
807
813
  transition-timing-function: var(--#{$tabs}--link-accent--TransitionTimingFunction);
808
814
  transition-duration: var(--#{$tabs}--link-accent--TransitionDuration);
809
- transition-property: --#{$tabs}--link-accent--length, --#{$tabs}--link-accent--start, width;
815
+ transition-property: width, height, translate;
816
+ transform-origin: var(--#{$tabs}--link-accent--TransformOrigin);
817
+
818
+ @include pf-v6-bidirectional-style(
819
+ $prop: translate,
820
+ $ltr-val: var(--#{$tabs}--link-accent--TranslateX) var(--#{$tabs}--link-accent--TranslateY),
821
+ $rtl-val: #{pf-v6-calc-inverse(var(--#{$tabs}--link-accent--TranslateX))} var(--#{$tabs}--link-accent--TranslateY)
822
+ );
810
823
  }
811
824
  }
812
825
 
package/components/_index.css CHANGED
@@ -18660,25 +18660,28 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18660
18660
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
18661
18661
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
18662
18662
  --pf-v6-c-tabs--link-accent--start: 0;
18663
- --pf-v6-c-tabs--link-accent--length: auto;
18663
+ --pf-v6-c-tabs--link-accent--length: 0;
18664
18664
  --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
18665
18665
  --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
18666
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
18667
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
18666
18668
  --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
18667
18669
  --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
18668
- --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
18670
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: 0;
18669
18671
  --pf-v6-c-tabs--link-accent--Width: initial;
18670
18672
  --pf-v6-c-tabs--link-accent--Height: 0;
18671
18673
  --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
18672
18674
  --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
18673
- --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
18675
+ --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--link-accent--start);
18676
+ --pf-v6-c-tabs--link-accent--TranslateY: 0;
18677
+ --pf-v6-c-tabs--link-accent--TransformOrigin: 0 center;
18678
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: 0;
18674
18679
  --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
18675
- --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
18676
- --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
18677
- --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
18678
18680
  --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
18679
18681
  --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
18680
- --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
18681
- --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
18682
+ --pf-v6-c-tabs--m-vertical--link-accent--TranslateX: 0;
18683
+ --pf-v6-c-tabs--m-vertical--link-accent--TranslateY: var(--pf-v6-c-tabs--link-accent--start);
18684
+ --pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin: center 0;
18682
18685
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
18683
18686
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18684
18687
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -18838,11 +18841,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18838
18841
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
18839
18842
  --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
18840
18843
  --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
18841
- --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
18842
18844
  --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
18843
18845
  --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
18844
18846
  --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
18845
18847
  --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
18848
+ --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateX);
18849
+ --pf-v6-c-tabs--link-accent--TranslateY: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateY);
18850
+ --pf-v6-c-tabs--link-accent--TransformOrigin: var(--pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin);
18846
18851
  display: inline-flex;
18847
18852
  flex-direction: column;
18848
18853
  height: 100%;
@@ -19419,15 +19424,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19419
19424
  }
19420
19425
 
19421
19426
  @media (prefers-reduced-motion: no-preference) {
19422
- .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
19423
- .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
19427
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__link::after,
19428
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
19424
19429
  content: revert;
19425
19430
  }
19426
- .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
19431
+ .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
19427
19432
  position: absolute;
19428
- inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
19433
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart);
19429
19434
  inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
19430
- inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
19435
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart);
19431
19436
  width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
19432
19437
  height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
19433
19438
  content: "";
@@ -19436,7 +19441,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19436
19441
  border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
19437
19442
  transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
19438
19443
  transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
19439
- transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
19444
+ transition-property: width, height, translate;
19445
+ transform-origin: var(--pf-v6-c-tabs--link-accent--TransformOrigin);
19446
+ translate: var(--pf-v6-c-tabs--link-accent--TranslateX) var(--pf-v6-c-tabs--link-accent--TranslateY);
19447
+ }
19448
+ :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 {
19449
+ translate: calc(var(--pf-v6-c-tabs--link-accent--TranslateX) * var(--pf-v6-global--inverse--multiplier)) var(--pf-v6-c-tabs--link-accent--TranslateY);
19440
19450
  }
19441
19451
  .pf-v6-c-tabs.pf-m-initializing-accent {
19442
19452
  --pf-v6-c-tabs--link-accent--TransitionDuration: 0;