@patternfly/patternfly 5.1.0-prerelease.11 → 5.1.0-prerelease.13

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 (24) hide show
  1. package/components/Alert/alert.css +3 -0
  2. package/components/Alert/alert.scss +2 -0
  3. package/components/Breadcrumb/breadcrumb.css +3 -0
  4. package/components/Breadcrumb/breadcrumb.scss +2 -0
  5. package/components/CalendarMonth/calendar-month.css +4 -0
  6. package/components/CalendarMonth/calendar-month.scss +2 -0
  7. package/components/ClipboardCopy/clipboard-copy.css +3 -0
  8. package/components/ClipboardCopy/clipboard-copy.scss +2 -0
  9. package/components/Menu/menu.css +11 -0
  10. package/components/Menu/menu.scss +12 -2
  11. package/components/Nav/nav.css +20 -0
  12. package/components/Nav/nav.scss +22 -2
  13. package/components/NotificationDrawer/notification-drawer.css +4 -0
  14. package/components/NotificationDrawer/notification-drawer.scss +2 -0
  15. package/components/Page/page.css +4 -0
  16. package/components/Page/page.scss +6 -1
  17. package/docs/components/Toolbar/examples/Toolbar.md +76 -60
  18. package/docs/demos/Card/examples/Card.md +2 -2
  19. package/package.json +2 -2
  20. package/patternfly-no-globals.css +52 -0
  21. package/patternfly-theme-dark-unversioned.css +52 -0
  22. package/patternfly.css +52 -0
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -6084,6 +6084,9 @@ button) {
6084
6084
  transition: var(--pf-v5-c-alert__toggle-icon--Transition);
6085
6085
  transform: rotate(var(--pf-v5-c-alert__toggle-icon--Rotate));
6086
6086
  }
6087
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-alert__toggle-icon {
6088
+ scale: -1 1;
6089
+ }
6087
6090
 
6088
6091
  .pf-v5-c-alert__icon {
6089
6092
  display: flex;
@@ -7046,6 +7049,9 @@ button) {
7046
7049
  line-height: 1;
7047
7050
  color: var(--pf-v5-c-breadcrumb__item-divider--Color);
7048
7051
  }
7052
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
7053
+ scale: -1 1;
7054
+ }
7049
7055
 
7050
7056
  .pf-v5-c-breadcrumb__link {
7051
7057
  font-size: inherit;
@@ -7732,6 +7738,10 @@ button.pf-v5-c-breadcrumb__link {
7732
7738
  margin-inline-start: var(--pf-v5-c-calendar-month__header-nav-control--MarginLeft);
7733
7739
  margin-inline-end: var(--pf-v5-c-calendar-month__header-nav-control--MarginRight);
7734
7740
  }
7741
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-calendar-month__header-nav-control {
7742
+ scale: -1 1;
7743
+ }
7744
+
7735
7745
  .pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month {
7736
7746
  --pf-v5-c-calendar-month__header-nav-control--MarginRight: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
7737
7747
  --pf-v5-c-calendar-month__header-nav-control--MarginLeft: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
@@ -8623,6 +8633,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
8623
8633
  .pf-v5-c-clipboard-copy__toggle-icon {
8624
8634
  transition: var(--pf-v5-c-clipboard-copy__toggle-icon--Transition);
8625
8635
  }
8636
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-clipboard-copy__toggle-icon {
8637
+ scale: -1 1;
8638
+ }
8626
8639
 
8627
8640
  .pf-v5-c-clipboard-copy__expandable-content {
8628
8641
  padding-block-start: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingTop);
@@ -17970,6 +17983,10 @@ ul.pf-v5-c-list {
17970
17983
  .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
17971
17984
  transform: translateX(-100%);
17972
17985
  }
17986
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list, .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
17987
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
17988
+ }
17989
+
17973
17990
  .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu {
17974
17991
  --pf-v5-c-menu--BoxShadow: none;
17975
17992
  position: absolute;
@@ -17981,6 +17998,10 @@ ul.pf-v5-c-list {
17981
17998
  .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
17982
17999
  transform: translateX(-100%);
17983
18000
  }
18001
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
18002
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
18003
+ }
18004
+
17984
18005
  .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list {
17985
18006
  position: relative;
17986
18007
  overflow: hidden;
@@ -18280,6 +18301,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18280
18301
  padding-inline-end: var(--pf-v5-c-menu__item-toggle-icon--PaddingRight);
18281
18302
  color: var(--pf-v5-c-menu__item-toggle-icon, inherit);
18282
18303
  }
18304
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu__item-toggle-icon {
18305
+ scale: -1 1;
18306
+ }
18283
18307
 
18284
18308
  .pf-v5-c-menu__item-text + .pf-v5-c-menu__item-toggle-icon {
18285
18309
  margin-inline-start: var(--pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft);
@@ -19603,6 +19627,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19603
19627
  .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
19604
19628
  margin-inline-start: calc(var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft) * -1);
19605
19629
  }
19630
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
19631
+ scale: -1 1;
19632
+ }
19633
+
19606
19634
  .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link::after, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link::after {
19607
19635
  content: none;
19608
19636
  }
@@ -20046,6 +20074,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20046
20074
  display: inline-block;
20047
20075
  transition: var(--pf-v5-c-nav__toggle-icon--Transition);
20048
20076
  }
20077
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__toggle-icon {
20078
+ scale: -1 1;
20079
+ }
20080
+
20049
20081
  .pf-v5-c-nav__item.pf-m-expanded .pf-v5-c-nav__toggle-icon {
20050
20082
  transform: rotate(var(--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate));
20051
20083
  }
@@ -20101,6 +20133,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20101
20133
  opacity: 0;
20102
20134
  transition: var(--pf-v5-c-nav__scroll-button--Transition);
20103
20135
  }
20136
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button > * {
20137
+ scale: -1 1;
20138
+ }
20139
+
20104
20140
  .pf-v5-c-nav__scroll-button::before {
20105
20141
  position: absolute;
20106
20142
  inset-block-start: 0;
@@ -20128,6 +20164,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20128
20164
  margin-inline-end: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
20129
20165
  transform: translateX(-100%);
20130
20166
  }
20167
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(1) {
20168
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
20169
+ }
20170
+
20131
20171
  .pf-v5-c-nav__scroll-button:nth-of-type(1)::before {
20132
20172
  inset-inline-end: 0;
20133
20173
  }
@@ -20136,6 +20176,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20136
20176
  margin-inline-start: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
20137
20177
  transform: translateX(100%);
20138
20178
  }
20179
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(2) {
20180
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
20181
+ }
20182
+
20139
20183
  .pf-v5-c-nav__scroll-button:nth-of-type(2)::before {
20140
20184
  inset-inline-start: 0;
20141
20185
  }
@@ -20570,6 +20614,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20570
20614
  color: var(--pf-v5-c-notification-drawer__group-toggle-icon--Color);
20571
20615
  transition: var(--pf-v5-c-notification-drawer__group-toggle-icon--Transition);
20572
20616
  }
20617
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-notification-drawer__group-toggle-icon {
20618
+ scale: -1 1;
20619
+ }
20620
+
20573
20621
  .pf-v5-c-notification-drawer__group.pf-m-expanded .pf-v5-c-notification-drawer__group-toggle-icon {
20574
20622
  transform: rotate(var(--pf-v5-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
20575
20623
  }
@@ -21271,6 +21319,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21271
21319
  transition: var(--pf-v5-c-page__sidebar--Transition);
21272
21320
  transform: translateX(var(--pf-v5-c-page__sidebar--TranslateX)) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
21273
21321
  }
21322
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-page__sidebar {
21323
+ transform: translateX(calc(var(--pf-v5-c-page__sidebar--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
21324
+ }
21325
+
21274
21326
  .pf-v5-c-page__sidebar.pf-m-expanded {
21275
21327
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--m-expanded--TranslateX);
21276
21328
  box-shadow: var(--pf-v5-c-page__sidebar--BoxShadow);
package/patternfly.css CHANGED
@@ -6084,6 +6084,9 @@ button) {
6084
6084
  transition: var(--pf-v5-c-alert__toggle-icon--Transition);
6085
6085
  transform: rotate(var(--pf-v5-c-alert__toggle-icon--Rotate));
6086
6086
  }
6087
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-alert__toggle-icon {
6088
+ scale: -1 1;
6089
+ }
6087
6090
 
6088
6091
  .pf-v5-c-alert__icon {
6089
6092
  display: flex;
@@ -7046,6 +7049,9 @@ button) {
7046
7049
  line-height: 1;
7047
7050
  color: var(--pf-v5-c-breadcrumb__item-divider--Color);
7048
7051
  }
7052
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
7053
+ scale: -1 1;
7054
+ }
7049
7055
 
7050
7056
  .pf-v5-c-breadcrumb__link {
7051
7057
  font-size: inherit;
@@ -7732,6 +7738,10 @@ button.pf-v5-c-breadcrumb__link {
7732
7738
  margin-inline-start: var(--pf-v5-c-calendar-month__header-nav-control--MarginLeft);
7733
7739
  margin-inline-end: var(--pf-v5-c-calendar-month__header-nav-control--MarginRight);
7734
7740
  }
7741
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-calendar-month__header-nav-control {
7742
+ scale: -1 1;
7743
+ }
7744
+
7735
7745
  .pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month {
7736
7746
  --pf-v5-c-calendar-month__header-nav-control--MarginRight: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
7737
7747
  --pf-v5-c-calendar-month__header-nav-control--MarginLeft: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
@@ -8623,6 +8633,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
8623
8633
  .pf-v5-c-clipboard-copy__toggle-icon {
8624
8634
  transition: var(--pf-v5-c-clipboard-copy__toggle-icon--Transition);
8625
8635
  }
8636
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-clipboard-copy__toggle-icon {
8637
+ scale: -1 1;
8638
+ }
8626
8639
 
8627
8640
  .pf-v5-c-clipboard-copy__expandable-content {
8628
8641
  padding-block-start: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingTop);
@@ -17970,6 +17983,10 @@ ul.pf-v5-c-list {
17970
17983
  .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
17971
17984
  transform: translateX(-100%);
17972
17985
  }
17986
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list, .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
17987
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
17988
+ }
17989
+
17973
17990
  .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu {
17974
17991
  --pf-v5-c-menu--BoxShadow: none;
17975
17992
  position: absolute;
@@ -17981,6 +17998,10 @@ ul.pf-v5-c-list {
17981
17998
  .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
17982
17999
  transform: translateX(-100%);
17983
18000
  }
18001
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
18002
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
18003
+ }
18004
+
17984
18005
  .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list {
17985
18006
  position: relative;
17986
18007
  overflow: hidden;
@@ -18280,6 +18301,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18280
18301
  padding-inline-end: var(--pf-v5-c-menu__item-toggle-icon--PaddingRight);
18281
18302
  color: var(--pf-v5-c-menu__item-toggle-icon, inherit);
18282
18303
  }
18304
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu__item-toggle-icon {
18305
+ scale: -1 1;
18306
+ }
18283
18307
 
18284
18308
  .pf-v5-c-menu__item-text + .pf-v5-c-menu__item-toggle-icon {
18285
18309
  margin-inline-start: var(--pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft);
@@ -19603,6 +19627,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19603
19627
  .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
19604
19628
  margin-inline-start: calc(var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft) * -1);
19605
19629
  }
19630
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
19631
+ scale: -1 1;
19632
+ }
19633
+
19606
19634
  .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link::after, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link::after {
19607
19635
  content: none;
19608
19636
  }
@@ -20046,6 +20074,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20046
20074
  display: inline-block;
20047
20075
  transition: var(--pf-v5-c-nav__toggle-icon--Transition);
20048
20076
  }
20077
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__toggle-icon {
20078
+ scale: -1 1;
20079
+ }
20080
+
20049
20081
  .pf-v5-c-nav__item.pf-m-expanded .pf-v5-c-nav__toggle-icon {
20050
20082
  transform: rotate(var(--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate));
20051
20083
  }
@@ -20101,6 +20133,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20101
20133
  opacity: 0;
20102
20134
  transition: var(--pf-v5-c-nav__scroll-button--Transition);
20103
20135
  }
20136
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button > * {
20137
+ scale: -1 1;
20138
+ }
20139
+
20104
20140
  .pf-v5-c-nav__scroll-button::before {
20105
20141
  position: absolute;
20106
20142
  inset-block-start: 0;
@@ -20128,6 +20164,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20128
20164
  margin-inline-end: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
20129
20165
  transform: translateX(-100%);
20130
20166
  }
20167
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(1) {
20168
+ transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
20169
+ }
20170
+
20131
20171
  .pf-v5-c-nav__scroll-button:nth-of-type(1)::before {
20132
20172
  inset-inline-end: 0;
20133
20173
  }
@@ -20136,6 +20176,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20136
20176
  margin-inline-start: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
20137
20177
  transform: translateX(100%);
20138
20178
  }
20179
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(2) {
20180
+ transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
20181
+ }
20182
+
20139
20183
  .pf-v5-c-nav__scroll-button:nth-of-type(2)::before {
20140
20184
  inset-inline-start: 0;
20141
20185
  }
@@ -20570,6 +20614,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20570
20614
  color: var(--pf-v5-c-notification-drawer__group-toggle-icon--Color);
20571
20615
  transition: var(--pf-v5-c-notification-drawer__group-toggle-icon--Transition);
20572
20616
  }
20617
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-notification-drawer__group-toggle-icon {
20618
+ scale: -1 1;
20619
+ }
20620
+
20573
20621
  .pf-v5-c-notification-drawer__group.pf-m-expanded .pf-v5-c-notification-drawer__group-toggle-icon {
20574
20622
  transform: rotate(var(--pf-v5-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
20575
20623
  }
@@ -21271,6 +21319,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21271
21319
  transition: var(--pf-v5-c-page__sidebar--Transition);
21272
21320
  transform: translateX(var(--pf-v5-c-page__sidebar--TranslateX)) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
21273
21321
  }
21322
+ :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-page__sidebar {
21323
+ transform: translateX(calc(var(--pf-v5-c-page__sidebar--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
21324
+ }
21325
+
21274
21326
  .pf-v5-c-page__sidebar.pf-m-expanded {
21275
21327
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--m-expanded--TranslateX);
21276
21328
  box-shadow: var(--pf-v5-c-page__sidebar--BoxShadow);