@patternfly/patternfly 6.5.0-prerelease.11 → 6.5.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 (19) hide show
  1. package/base/normalize.scss +7 -0
  2. package/base/patternfly-variables.css +5 -0
  3. package/base/tokens/tokens-local.scss +10 -0
  4. package/components/Button/button.css +16 -4
  5. package/components/Button/button.scss +18 -4
  6. package/components/Card/card.css +6 -0
  7. package/components/Card/card.scss +7 -1
  8. package/components/Drawer/drawer.css +35 -3
  9. package/components/Drawer/drawer.scss +39 -4
  10. package/components/_index.css +57 -7
  11. package/docs/components/Card/examples/Card.md +154 -0
  12. package/docs/components/Drawer/examples/Drawer.md +78 -13
  13. package/package.json +2 -2
  14. package/patternfly-base-no-globals.css +5 -0
  15. package/patternfly-base.css +12 -0
  16. package/patternfly-no-globals.css +62 -7
  17. package/patternfly.css +69 -7
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -7115,6 +7115,11 @@
7115
7115
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
7116
7116
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
7117
7117
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
7118
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
7119
+ --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
7120
+ --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
7121
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
7122
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
7118
7123
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
7119
7124
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
7120
7125
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
@@ -10398,10 +10403,17 @@ button.pf-v6-c-breadcrumb__link {
10398
10403
  --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
10399
10404
  --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
10400
10405
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
10406
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
10401
10407
  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
10402
10408
  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
10409
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
10410
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
10403
10411
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
10404
10412
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
10413
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
10414
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
10415
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
10416
+ --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
10405
10417
  --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
10406
10418
  --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
10407
10419
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -10411,10 +10423,8 @@ button.pf-v6-c-breadcrumb__link {
10411
10423
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
10412
10424
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
10413
10425
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
10414
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
10415
10426
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
10416
10427
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
10417
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
10418
10428
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
10419
10429
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
10420
10430
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -10739,12 +10749,13 @@ button.pf-v6-c-breadcrumb__link {
10739
10749
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
10740
10750
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
10741
10751
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
10752
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
10753
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
10754
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
10742
10755
  --pf-v6-c-button--BackgroundColor: transparent;
10743
10756
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
10744
10757
  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
10745
10758
  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
10746
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
10747
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
10748
10759
  --pf-v6-c-button--hover--BackgroundColor: transparent;
10749
10760
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
10750
10761
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -10753,6 +10764,8 @@ button.pf-v6-c-breadcrumb__link {
10753
10764
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
10754
10765
  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
10755
10766
  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
10767
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
10768
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
10756
10769
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
10757
10770
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
10758
10771
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -10760,6 +10773,7 @@ button.pf-v6-c-breadcrumb__link {
10760
10773
  --pf-v6-c-button--hover--BorderWidth: 0;
10761
10774
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
10762
10775
  text-align: start;
10776
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
10763
10777
  white-space: normal;
10764
10778
  background: transparent;
10765
10779
  outline-offset: 0.125rem;
@@ -10770,6 +10784,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10770
10784
  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
10771
10785
  }
10772
10786
 
10787
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
10788
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
10789
+ }
10773
10790
  .pf-v6-c-button.pf-m-link.pf-m-danger {
10774
10791
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
10775
10792
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -11633,6 +11650,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11633
11650
  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
11634
11651
  }
11635
11652
 
11653
+ .pf-v6-c-card__subtitle {
11654
+ padding-block-start: var(--pf-t--global--spacer--sm);
11655
+ font-size: var(--pf-t--global--font--size--body--sm);
11656
+ color: var(--pf-t--global--text--color--subtle);
11657
+ }
11658
+
11636
11659
  .pf-v6-c-card__actions {
11637
11660
  display: flex;
11638
11661
  gap: var(--pf-v6-c-card__actions--Gap);
@@ -14673,6 +14696,7 @@ ul) {
14673
14696
  }
14674
14697
 
14675
14698
  .pf-v6-c-drawer {
14699
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
14676
14700
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14677
14701
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14678
14702
  --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -14703,6 +14727,7 @@ ul) {
14703
14727
  --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
14704
14728
  --pf-v6-c-drawer__panel--Opacity: 0;
14705
14729
  --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
14730
+ --pf-v6-c-drawer--m-expanded__panel--inset: 0px;
14706
14731
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
14707
14732
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
14708
14733
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -14718,6 +14743,13 @@ ul) {
14718
14743
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
14719
14744
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
14720
14745
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
14746
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
14747
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
14748
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
14749
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
14750
+ --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
14751
+ --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
14752
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
14721
14753
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
14722
14754
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14723
14755
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -14834,6 +14866,8 @@ ul) {
14834
14866
  .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
14835
14867
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
14836
14868
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
14869
+ --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
14870
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
14837
14871
  }
14838
14872
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
14839
14873
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -14857,7 +14891,7 @@ ul) {
14857
14891
  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
14858
14892
  }
14859
14893
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
14860
- transform: translateX(-100%);
14894
+ transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
14861
14895
  --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
14862
14896
  visibility: visible;
14863
14897
  }
@@ -14869,7 +14903,7 @@ ul) {
14869
14903
  transform: translateX(0);
14870
14904
  }
14871
14905
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
14872
- transform: translate(0, -100%);
14906
+ transform: translate(0, calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
14873
14907
  }
14874
14908
  .pf-v6-c-drawer.pf-m-resizing {
14875
14909
  --pf-v6-c-drawer__panel--TransitionProperty: none;
@@ -14878,6 +14912,21 @@ ul) {
14878
14912
  .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
14879
14913
  pointer-events: auto;
14880
14914
  }
14915
+ @media screen and (min-width: 48rem) {
14916
+ .pf-v6-c-drawer.pf-m-pill {
14917
+ --pf-v6-c-drawer__main--Gap: var(--pf-v6-c-drawer--m-pill__main--Gap, revert);
14918
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-pill__panel--BorderColor);
14919
+ --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
14920
+ --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
14921
+ --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
14922
+ }
14923
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
14924
+ border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
14925
+ border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
14926
+ border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
14927
+ border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
14928
+ }
14929
+ }
14881
14930
 
14882
14931
  .pf-v6-c-drawer__section {
14883
14932
  flex-grow: 0;
@@ -14893,6 +14942,7 @@ ul) {
14893
14942
  .pf-v6-c-drawer__main {
14894
14943
  display: flex;
14895
14944
  flex: 1;
14945
+ gap: var(--pf-v6-c-drawer__main--Gap, 0);
14896
14946
  overflow: hidden;
14897
14947
  }
14898
14948
 
@@ -14931,6 +14981,8 @@ ul) {
14931
14981
  row-gap: var(--pf-v6-c-drawer__panel--RowGap);
14932
14982
  order: 1;
14933
14983
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
14984
+ margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
14985
+ margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
14934
14986
  overflow: auto;
14935
14987
  visibility: hidden;
14936
14988
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
@@ -14939,6 +14991,7 @@ ul) {
14939
14991
  border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
14940
14992
  border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
14941
14993
  border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
14994
+ border-radius: var(--pf-v6-c-drawer__panel--BorderRadius, revert);
14942
14995
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
14943
14996
  opacity: var(--pf-v6-c-drawer__panel--Opacity);
14944
14997
  transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -15126,7 +15179,7 @@ ul) {
15126
15179
  padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
15127
15180
  }
15128
15181
  .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
15129
- transform: translateX(0);
15182
+ transform: translateX(var(--pf-v6-c-drawer--m-expanded__panel--inset));
15130
15183
  }
15131
15184
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
15132
15185
  --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
@@ -15138,6 +15191,8 @@ ul) {
15138
15191
  --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
15139
15192
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
15140
15193
  --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
15194
+ --pf-v6-c-drawer__panel--MarginBlock: initial;
15195
+ --pf-v6-c-drawer__panel--MarginInline: var(--pf-v6-c-drawer--m-expanded__panel--inset);
15141
15196
  min-width: auto;
15142
15197
  min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
15143
15198
  }
package/patternfly.css CHANGED
@@ -119,11 +119,18 @@ pre) {
119
119
  :where(a) {
120
120
  color: var(--pf-t--global--text--color--link--default);
121
121
  text-decoration-line: var(--pf-t--global--text-decoration--link--line--default);
122
+ text-decoration-style: var(--pf-t--global--text-decoration--link--style--default);
123
+ text-decoration-color: var(--pf-t--global--text-decoration--color--default);
124
+ text-underline-offset: max(var(--pf-t--global--text-decoration--offset--default), 0.28em);
125
+ transition: ease text-underline-offset 0.3s;
122
126
  }
123
127
 
124
128
  :where(a:hover, a:focus) {
125
129
  color: var(--pf-t--global--text--color--link--hover);
126
130
  text-decoration-line: var(--pf-t--global--text-decoration--link--line--hover);
131
+ text-decoration-style: var(--pf-t--global--text-decoration--link--style--hover);
132
+ text-decoration-color: var(--pf-t--global--text-decoration--color--hover);
133
+ text-underline-offset: max(var(--pf-t--global--text-decoration--offset--hover), 0.33em);
127
134
  }
128
135
 
129
136
  :where(a,
@@ -7255,6 +7262,11 @@ button) {
7255
7262
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
7256
7263
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
7257
7264
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
7265
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
7266
+ --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
7267
+ --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
7268
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
7269
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
7258
7270
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
7259
7271
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
7260
7272
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
@@ -10538,10 +10550,17 @@ button.pf-v6-c-breadcrumb__link {
10538
10550
  --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
10539
10551
  --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
10540
10552
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
10553
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
10541
10554
  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
10542
10555
  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
10556
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
10557
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
10543
10558
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
10544
10559
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
10560
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
10561
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
10562
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
10563
+ --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
10545
10564
  --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
10546
10565
  --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
10547
10566
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -10551,10 +10570,8 @@ button.pf-v6-c-breadcrumb__link {
10551
10570
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
10552
10571
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
10553
10572
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
10554
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
10555
10573
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
10556
10574
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
10557
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
10558
10575
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
10559
10576
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
10560
10577
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -10879,12 +10896,13 @@ button.pf-v6-c-breadcrumb__link {
10879
10896
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
10880
10897
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
10881
10898
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
10899
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
10900
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
10901
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
10882
10902
  --pf-v6-c-button--BackgroundColor: transparent;
10883
10903
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
10884
10904
  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
10885
10905
  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
10886
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
10887
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
10888
10906
  --pf-v6-c-button--hover--BackgroundColor: transparent;
10889
10907
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
10890
10908
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -10893,6 +10911,8 @@ button.pf-v6-c-breadcrumb__link {
10893
10911
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
10894
10912
  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
10895
10913
  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
10914
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
10915
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
10896
10916
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
10897
10917
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
10898
10918
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -10900,6 +10920,7 @@ button.pf-v6-c-breadcrumb__link {
10900
10920
  --pf-v6-c-button--hover--BorderWidth: 0;
10901
10921
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
10902
10922
  text-align: start;
10923
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
10903
10924
  white-space: normal;
10904
10925
  background: transparent;
10905
10926
  outline-offset: 0.125rem;
@@ -10910,6 +10931,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10910
10931
  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
10911
10932
  }
10912
10933
 
10934
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
10935
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
10936
+ }
10913
10937
  .pf-v6-c-button.pf-m-link.pf-m-danger {
10914
10938
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
10915
10939
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -11773,6 +11797,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11773
11797
  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
11774
11798
  }
11775
11799
 
11800
+ .pf-v6-c-card__subtitle {
11801
+ padding-block-start: var(--pf-t--global--spacer--sm);
11802
+ font-size: var(--pf-t--global--font--size--body--sm);
11803
+ color: var(--pf-t--global--text--color--subtle);
11804
+ }
11805
+
11776
11806
  .pf-v6-c-card__actions {
11777
11807
  display: flex;
11778
11808
  gap: var(--pf-v6-c-card__actions--Gap);
@@ -14813,6 +14843,7 @@ ul) {
14813
14843
  }
14814
14844
 
14815
14845
  .pf-v6-c-drawer {
14846
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
14816
14847
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14817
14848
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14818
14849
  --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -14843,6 +14874,7 @@ ul) {
14843
14874
  --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
14844
14875
  --pf-v6-c-drawer__panel--Opacity: 0;
14845
14876
  --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
14877
+ --pf-v6-c-drawer--m-expanded__panel--inset: 0px;
14846
14878
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
14847
14879
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
14848
14880
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -14858,6 +14890,13 @@ ul) {
14858
14890
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
14859
14891
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
14860
14892
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
14893
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
14894
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
14895
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
14896
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
14897
+ --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
14898
+ --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
14899
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
14861
14900
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
14862
14901
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14863
14902
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -14974,6 +15013,8 @@ ul) {
14974
15013
  .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
14975
15014
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
14976
15015
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
15016
+ --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
15017
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
14977
15018
  }
14978
15019
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
14979
15020
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -14997,7 +15038,7 @@ ul) {
14997
15038
  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
14998
15039
  }
14999
15040
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
15000
- transform: translateX(-100%);
15041
+ transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15001
15042
  --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
15002
15043
  visibility: visible;
15003
15044
  }
@@ -15009,7 +15050,7 @@ ul) {
15009
15050
  transform: translateX(0);
15010
15051
  }
15011
15052
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
15012
- transform: translate(0, -100%);
15053
+ transform: translate(0, calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15013
15054
  }
15014
15055
  .pf-v6-c-drawer.pf-m-resizing {
15015
15056
  --pf-v6-c-drawer__panel--TransitionProperty: none;
@@ -15018,6 +15059,21 @@ ul) {
15018
15059
  .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
15019
15060
  pointer-events: auto;
15020
15061
  }
15062
+ @media screen and (min-width: 48rem) {
15063
+ .pf-v6-c-drawer.pf-m-pill {
15064
+ --pf-v6-c-drawer__main--Gap: var(--pf-v6-c-drawer--m-pill__main--Gap, revert);
15065
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-pill__panel--BorderColor);
15066
+ --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
15067
+ --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
15068
+ --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
15069
+ }
15070
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
15071
+ border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
15072
+ border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
15073
+ border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
15074
+ border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
15075
+ }
15076
+ }
15021
15077
 
15022
15078
  .pf-v6-c-drawer__section {
15023
15079
  flex-grow: 0;
@@ -15033,6 +15089,7 @@ ul) {
15033
15089
  .pf-v6-c-drawer__main {
15034
15090
  display: flex;
15035
15091
  flex: 1;
15092
+ gap: var(--pf-v6-c-drawer__main--Gap, 0);
15036
15093
  overflow: hidden;
15037
15094
  }
15038
15095
 
@@ -15071,6 +15128,8 @@ ul) {
15071
15128
  row-gap: var(--pf-v6-c-drawer__panel--RowGap);
15072
15129
  order: 1;
15073
15130
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
15131
+ margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
15132
+ margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
15074
15133
  overflow: auto;
15075
15134
  visibility: hidden;
15076
15135
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
@@ -15079,6 +15138,7 @@ ul) {
15079
15138
  border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
15080
15139
  border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
15081
15140
  border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
15141
+ border-radius: var(--pf-v6-c-drawer__panel--BorderRadius, revert);
15082
15142
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
15083
15143
  opacity: var(--pf-v6-c-drawer__panel--Opacity);
15084
15144
  transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -15266,7 +15326,7 @@ ul) {
15266
15326
  padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
15267
15327
  }
15268
15328
  .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
15269
- transform: translateX(0);
15329
+ transform: translateX(var(--pf-v6-c-drawer--m-expanded__panel--inset));
15270
15330
  }
15271
15331
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
15272
15332
  --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
@@ -15278,6 +15338,8 @@ ul) {
15278
15338
  --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
15279
15339
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
15280
15340
  --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
15341
+ --pf-v6-c-drawer__panel--MarginBlock: initial;
15342
+ --pf-v6-c-drawer__panel--MarginInline: var(--pf-v6-c-drawer--m-expanded__panel--inset);
15281
15343
  min-width: auto;
15282
15344
  min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
15283
15345
  }