@patternfly/react-table 6.0.0-alpha.75 → 6.0.0-alpha.76

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 (12) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/components/package.json +1 -1
  3. package/deprecated/package.json +1 -1
  4. package/dist/dynamic/components/Table/package.json +1 -1
  5. package/dist/dynamic/components/Table/utils/decorators/package.json +1 -1
  6. package/dist/dynamic/components/Table/utils/package.json +1 -1
  7. package/dist/dynamic/deprecated/components/Table/base/package.json +1 -1
  8. package/dist/dynamic/deprecated/components/Table/package.json +1 -1
  9. package/dist/dynamic/deprecated/components/package.json +1 -1
  10. package/dist/umd/assets/{output-B9JXp4Aw.css → output-Be_JZHmr.css} +1936 -1936
  11. package/dist/umd/react-table.min.js +1 -1
  12. package/package.json +3 -3
package/dist/umd/assets/{output-B9JXp4Aw.css → output-Be_JZHmr.css} RENAMED
@@ -7026,71 +7026,173 @@ select ~ .pf-v6-c-form-control__utilities {
7026
7026
  --pf-v6-c-background-image--BackgroundPosition: bottom left;
7027
7027
  }
7028
7028
 
7029
- :where(:root, .pf-v6-c-brand) {
7030
- --pf-v6-c-brand--Width: auto;
7031
- --pf-v6-c-brand--Height: auto;
7029
+ :where(:root, .pf-v6-c-banner) {
7030
+ --pf-v6-c-banner--PaddingBlockStart: var(--pf-t--global--spacer--xs);
7031
+ --pf-v6-c-banner--PaddingInlineEnd: var(--pf-t--global--spacer--md);
7032
+ --pf-v6-c-banner--md--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
7033
+ --pf-v6-c-banner--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
7034
+ --pf-v6-c-banner--PaddingInlineStart: var(--pf-t--global--spacer--md);
7035
+ --pf-v6-c-banner--md--PaddingInlineStart: var(--pf-t--global--spacer--lg);
7036
+ --pf-v6-c-banner--FontSize: var(--pf-t--global--font--size--body--default);
7037
+ --pf-v6-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
7038
+ --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
7039
+ --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
7040
+ --pf-v6-c-banner--link--TextDecoration: underline;
7041
+ --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
7042
+ --pf-v6-c-banner--link--hover--FontWeight: var(--pf-t--global--font--weight--body--bold);
7043
+ --pf-v6-c-banner--link--disabled--Color: var(--pf-v6-c-banner--Color);
7044
+ --pf-v6-c-banner--link--disabled--TextDecoration: none;
7045
+ --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
7046
+ --pf-v6-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
7047
+ --pf-v6-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
7048
+ --pf-v6-c-banner--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
7049
+ --pf-v6-c-banner--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
7050
+ --pf-v6-c-banner--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
7051
+ --pf-v6-c-banner--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
7052
+ --pf-v6-c-banner--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
7053
+ --pf-v6-c-banner--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
7054
+ --pf-v6-c-banner--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
7055
+ --pf-v6-c-banner--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
7056
+ --pf-v6-c-banner--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
7057
+ --pf-v6-c-banner--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
7058
+ --pf-v6-c-banner--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
7059
+ --pf-v6-c-banner--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
7060
+ --pf-v6-c-banner--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
7061
+ --pf-v6-c-banner--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
7062
+ --pf-v6-c-banner--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
7063
+ --pf-v6-c-banner--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
7064
+ --pf-v6-c-banner--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
7065
+ --pf-v6-c-banner--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
7066
+ --pf-v6-c-banner--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
7067
+ --pf-v6-c-banner--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
7068
+ --pf-v6-c-banner--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
7069
+ --pf-v6-c-banner--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
7070
+ --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
7071
+ --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
7072
+ --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
7032
7073
  }
7033
7074
 
7034
- .pf-v6-c-brand {
7035
- width: var(--pf-v6-c-brand--Width--base);
7036
- height: var(--pf-v6-c-brand--Height--base);
7037
- --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
7038
- --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
7075
+ @media (min-width: 768px) {
7076
+ :where(:root, .pf-v6-c-banner) {
7077
+ --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
7078
+ --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
7079
+ }
7080
+ }
7081
+ .pf-v6-c-banner {
7082
+ flex-shrink: 0;
7083
+ padding-block-start: var(--pf-v6-c-banner--PaddingBlockStart);
7084
+ padding-block-end: var(--pf-v6-c-banner--PaddingBlockEnd);
7085
+ padding-inline-start: var(--pf-v6-c-banner--PaddingInlineStart);
7086
+ padding-inline-end: var(--pf-v6-c-banner--PaddingInlineEnd);
7087
+ font-size: var(--pf-v6-c-banner--FontSize);
7088
+ color: var(--pf-v6-c-banner--Color);
7089
+ white-space: nowrap;
7090
+ background-color: var(--pf-v6-c-banner--BackgroundColor);
7039
7091
  }
7040
7092
 
7041
- @media (min-width: 576px) {
7042
- .pf-v6-c-brand {
7043
- --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width));
7044
- }
7093
+ .pf-v6-c-banner.pf-m-danger {
7094
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-danger--BackgroundColor);
7095
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-danger--Color);
7045
7096
  }
7046
- @media (min-width: 768px) {
7047
- .pf-v6-c-brand {
7048
- --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)));
7049
- }
7097
+
7098
+ .pf-v6-c-banner.pf-m-success {
7099
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-success--BackgroundColor);
7100
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-success--Color);
7050
7101
  }
7051
- @media (min-width: 992px) {
7052
- .pf-v6-c-brand {
7053
- --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))));
7054
- }
7102
+
7103
+ .pf-v6-c-banner.pf-m-warning {
7104
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-warning--BackgroundColor);
7105
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-warning--Color);
7055
7106
  }
7056
- @media (min-width: 1200px) {
7057
- .pf-v6-c-brand {
7058
- --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)))));
7059
- }
7107
+
7108
+ .pf-v6-c-banner.pf-m-info {
7109
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-info--BackgroundColor);
7110
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-info--Color);
7060
7111
  }
7061
- @media (min-width: 1450px) {
7062
- .pf-v6-c-brand {
7063
- --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-2xl, var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))))));
7064
- }
7112
+
7113
+ .pf-v6-c-banner.pf-m-custom {
7114
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-custom--BackgroundColor);
7115
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-custom--Color);
7065
7116
  }
7066
- @media (min-width: 576px) {
7067
- .pf-v6-c-brand {
7068
- --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height));
7069
- }
7117
+
7118
+ .pf-v6-c-banner.pf-m-red {
7119
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-red--BackgroundColor);
7120
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-red--Color);
7070
7121
  }
7071
- @media (min-width: 768px) {
7072
- .pf-v6-c-brand {
7073
- --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)));
7074
- }
7122
+
7123
+ .pf-v6-c-banner.pf-m-orangered {
7124
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-orangered--BackgroundColor);
7125
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-orangered--Color);
7075
7126
  }
7076
- @media (min-width: 992px) {
7077
- .pf-v6-c-brand {
7078
- --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))));
7079
- }
7127
+
7128
+ .pf-v6-c-banner.pf-m-orange {
7129
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-orange--BackgroundColor);
7130
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-orange--Color);
7080
7131
  }
7081
- @media (min-width: 1200px) {
7082
- .pf-v6-c-brand {
7083
- --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)))));
7084
- }
7132
+
7133
+ .pf-v6-c-banner.pf-m-yellow {
7134
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-yellow--BackgroundColor);
7135
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-yellow--Color);
7085
7136
  }
7086
- @media (min-width: 1450px) {
7087
- .pf-v6-c-brand {
7088
- --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-2xl, var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))))));
7089
- }
7137
+
7138
+ .pf-v6-c-banner.pf-m-green {
7139
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-green--BackgroundColor);
7140
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-green--Color);
7090
7141
  }
7091
- .pf-v6-c-brand.pf-m-picture {
7092
- display: inline-flex;
7093
- max-width: 100%;
7142
+
7143
+ .pf-v6-c-banner.pf-m-teal {
7144
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-teal--BackgroundColor);
7145
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-teal--Color);
7146
+ }
7147
+
7148
+ .pf-v6-c-banner.pf-m-blue {
7149
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-blue--BackgroundColor);
7150
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-blue--Color);
7151
+ }
7152
+
7153
+ .pf-v6-c-banner.pf-m-purple {
7154
+ --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-purple--BackgroundColor);
7155
+ --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-purple--Color);
7156
+ }
7157
+
7158
+ .pf-v6-c-banner.pf-m-sticky {
7159
+ position: sticky;
7160
+ inset-block-start: 0;
7161
+ z-index: var(--pf-v6-c-banner--m-sticky--ZIndex);
7162
+ box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow);
7163
+ }
7164
+
7165
+ .pf-v6-c-banner a {
7166
+ color: var(--pf-v6-c-banner--link--Color);
7167
+ text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
7168
+ }
7169
+
7170
+ .pf-v6-c-banner a:hover:not(.pf-m-disabled) {
7171
+ --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
7172
+ font-weight: var(--pf-v6-c-banner--link--hover--FontWeight);
7173
+ }
7174
+
7175
+ .pf-v6-c-banner a.pf-m-disabled {
7176
+ --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--disabled--Color);
7177
+ --pf-v6-c-banner--link--TextDecoration: var(--pf-v6-c-banner--link--disabled--TextDecoration);
7178
+ cursor: not-allowed;
7179
+ }
7180
+
7181
+ .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
7182
+ --pf-v6-c-button--m-link--Color: var(--pf-v6-c-banner--link--Color);
7183
+ --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
7184
+ --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
7185
+ text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
7186
+ }
7187
+
7188
+ .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:hover {
7189
+ --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
7190
+ font-weight: var(--pf-v6-c-banner--link--hover--FontWeight);
7191
+ }
7192
+
7193
+ .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
7194
+ --pf-v6-c-banner--link--TextDecoration: var(--pf-v6-c-banner--link--disabled--TextDecoration);
7195
+ cursor: not-allowed;
7094
7196
  }
7095
7197
 
7096
7198
  :where(:root, .pf-v6-c-badge) {
@@ -7166,48 +7268,115 @@ select ~ .pf-v6-c-form-control__utilities {
7166
7268
  color: var(--pf-v6-c-badge__toggle-icon--Color);
7167
7269
  }
7168
7270
 
7169
- :where(:root, .pf-v6-c-breadcrumb) {
7170
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
7171
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
7172
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
7173
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
7174
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
7175
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
7176
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
7177
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7178
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
7179
- --pf-v6-c-breadcrumb__link--TextDecoration: var(--pf-t--global--link--text-decoration);
7180
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
7181
- --pf-v6-c-breadcrumb__link--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
7182
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
7183
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
7184
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
7185
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
7186
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
7187
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
7188
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
7271
+ :where(:root, .pf-v6-c-brand) {
7272
+ --pf-v6-c-brand--Width: auto;
7273
+ --pf-v6-c-brand--Height: auto;
7189
7274
  }
7190
7275
 
7191
- .pf-v6-c-breadcrumb {
7192
- display: inline-flex;
7276
+ .pf-v6-c-brand {
7277
+ width: var(--pf-v6-c-brand--Width--base);
7278
+ height: var(--pf-v6-c-brand--Height--base);
7279
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
7280
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
7193
7281
  }
7194
7282
 
7195
- .pf-v6-c-breadcrumb__list {
7196
- display: flex;
7197
- flex-wrap: wrap;
7198
- align-items: center;
7283
+ @media (min-width: 576px) {
7284
+ .pf-v6-c-brand {
7285
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width));
7286
+ }
7199
7287
  }
7200
-
7201
- .pf-v6-c-breadcrumb__item {
7202
- display: flex;
7203
- align-items: baseline;
7204
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
7205
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
7206
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
7207
- white-space: nowrap;
7208
- list-style: none;
7288
+ @media (min-width: 768px) {
7289
+ .pf-v6-c-brand {
7290
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)));
7291
+ }
7209
7292
  }
7210
-
7293
+ @media (min-width: 992px) {
7294
+ .pf-v6-c-brand {
7295
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))));
7296
+ }
7297
+ }
7298
+ @media (min-width: 1200px) {
7299
+ .pf-v6-c-brand {
7300
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)))));
7301
+ }
7302
+ }
7303
+ @media (min-width: 1450px) {
7304
+ .pf-v6-c-brand {
7305
+ --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-2xl, var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))))));
7306
+ }
7307
+ }
7308
+ @media (min-width: 576px) {
7309
+ .pf-v6-c-brand {
7310
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height));
7311
+ }
7312
+ }
7313
+ @media (min-width: 768px) {
7314
+ .pf-v6-c-brand {
7315
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)));
7316
+ }
7317
+ }
7318
+ @media (min-width: 992px) {
7319
+ .pf-v6-c-brand {
7320
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))));
7321
+ }
7322
+ }
7323
+ @media (min-width: 1200px) {
7324
+ .pf-v6-c-brand {
7325
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)))));
7326
+ }
7327
+ }
7328
+ @media (min-width: 1450px) {
7329
+ .pf-v6-c-brand {
7330
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-2xl, var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))))));
7331
+ }
7332
+ }
7333
+ .pf-v6-c-brand.pf-m-picture {
7334
+ display: inline-flex;
7335
+ max-width: 100%;
7336
+ }
7337
+
7338
+ :where(:root, .pf-v6-c-breadcrumb) {
7339
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
7340
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
7341
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
7342
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
7343
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
7344
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
7345
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
7346
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7347
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
7348
+ --pf-v6-c-breadcrumb__link--TextDecoration: var(--pf-t--global--link--text-decoration);
7349
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
7350
+ --pf-v6-c-breadcrumb__link--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
7351
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
7352
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
7353
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
7354
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
7355
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
7356
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
7357
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
7358
+ }
7359
+
7360
+ .pf-v6-c-breadcrumb {
7361
+ display: inline-flex;
7362
+ }
7363
+
7364
+ .pf-v6-c-breadcrumb__list {
7365
+ display: flex;
7366
+ flex-wrap: wrap;
7367
+ align-items: center;
7368
+ }
7369
+
7370
+ .pf-v6-c-breadcrumb__item {
7371
+ display: flex;
7372
+ align-items: baseline;
7373
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
7374
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
7375
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
7376
+ white-space: nowrap;
7377
+ list-style: none;
7378
+ }
7379
+
7211
7380
  .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
7212
7381
  --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
7213
7382
  }
@@ -7965,6 +8134,60 @@ button.pf-v6-c-breadcrumb__link {
7965
8134
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart);
7966
8135
  }
7967
8136
 
8137
+ :where(:root, .pf-v6-c-code-block) {
8138
+ --pf-v6-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
8139
+ --pf-v6-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
8140
+ --pf-v6-c-code-block__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
8141
+ --pf-v6-c-code-block__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
8142
+ --pf-v6-c-code-block__header--PaddingBlockStart: var(--pf-t--global--spacer--xs);
8143
+ --pf-v6-c-code-block__header--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
8144
+ --pf-v6-c-code-block__header--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
8145
+ --pf-v6-c-code-block__header--PaddingInlineStart: var(--pf-t--global--spacer--sm);
8146
+ --pf-v6-c-code-block__content--PaddingBlockStart: var(--pf-t--global--spacer--md);
8147
+ --pf-v6-c-code-block__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
8148
+ --pf-v6-c-code-block__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
8149
+ --pf-v6-c-code-block__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
8150
+ --pf-v6-c-code-block__pre--FontFamily: var(--pf-t--global--font--family--mono);
8151
+ --pf-v6-c-code-block__pre--FontSize: var(--pf-t--global--font--size--xs);
8152
+ }
8153
+
8154
+ .pf-v6-c-code-block {
8155
+ background-color: var(--pf-v6-c-code-block--BackgroundColor);
8156
+ border-radius: var(--pf-v6-c-code-block--BorderRadius);
8157
+ }
8158
+
8159
+ .pf-v6-c-code-block__header {
8160
+ display: flex;
8161
+ padding-block-start: var(--pf-v6-c-code-block__header--PaddingBlockStart);
8162
+ padding-block-end: var(--pf-v6-c-code-block__header--PaddingBlockEnd);
8163
+ padding-inline-start: var(--pf-v6-c-code-block__header--PaddingInlineStart);
8164
+ padding-inline-end: var(--pf-v6-c-code-block__header--PaddingInlineEnd);
8165
+ border-block-end: var(--pf-v6-c-code-block__header--BorderBlockEndWidth) solid var(--pf-v6-c-code-block__header--BorderBlockEndColor);
8166
+ }
8167
+
8168
+ .pf-v6-c-code-block__actions {
8169
+ display: flex;
8170
+ margin-inline-start: auto;
8171
+ }
8172
+
8173
+ .pf-v6-c-code-block__content {
8174
+ padding-block-start: var(--pf-v6-c-code-block__content--PaddingBlockStart);
8175
+ padding-block-end: var(--pf-v6-c-code-block__content--PaddingBlockEnd);
8176
+ padding-inline-start: var(--pf-v6-c-code-block__content--PaddingInlineStart);
8177
+ padding-inline-end: var(--pf-v6-c-code-block__content--PaddingInlineEnd);
8178
+ }
8179
+
8180
+ .pf-v6-c-code-block__pre {
8181
+ font-family: var(--pf-v6-c-code-block__pre--FontFamily);
8182
+ font-size: var(--pf-v6-c-code-block__pre--FontSize);
8183
+ overflow-wrap: break-word;
8184
+ white-space: pre-wrap;
8185
+ }
8186
+
8187
+ .pf-v6-c-code-block__code {
8188
+ font-family: var(--pf-v6-c-code-block__code--FontFamily, inherit);
8189
+ }
8190
+
7968
8191
  :where(:root, .pf-v6-c-content) {
7969
8192
  --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
7970
8193
  --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -8257,121 +8480,6 @@ ol) {
8257
8480
  grid-column: 2;
8258
8481
  }
8259
8482
  }
8260
- :where(:root, .pf-v6-c-code-block) {
8261
- --pf-v6-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
8262
- --pf-v6-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
8263
- --pf-v6-c-code-block__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
8264
- --pf-v6-c-code-block__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
8265
- --pf-v6-c-code-block__header--PaddingBlockStart: var(--pf-t--global--spacer--xs);
8266
- --pf-v6-c-code-block__header--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
8267
- --pf-v6-c-code-block__header--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
8268
- --pf-v6-c-code-block__header--PaddingInlineStart: var(--pf-t--global--spacer--sm);
8269
- --pf-v6-c-code-block__content--PaddingBlockStart: var(--pf-t--global--spacer--md);
8270
- --pf-v6-c-code-block__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
8271
- --pf-v6-c-code-block__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
8272
- --pf-v6-c-code-block__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
8273
- --pf-v6-c-code-block__pre--FontFamily: var(--pf-t--global--font--family--mono);
8274
- --pf-v6-c-code-block__pre--FontSize: var(--pf-t--global--font--size--xs);
8275
- }
8276
-
8277
- .pf-v6-c-code-block {
8278
- background-color: var(--pf-v6-c-code-block--BackgroundColor);
8279
- border-radius: var(--pf-v6-c-code-block--BorderRadius);
8280
- }
8281
-
8282
- .pf-v6-c-code-block__header {
8283
- display: flex;
8284
- padding-block-start: var(--pf-v6-c-code-block__header--PaddingBlockStart);
8285
- padding-block-end: var(--pf-v6-c-code-block__header--PaddingBlockEnd);
8286
- padding-inline-start: var(--pf-v6-c-code-block__header--PaddingInlineStart);
8287
- padding-inline-end: var(--pf-v6-c-code-block__header--PaddingInlineEnd);
8288
- border-block-end: var(--pf-v6-c-code-block__header--BorderBlockEndWidth) solid var(--pf-v6-c-code-block__header--BorderBlockEndColor);
8289
- }
8290
-
8291
- .pf-v6-c-code-block__actions {
8292
- display: flex;
8293
- margin-inline-start: auto;
8294
- }
8295
-
8296
- .pf-v6-c-code-block__content {
8297
- padding-block-start: var(--pf-v6-c-code-block__content--PaddingBlockStart);
8298
- padding-block-end: var(--pf-v6-c-code-block__content--PaddingBlockEnd);
8299
- padding-inline-start: var(--pf-v6-c-code-block__content--PaddingInlineStart);
8300
- padding-inline-end: var(--pf-v6-c-code-block__content--PaddingInlineEnd);
8301
- }
8302
-
8303
- .pf-v6-c-code-block__pre {
8304
- font-family: var(--pf-v6-c-code-block__pre--FontFamily);
8305
- font-size: var(--pf-v6-c-code-block__pre--FontSize);
8306
- overflow-wrap: break-word;
8307
- white-space: pre-wrap;
8308
- }
8309
-
8310
- .pf-v6-c-code-block__code {
8311
- font-family: var(--pf-v6-c-code-block__code--FontFamily, inherit);
8312
- }
8313
-
8314
- :where(:root, .pf-v6-c-date-picker) {
8315
- --pf-v6-c-date-picker--m-top__calendar--InsetBlockStart: 0;
8316
- --pf-v6-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-t--global--spacer--xs));
8317
- --pf-v6-c-date-picker__helper-text--MarginBlockStart: var(--pf-t--global--spacer--sm);
8318
- --pf-v6-c-date-picker__input--c-form-control--Width: calc(var(--pf-v6-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-v6-c-date-picker__input--c-form-control--width-base));
8319
- --pf-v6-c-date-picker__input--c-form-control--width-base: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
8320
- --pf-v6-c-date-picker__input--c-form-control--width-chars: 11;
8321
- --pf-v6-c-date-picker__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
8322
- --pf-v6-c-date-picker__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
8323
- --pf-v6-c-date-picker__calendar--ZIndex: var(--pf-t--global--z-index--sm);
8324
- --pf-v6-c-date-picker__calendar--InsetBlockStart: calc(100% + var(--pf-t--global--spacer--xs));
8325
- --pf-v6-c-date-picker__calendar--InsetInlineEnd: auto;
8326
- --pf-v6-c-date-picker__calendar--InsetInlineStart: 0;
8327
- --pf-v6-c-date-picker__calendar--m-align-right--InsetInlineEnd: 0;
8328
- --pf-v6-c-date-picker__calendar--m-align-right--InsetInlineStart: auto;
8329
- }
8330
-
8331
- .pf-v6-c-date-picker {
8332
- position: relative;
8333
- display: inline-block;
8334
- }
8335
-
8336
- .pf-v6-c-date-picker__helper-text {
8337
- margin-block-start: var(--pf-v6-c-date-picker__helper-text--MarginBlockStart);
8338
- }
8339
-
8340
- .pf-v6-c-date-picker__input .pf-v6-c-form-control {
8341
- width: var(--pf-v6-c-date-picker__input--c-form-control--Width);
8342
- }
8343
-
8344
- .pf-v6-c-date-picker__calendar {
8345
- position: absolute;
8346
- inset-block-start: var(--pf-v6-c-date-picker__calendar--InsetBlockStart);
8347
- inset-inline-start: var(--pf-v6-c-date-picker__calendar--InsetInlineStart);
8348
- inset-inline-end: var(--pf-v6-c-date-picker__calendar--InsetInlineEnd);
8349
- z-index: var(--pf-v6-c-date-picker__calendar--ZIndex);
8350
- background-color: var(--pf-v6-c-date-picker__calendar--BackgroundColor);
8351
- box-shadow: var(--pf-v6-c-date-picker__calendar--BoxShadow);
8352
- }
8353
-
8354
- .pf-v6-c-date-picker__calendar.pf-m-align-right {
8355
- --pf-v6-c-date-picker__calendar--InsetInlineEnd: var(--pf-v6-c-date-picker__calendar--m-align-right--InsetInlineEnd);
8356
- --pf-v6-c-date-picker__calendar--InsetInlineStart: var(--pf-v6-c-date-picker__calendar--m-align-right--InsetInlineStart);
8357
- }
8358
-
8359
- .pf-v6-c-date-picker.pf-m-top .pf-v6-c-date-picker__calendar {
8360
- --pf-v6-c-date-picker__calendar--InsetBlockStart: var(--pf-v6-c-date-picker--m-top__calendar--InsetBlockStart);
8361
- transform: translateY(var(--pf-v6-c-date-picker--m-top__calendar--TranslateY));
8362
- }
8363
-
8364
- .pf-v6-c-date-picker__calendar.pf-m-static {
8365
- --pf-v6-c-date-picker--m-top__calendar--TranslateY: 0;
8366
- position: static;
8367
- inset-block-start: auto;
8368
- inset-block-end: auto;
8369
- inset-inline-start: auto;
8370
- inset-inline-end: auto;
8371
- z-index: auto;
8372
- min-width: min-content;
8373
- }
8374
-
8375
8483
  @media screen and (min-width: 768px) {
8376
8484
  .pf-v6-c-data-list:not([class*=pf-m-grid]) {
8377
8485
  --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
@@ -9232,6 +9340,67 @@ ol) {
9232
9340
  padding: 0;
9233
9341
  }
9234
9342
 
9343
+ :where(:root, .pf-v6-c-date-picker) {
9344
+ --pf-v6-c-date-picker--m-top__calendar--InsetBlockStart: 0;
9345
+ --pf-v6-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-t--global--spacer--xs));
9346
+ --pf-v6-c-date-picker__helper-text--MarginBlockStart: var(--pf-t--global--spacer--sm);
9347
+ --pf-v6-c-date-picker__input--c-form-control--Width: calc(var(--pf-v6-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-v6-c-date-picker__input--c-form-control--width-base));
9348
+ --pf-v6-c-date-picker__input--c-form-control--width-base: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
9349
+ --pf-v6-c-date-picker__input--c-form-control--width-chars: 11;
9350
+ --pf-v6-c-date-picker__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
9351
+ --pf-v6-c-date-picker__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
9352
+ --pf-v6-c-date-picker__calendar--ZIndex: var(--pf-t--global--z-index--sm);
9353
+ --pf-v6-c-date-picker__calendar--InsetBlockStart: calc(100% + var(--pf-t--global--spacer--xs));
9354
+ --pf-v6-c-date-picker__calendar--InsetInlineEnd: auto;
9355
+ --pf-v6-c-date-picker__calendar--InsetInlineStart: 0;
9356
+ --pf-v6-c-date-picker__calendar--m-align-right--InsetInlineEnd: 0;
9357
+ --pf-v6-c-date-picker__calendar--m-align-right--InsetInlineStart: auto;
9358
+ }
9359
+
9360
+ .pf-v6-c-date-picker {
9361
+ position: relative;
9362
+ display: inline-block;
9363
+ }
9364
+
9365
+ .pf-v6-c-date-picker__helper-text {
9366
+ margin-block-start: var(--pf-v6-c-date-picker__helper-text--MarginBlockStart);
9367
+ }
9368
+
9369
+ .pf-v6-c-date-picker__input .pf-v6-c-form-control {
9370
+ width: var(--pf-v6-c-date-picker__input--c-form-control--Width);
9371
+ }
9372
+
9373
+ .pf-v6-c-date-picker__calendar {
9374
+ position: absolute;
9375
+ inset-block-start: var(--pf-v6-c-date-picker__calendar--InsetBlockStart);
9376
+ inset-inline-start: var(--pf-v6-c-date-picker__calendar--InsetInlineStart);
9377
+ inset-inline-end: var(--pf-v6-c-date-picker__calendar--InsetInlineEnd);
9378
+ z-index: var(--pf-v6-c-date-picker__calendar--ZIndex);
9379
+ background-color: var(--pf-v6-c-date-picker__calendar--BackgroundColor);
9380
+ box-shadow: var(--pf-v6-c-date-picker__calendar--BoxShadow);
9381
+ }
9382
+
9383
+ .pf-v6-c-date-picker__calendar.pf-m-align-right {
9384
+ --pf-v6-c-date-picker__calendar--InsetInlineEnd: var(--pf-v6-c-date-picker__calendar--m-align-right--InsetInlineEnd);
9385
+ --pf-v6-c-date-picker__calendar--InsetInlineStart: var(--pf-v6-c-date-picker__calendar--m-align-right--InsetInlineStart);
9386
+ }
9387
+
9388
+ .pf-v6-c-date-picker.pf-m-top .pf-v6-c-date-picker__calendar {
9389
+ --pf-v6-c-date-picker__calendar--InsetBlockStart: var(--pf-v6-c-date-picker--m-top__calendar--InsetBlockStart);
9390
+ transform: translateY(var(--pf-v6-c-date-picker--m-top__calendar--TranslateY));
9391
+ }
9392
+
9393
+ .pf-v6-c-date-picker__calendar.pf-m-static {
9394
+ --pf-v6-c-date-picker--m-top__calendar--TranslateY: 0;
9395
+ position: static;
9396
+ inset-block-start: auto;
9397
+ inset-block-end: auto;
9398
+ inset-inline-start: auto;
9399
+ inset-inline-end: auto;
9400
+ z-index: auto;
9401
+ min-width: min-content;
9402
+ }
9403
+
9235
9404
  :where(:root, .pf-v6-c-description-list) {
9236
9405
  --pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--lg);
9237
9406
  --pf-v6-c-description-list--ColumnGap: var(--pf-t--global--spacer--lg);
@@ -10937,6 +11106,66 @@ ol) {
10937
11106
  --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
10938
11107
  }
10939
11108
 
11109
+ :where(:root, .pf-v6-c-file-upload) {
11110
+ --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--sm);
11111
+ --pf-v6-c-file-upload--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11112
+ --pf-v6-c-file-upload--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11113
+ --pf-v6-c-file-upload--PaddingInlineStart: var(--pf-t--global--spacer--sm);
11114
+ --pf-v6-c-file-upload--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
11115
+ --pf-v6-c-file-upload--BorderRadius: var(--pf-t--global--border--radius--small);
11116
+ --pf-v6-c-file-upload--BorderWidth: var(--pf-t--global--border--width--regular);
11117
+ --pf-v6-c-file-upload--BorderColor: transparent;
11118
+ --pf-v6-c-file-upload--BorderStyle: solid;
11119
+ --pf-v6-c-file-upload--m-drag-hover--BorderColor: var(--pf-t--global--icon--color--brand--default);
11120
+ --pf-v6-c-file-upload--m-drag-hover--BorderStyle: dashed;
11121
+ --pf-v6-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
11122
+ --pf-v6-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-t--global--spacer--3xl) * 2);
11123
+ }
11124
+
11125
+ .pf-v6-c-file-upload {
11126
+ position: relative;
11127
+ display: flex;
11128
+ flex-direction: column;
11129
+ row-gap: var(--pf-v6-c-file-upload--RowGap);
11130
+ padding-block-start: var(--pf-v6-c-file-upload--PaddingBlockStart);
11131
+ padding-block-end: var(--pf-v6-c-file-upload--PaddingBlockEnd);
11132
+ padding-inline-start: var(--pf-v6-c-file-upload--PaddingInlineStart);
11133
+ padding-inline-end: var(--pf-v6-c-file-upload--PaddingInlineEnd);
11134
+ border: var(--pf-v6-c-file-upload--BorderWidth) var(--pf-v6-c-file-upload--BorderStyle) var(--pf-v6-c-file-upload--BorderColor);
11135
+ border-radius: var(--pf-v6-c-file-upload--BorderRadius);
11136
+ }
11137
+
11138
+ .pf-v6-c-file-upload.pf-m-drag-hover {
11139
+ --pf-v6-c-file-upload--BorderColor: var(--pf-v6-c-file-upload--m-drag-hover--BorderColor);
11140
+ --pf-v6-c-file-upload--BorderStyle: var(--pf-v6-c-file-upload--m-drag-hover--BorderStyle);
11141
+ }
11142
+
11143
+ .pf-v6-c-file-upload.pf-m-loading .pf-v6-c-file-upload__file-details {
11144
+ position: relative;
11145
+ }
11146
+
11147
+ .pf-v6-c-file-upload__file-select .pf-v6-c-button.pf-m-control {
11148
+ outline-offset: var(--pf-v6-c-file-upload__file-select__c-button--m-control--OutlineOffset);
11149
+ }
11150
+
11151
+ .pf-v6-c-file-upload__file-details {
11152
+ position: relative;
11153
+ display: flex;
11154
+ }
11155
+
11156
+ .pf-v6-c-file-upload__file-details .pf-v6-c-form-control {
11157
+ flex: 1 1 auto;
11158
+ min-height: var(--pf-v6-c-file-upload__file-details__c-form-control--MinHeight);
11159
+ border-block-start: 0;
11160
+ }
11161
+
11162
+ .pf-v6-c-file-upload__file-details-spinner {
11163
+ position: absolute;
11164
+ inset-block-start: 50%;
11165
+ inset-inline-start: 50%;
11166
+ transform: translate(-50%, -50%);
11167
+ }
11168
+
10940
11169
  :where(:root, .pf-v6-c-expandable-section) {
10941
11170
  --pf-v6-c-expandable-section__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
10942
11171
  --pf-v6-c-expandable-section__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -11085,64 +11314,82 @@ ol) {
11085
11314
  padding-inline-end: var(--pf-v6-c-expandable-section__content--PaddingInlineEnd);
11086
11315
  }
11087
11316
 
11088
- :where(:root, .pf-v6-c-file-upload) {
11089
- --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--sm);
11090
- --pf-v6-c-file-upload--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11091
- --pf-v6-c-file-upload--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11092
- --pf-v6-c-file-upload--PaddingInlineStart: var(--pf-t--global--spacer--sm);
11093
- --pf-v6-c-file-upload--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
11094
- --pf-v6-c-file-upload--BorderRadius: var(--pf-t--global--border--radius--small);
11095
- --pf-v6-c-file-upload--BorderWidth: var(--pf-t--global--border--width--regular);
11096
- --pf-v6-c-file-upload--BorderColor: transparent;
11097
- --pf-v6-c-file-upload--BorderStyle: solid;
11098
- --pf-v6-c-file-upload--m-drag-hover--BorderColor: var(--pf-t--global--icon--color--brand--default);
11099
- --pf-v6-c-file-upload--m-drag-hover--BorderStyle: dashed;
11100
- --pf-v6-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
11101
- --pf-v6-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-t--global--spacer--3xl) * 2);
11317
+ :where(:root, .pf-v6-c-helper-text) {
11318
+ --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
11319
+ --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
11320
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-t--global--icon--color--regular);
11321
+ --pf-v6-c-helper-text__item-text--Color: var(--pf-t--global--text--color--regular);
11322
+ --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-t--global--font--weight--body);
11323
+ --pf-v6-c-helper-text__item-icon--m-indeterminate--Color: var(--pf-t--global--icon--color--subtle);
11324
+ --pf-v6-c-helper-text__item-text--m-indeterminate--Color: var(--pf-t--global--text--color--subtle);
11325
+ --pf-v6-c-helper-text__item-icon--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
11326
+ --pf-v6-c-helper-text__item-text--m-warning--FontWeight: var(--pf-t--global--font--weight--body--bold);
11327
+ --pf-v6-c-helper-text__item-icon--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
11328
+ --pf-v6-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
11329
+ --pf-v6-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
11330
+ --pf-v6-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
11331
+ --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
11332
+ --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
11333
+ --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
11334
+ --pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
11335
+ --pf-v6-c-helper-text--m-dynamic--m-warning__item-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
11336
+ --pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color: var(--pf-t--global--icon--color--status--success--default);
11337
+ --pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
11338
+ --pf-v6-c-helper-text__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--xs);
11102
11339
  }
11103
11340
 
11104
- .pf-v6-c-file-upload {
11105
- position: relative;
11341
+ .pf-v6-c-helper-text {
11342
+ display: grid;
11343
+ gap: var(--pf-v6-c-helper-text--Gap);
11344
+ font-size: var(--pf-v6-c-helper-text--FontSize);
11345
+ }
11346
+
11347
+ .pf-v6-c-helper-text.pf-m-hidden {
11348
+ visibility: hidden;
11349
+ opacity: 0;
11350
+ }
11351
+
11352
+ .pf-v6-c-helper-text__item {
11106
11353
  display: flex;
11107
- flex-direction: column;
11108
- row-gap: var(--pf-v6-c-file-upload--RowGap);
11109
- padding-block-start: var(--pf-v6-c-file-upload--PaddingBlockStart);
11110
- padding-block-end: var(--pf-v6-c-file-upload--PaddingBlockEnd);
11111
- padding-inline-start: var(--pf-v6-c-file-upload--PaddingInlineStart);
11112
- padding-inline-end: var(--pf-v6-c-file-upload--PaddingInlineEnd);
11113
- border: var(--pf-v6-c-file-upload--BorderWidth) var(--pf-v6-c-file-upload--BorderStyle) var(--pf-v6-c-file-upload--BorderColor);
11114
- border-radius: var(--pf-v6-c-file-upload--BorderRadius);
11354
+ font-weight: var(--pf-v6-c-helper-text__item-text--FontWeight);
11115
11355
  }
11116
11356
 
11117
- .pf-v6-c-file-upload.pf-m-drag-hover {
11118
- --pf-v6-c-file-upload--BorderColor: var(--pf-v6-c-file-upload--m-drag-hover--BorderColor);
11119
- --pf-v6-c-file-upload--BorderStyle: var(--pf-v6-c-file-upload--m-drag-hover--BorderStyle);
11357
+ .pf-v6-c-helper-text__item.pf-m-indeterminate {
11358
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-indeterminate--Color);
11359
+ --pf-v6-c-helper-text__item-text--Color: var(--pf-v6-c-helper-text__item-text--m-indeterminate--Color);
11360
+ --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color);
11361
+ --pf-v6-c-helper-text--m-dynamic__item-text--Color: var(--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color);
11120
11362
  }
11121
11363
 
11122
- .pf-v6-c-file-upload.pf-m-loading .pf-v6-c-file-upload__file-details {
11123
- position: relative;
11364
+ .pf-v6-c-helper-text__item.pf-m-warning {
11365
+ --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-warning--FontWeight);
11366
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-warning--Color);
11367
+ --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color);
11124
11368
  }
11125
11369
 
11126
- .pf-v6-c-file-upload__file-select .pf-v6-c-button.pf-m-control {
11127
- outline-offset: var(--pf-v6-c-file-upload__file-select__c-button--m-control--OutlineOffset);
11370
+ .pf-v6-c-helper-text__item.pf-m-success {
11371
+ --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-success--FontWeight);
11372
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-success--Color);
11373
+ --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color);
11128
11374
  }
11129
11375
 
11130
- .pf-v6-c-file-upload__file-details {
11131
- position: relative;
11132
- display: flex;
11376
+ .pf-v6-c-helper-text__item.pf-m-error {
11377
+ --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
11378
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
11379
+ --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
11133
11380
  }
11134
11381
 
11135
- .pf-v6-c-file-upload__file-details .pf-v6-c-form-control {
11136
- flex: 1 1 auto;
11137
- min-height: var(--pf-v6-c-file-upload__file-details__c-form-control--MinHeight);
11138
- border-block-start: 0;
11382
+ .pf-v6-c-helper-text__item.pf-m-dynamic {
11383
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic__item-icon--Color);
11139
11384
  }
11140
11385
 
11141
- .pf-v6-c-file-upload__file-details-spinner {
11142
- position: absolute;
11143
- inset-block-start: 50%;
11144
- inset-inline-start: 50%;
11145
- transform: translate(-50%, -50%);
11386
+ .pf-v6-c-helper-text__item-icon {
11387
+ margin-inline-end: var(--pf-v6-c-helper-text__item-icon--MarginInlineEnd);
11388
+ color: var(--pf-v6-c-helper-text__item-icon--Color);
11389
+ }
11390
+
11391
+ .pf-v6-c-helper-text__item-text {
11392
+ color: var(--pf-v6-c-helper-text__item-text--Color);
11146
11393
  }
11147
11394
 
11148
11395
  :where(:root, .pf-v6-c-hint) {
@@ -11230,84 +11477,6 @@ ol) {
11230
11477
  margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
11231
11478
  }
11232
11479
 
11233
- :where(:root, .pf-v6-c-helper-text) {
11234
- --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
11235
- --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
11236
- --pf-v6-c-helper-text__item-icon--Color: var(--pf-t--global--icon--color--regular);
11237
- --pf-v6-c-helper-text__item-text--Color: var(--pf-t--global--text--color--regular);
11238
- --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-t--global--font--weight--body);
11239
- --pf-v6-c-helper-text__item-icon--m-indeterminate--Color: var(--pf-t--global--icon--color--subtle);
11240
- --pf-v6-c-helper-text__item-text--m-indeterminate--Color: var(--pf-t--global--text--color--subtle);
11241
- --pf-v6-c-helper-text__item-icon--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
11242
- --pf-v6-c-helper-text__item-text--m-warning--FontWeight: var(--pf-t--global--font--weight--body--bold);
11243
- --pf-v6-c-helper-text__item-icon--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
11244
- --pf-v6-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
11245
- --pf-v6-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
11246
- --pf-v6-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
11247
- --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
11248
- --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
11249
- --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
11250
- --pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
11251
- --pf-v6-c-helper-text--m-dynamic--m-warning__item-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
11252
- --pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color: var(--pf-t--global--icon--color--status--success--default);
11253
- --pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
11254
- --pf-v6-c-helper-text__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--xs);
11255
- }
11256
-
11257
- .pf-v6-c-helper-text {
11258
- display: grid;
11259
- gap: var(--pf-v6-c-helper-text--Gap);
11260
- font-size: var(--pf-v6-c-helper-text--FontSize);
11261
- }
11262
-
11263
- .pf-v6-c-helper-text.pf-m-hidden {
11264
- visibility: hidden;
11265
- opacity: 0;
11266
- }
11267
-
11268
- .pf-v6-c-helper-text__item {
11269
- display: flex;
11270
- font-weight: var(--pf-v6-c-helper-text__item-text--FontWeight);
11271
- }
11272
-
11273
- .pf-v6-c-helper-text__item.pf-m-indeterminate {
11274
- --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-indeterminate--Color);
11275
- --pf-v6-c-helper-text__item-text--Color: var(--pf-v6-c-helper-text__item-text--m-indeterminate--Color);
11276
- --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color);
11277
- --pf-v6-c-helper-text--m-dynamic__item-text--Color: var(--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color);
11278
- }
11279
-
11280
- .pf-v6-c-helper-text__item.pf-m-warning {
11281
- --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-warning--FontWeight);
11282
- --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-warning--Color);
11283
- --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color);
11284
- }
11285
-
11286
- .pf-v6-c-helper-text__item.pf-m-success {
11287
- --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-success--FontWeight);
11288
- --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-success--Color);
11289
- --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color);
11290
- }
11291
-
11292
- .pf-v6-c-helper-text__item.pf-m-error {
11293
- --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
11294
- --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
11295
- --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
11296
- }
11297
-
11298
- .pf-v6-c-helper-text__item.pf-m-dynamic {
11299
- --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic__item-icon--Color);
11300
- }
11301
-
11302
- .pf-v6-c-helper-text__item-icon {
11303
- margin-inline-end: var(--pf-v6-c-helper-text__item-icon--MarginInlineEnd);
11304
- color: var(--pf-v6-c-helper-text__item-icon--Color);
11305
- }
11306
-
11307
- .pf-v6-c-helper-text__item-text {
11308
- color: var(--pf-v6-c-helper-text__item-text--Color);
11309
- }
11310
-
11311
11480
  :where(:root, .pf-v6-c-icon) {
11312
11481
  --pf-v6-c-icon--Width: 1em;
11313
11482
  --pf-v6-c-icon--Height: 1em;
@@ -11681,6 +11850,150 @@ label.pf-v6-c-input-group__text {
11681
11850
  cursor: pointer;
11682
11851
  }
11683
11852
 
11853
+ :where(:root, .pf-v6-c-label-group) {
11854
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
11855
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
11856
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
11857
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
11858
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
11859
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
11860
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
11861
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
11862
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
11863
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
11864
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
11865
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
11866
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
11867
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
11868
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
11869
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
11870
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
11871
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
11872
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
11873
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
11874
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
11875
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
11876
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
11877
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
11878
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
11879
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
11880
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
11881
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
11882
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
11883
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
11884
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
11885
+ }
11886
+
11887
+ .pf-v6-c-label-group {
11888
+ display: inline-flex;
11889
+ row-gap: var(--pf-v6-c-label-group--RowGap);
11890
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
11891
+ align-items: center;
11892
+ }
11893
+
11894
+ .pf-v6-c-label-group.pf-m-category {
11895
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
11896
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
11897
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
11898
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
11899
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
11900
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
11901
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
11902
+ }
11903
+
11904
+ .pf-v6-c-label-group.pf-m-vertical {
11905
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
11906
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
11907
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
11908
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
11909
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
11910
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
11911
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
11912
+ }
11913
+
11914
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
11915
+ align-items: flex-start;
11916
+ }
11917
+
11918
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
11919
+ flex-direction: column;
11920
+ align-items: flex-start;
11921
+ }
11922
+
11923
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
11924
+ flex-direction: column;
11925
+ }
11926
+
11927
+ .pf-v6-c-label-group.pf-m-editable,
11928
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
11929
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
11930
+ display: flex;
11931
+ }
11932
+
11933
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
11934
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
11935
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
11936
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
11937
+ flex: 1;
11938
+ }
11939
+
11940
+ .pf-v6-c-label-group__main {
11941
+ display: flex;
11942
+ flex: 1;
11943
+ flex-wrap: wrap;
11944
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
11945
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
11946
+ align-items: baseline;
11947
+ }
11948
+
11949
+ .pf-v6-c-label-group__list {
11950
+ display: inline-flex;
11951
+ flex-wrap: wrap;
11952
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
11953
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
11954
+ }
11955
+
11956
+ .pf-v6-c-label-group__list-item {
11957
+ display: inline-flex;
11958
+ }
11959
+
11960
+ .pf-v6-c-label-group__label {
11961
+ overflow: hidden;
11962
+ text-overflow: ellipsis;
11963
+ white-space: nowrap;
11964
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
11965
+ }
11966
+
11967
+ .pf-v6-c-label-group__close {
11968
+ display: flex;
11969
+ align-self: flex-start;
11970
+ }
11971
+
11972
+ .pf-v6-c-label-group__close .pf-v6-c-button {
11973
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
11974
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
11975
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
11976
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
11977
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
11978
+ }
11979
+
11980
+ .pf-v6-c-label-group__textarea {
11981
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
11982
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
11983
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
11984
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
11985
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
11986
+ white-space: nowrap;
11987
+ resize: none;
11988
+ border: 0;
11989
+ -ms-overflow-style: none;
11990
+ scrollbar-width: none;
11991
+ }
11992
+
11993
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
11994
+ display: none;
11995
+ }
11996
+
11684
11997
  :where(:root, .pf-v6-c-label) {
11685
11998
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
11686
11999
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -12206,150 +12519,6 @@ input.pf-v6-c-label__content {
12206
12519
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
12207
12520
  }
12208
12521
 
12209
- :where(:root, .pf-v6-c-label-group) {
12210
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
12211
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
12212
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
12213
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
12214
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
12215
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
12216
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
12217
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
12218
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
12219
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
12220
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
12221
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
12222
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
12223
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12224
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
12225
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12226
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
12227
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
12228
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
12229
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12230
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
12231
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
12232
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
12233
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12234
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
12235
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12236
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
12237
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
12238
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
12239
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
12240
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
12241
- }
12242
-
12243
- .pf-v6-c-label-group {
12244
- display: inline-flex;
12245
- row-gap: var(--pf-v6-c-label-group--RowGap);
12246
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
12247
- align-items: center;
12248
- }
12249
-
12250
- .pf-v6-c-label-group.pf-m-category {
12251
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
12252
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
12253
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
12254
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
12255
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
12256
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
12257
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
12258
- }
12259
-
12260
- .pf-v6-c-label-group.pf-m-vertical {
12261
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
12262
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
12263
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
12264
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
12265
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
12266
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
12267
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
12268
- }
12269
-
12270
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
12271
- align-items: flex-start;
12272
- }
12273
-
12274
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
12275
- flex-direction: column;
12276
- align-items: flex-start;
12277
- }
12278
-
12279
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
12280
- flex-direction: column;
12281
- }
12282
-
12283
- .pf-v6-c-label-group.pf-m-editable,
12284
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
12285
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
12286
- display: flex;
12287
- }
12288
-
12289
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
12290
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
12291
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
12292
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
12293
- flex: 1;
12294
- }
12295
-
12296
- .pf-v6-c-label-group__main {
12297
- display: flex;
12298
- flex: 1;
12299
- flex-wrap: wrap;
12300
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
12301
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
12302
- align-items: baseline;
12303
- }
12304
-
12305
- .pf-v6-c-label-group__list {
12306
- display: inline-flex;
12307
- flex-wrap: wrap;
12308
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
12309
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
12310
- }
12311
-
12312
- .pf-v6-c-label-group__list-item {
12313
- display: inline-flex;
12314
- }
12315
-
12316
- .pf-v6-c-label-group__label {
12317
- overflow: hidden;
12318
- text-overflow: ellipsis;
12319
- white-space: nowrap;
12320
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
12321
- }
12322
-
12323
- .pf-v6-c-label-group__close {
12324
- display: flex;
12325
- align-self: flex-start;
12326
- }
12327
-
12328
- .pf-v6-c-label-group__close .pf-v6-c-button {
12329
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
12330
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
12331
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
12332
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
12333
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
12334
- }
12335
-
12336
- .pf-v6-c-label-group__textarea {
12337
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
12338
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
12339
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
12340
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
12341
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
12342
- white-space: nowrap;
12343
- resize: none;
12344
- border: 0;
12345
- -ms-overflow-style: none;
12346
- scrollbar-width: none;
12347
- }
12348
-
12349
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
12350
- display: none;
12351
- }
12352
-
12353
12522
  :where(:root, .pf-v6-c-jump-links) {
12354
12523
  --pf-v6-c-jump-links__list--Display: flex;
12355
12524
  --pf-v6-c-jump-links__list--PaddingBlockStart: 0;
@@ -12983,95 +13152,6 @@ input.pf-v6-c-label__content {
12983
13152
  --pf-v6-c-sidebar__panel--FlexBasis: 100%;
12984
13153
  }
12985
13154
  }
12986
- :where(:root, .pf-v6-c-list) {
12987
- --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12988
- --pf-v6-c-list--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
12989
- --pf-v6-c-list--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
12990
- --pf-v6-c-list--ul--ListStyle: var(--pf-t--global--list-style);
12991
- --pf-v6-c-list--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
12992
- --pf-v6-c-list--m-inline--li--MarginInlineEnd: var(--pf-t--global--spacer--lg);
12993
- --pf-v6-c-list--m-bordered--li--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12994
- --pf-v6-c-list--m-bordered--li--BorderBlockEndColor: var(--pf-t--global--border--color--default);
12995
- --pf-v6-c-list--m-bordered--li--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
12996
- --pf-v6-c-list__item-icon--MinWidth: var(--pf-t--global--icon--size--sm);
12997
- --pf-v6-c-list__item-icon--MarginBlockStart: var(--pf-t--global--spacer--xs);
12998
- --pf-v6-c-list__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
12999
- --pf-v6-c-list__item-icon--Color: var(--pf-t--global--icon--color--regular);
13000
- --pf-v6-c-list__item-icon--FontSize: var(--pf-t--global--icon--size--sm);
13001
- --pf-v6-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-t--global--icon--size--lg);
13002
- --pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
13003
- --pf-v6-c-list--m-icon-lg__item-icon--FontSize: var(--pf-t--global--icon--size--lg);
13004
- }
13005
-
13006
- .pf-v6-c-list {
13007
- padding-inline-start: var(--pf-v6-c-list--PaddingInlineStart);
13008
- }
13009
-
13010
- .pf-v6-c-list ol,
13011
- .pf-v6-c-list ul {
13012
- margin-block-start: var(--pf-v6-c-list--nested--MarginBlockStart);
13013
- margin-inline-start: var(--pf-v6-c-list--nested--MarginInlineStart);
13014
- }
13015
-
13016
- .pf-v6-c-list li + li {
13017
- margin-block-start: var(--pf-v6-c-list--li--MarginBlockStart);
13018
- }
13019
-
13020
- ul.pf-v6-c-list {
13021
- list-style: var(--pf-v6-c-list--ul--ListStyle);
13022
- }
13023
-
13024
- .pf-v6-c-list .pf-v6-c-list__item {
13025
- display: flex;
13026
- }
13027
-
13028
- .pf-v6-c-list .pf-v6-c-list__item-icon {
13029
- flex-shrink: 0;
13030
- min-width: var(--pf-v6-c-list__item-icon--MinWidth);
13031
- margin-block-start: var(--pf-v6-c-list__item-icon--MarginBlockStart);
13032
- margin-inline-end: var(--pf-v6-c-list__item-icon--MarginInlineEnd);
13033
- font-size: var(--pf-v6-c-list__item-icon--FontSize);
13034
- line-height: 1;
13035
- color: var(--pf-v6-c-list__item-icon--Color);
13036
- }
13037
-
13038
- .pf-v6-c-list.pf-m-icon-lg {
13039
- --pf-v6-c-list__item-icon--MinWidth: var(--pf-v6-c-list--m-icon-lg__item-icon--MinWidth);
13040
- --pf-v6-c-list__item-icon--MarginBlockStart: 0;
13041
- --pf-v6-c-list__item-icon--MarginInlineEnd: var(--pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd);
13042
- --pf-v6-c-list__item-icon--FontSize: var(--pf-v6-c-list--m-icon-lg__item-icon--FontSize);
13043
- }
13044
-
13045
- .pf-v6-c-list.pf-m-plain {
13046
- --pf-v6-c-list--PaddingInlineStart: 0;
13047
- list-style: none;
13048
- }
13049
-
13050
- .pf-v6-c-list.pf-m-inline {
13051
- --pf-v6-c-list--PaddingInlineStart: 0;
13052
- display: flex;
13053
- flex-wrap: wrap;
13054
- list-style: none;
13055
- }
13056
-
13057
- .pf-v6-c-list.pf-m-inline li {
13058
- --pf-v6-c-list--li--MarginBlockStart: 0;
13059
- }
13060
-
13061
- .pf-v6-c-list.pf-m-inline li:not(:last-child) {
13062
- margin-inline-end: var(--pf-v6-c-list--m-inline--li--MarginInlineEnd);
13063
- }
13064
-
13065
- .pf-v6-c-list.pf-m-bordered > * {
13066
- padding-block-end: var(--pf-v6-c-list--m-bordered--li--PaddingBlockEnd);
13067
- border-block-end: var(--pf-v6-c-list--m-bordered--li--BorderBlockEndWidth) solid var(--pf-v6-c-list--m-bordered--li--BorderBlockEndColor);
13068
- }
13069
-
13070
- .pf-v6-c-list.pf-m-bordered > :last-child {
13071
- --pf-v6-c-list--m-bordered--li--PaddingBlockEnd: 0;
13072
- --pf-v6-c-list--m-bordered--li--BorderBlockEndWidth: 0;
13073
- }
13074
-
13075
13155
  :where(:root, .pf-v6-c-login) {
13076
13156
  --pf-v6-c-login--PaddingBlockStart: var(--pf-t--global--spacer--lg);
13077
13157
  --pf-v6-c-login--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -13332,1120 +13412,1209 @@ ul.pf-v6-c-list {
13332
13412
  padding-block-start: var(--pf-v6-c-login__footer--c-list--PaddingBlockStart);
13333
13413
  }
13334
13414
 
13335
- :where(:root, .pf-v6-c-menu) {
13336
- --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
13337
- --pf-v6-c-menu--Width: auto;
13338
- --pf-v6-c-menu--MinWidth: auto;
13339
- --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--sm);
13340
- --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
13341
- --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
13342
- --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
13343
- --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
13344
- --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
13345
- --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
13346
- --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
13347
- --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
13348
- --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
13349
- --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
13350
- --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
13351
- --pf-v6-c-menu--m-plain--BoxShadow: none;
13352
- --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
13353
- --pf-v6-c-menu__content--Height: auto;
13354
- --pf-v6-c-menu__content--MaxHeight: none;
13355
- --pf-v6-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
13356
- --pf-v6-c-menu__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
13357
- --pf-v6-c-menu__search--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
13358
- --pf-v6-c-menu__search--PaddingInlineStart: var(--pf-t--global--spacer--md);
13359
- --pf-v6-c-menu__search--PaddingInlineEnd: var(--pf-t--global--spacer--md);
13360
- --pf-v6-c-menu__footer--BoxShadow: none;
13361
- --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
13362
- --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
13363
- --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
13364
- --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
13365
- --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
13366
- --pf-v6-c-menu__list-item--TransitionProperty: background-color;
13367
- --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
13368
- --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
13369
- --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
13370
- --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13371
- --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--sm);
13372
- --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--sm);
13373
- --pf-v6-c-menu__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
13374
- --pf-v6-c-menu__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
13375
- --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--lg);
13376
- --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13377
- --pf-v6-c-menu__item--FontSize: var(--pf-t--global--font--size--body--default);
13378
- --pf-v6-c-menu__item--LineHeight: var(--pf-t--global--font--line-height--body);
13379
- --pf-v6-c-menu__item--FontWeight: var(--pf-t--global--font--weight--body);
13380
- --pf-v6-c-menu__item--Color: var(--pf-t--global--text--color--regular);
13381
- --pf-v6-c-menu__item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
13382
- --pf-v6-c-menu__item--m-disabled--Color: var(--pf-t--global--text--color--disabled);
13383
- --pf-v6-c-menu__header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
13384
- --pf-v6-c-menu__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
13385
- --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
13386
- --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13387
- --pf-v6-c-menu__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
13388
- --pf-v6-c-menu__group-title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
13389
- --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--lg);
13390
- --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13391
- --pf-v6-c-menu__breadcrumb--PaddingBlockStart: 0;
13392
- --pf-v6-c-menu__breadcrumb--PaddingBlockEnd: 0;
13393
- --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--lg);
13394
- --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13395
- --pf-v6-c-menu__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
13396
- --pf-v6-c-menu__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
13397
- --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
13398
- --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13399
- --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--sm);
13400
- --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--subtle);
13401
- --pf-v6-c-menu__item-description--FontSize: var(--pf-t--global--font--size--body--sm);
13402
- --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
13403
- --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
13404
- --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
13405
- --pf-v6-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
13406
- --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
13407
- --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
13408
- --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
13409
- --pf-v6-c-menu__item--m-selected__item-select-icon--Color: var(--pf-t--global--icon--color--brand--default);
13410
- --pf-v6-c-menu__item-external--Color: var(--pf-t--global--icon--color--brand--default);
13411
- --pf-v6-c-menu--m-flyout__menu--top-offset: 0px;
13412
- --pf-v6-c-menu--m-flyout__menu--left-offset: 0px;
13413
- --pf-v6-c-menu--m-flyout__menu--m-left--right-offset: 0px;
13414
- --pf-v6-c-menu--m-flyout__Zindex: var(--pf-t--global--z-index--sm);
13415
- --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1 + var(--pf-v6-c-menu--m-flyout__menu--top-offset));
13416
- --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: auto;
13417
- --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: auto;
13418
- --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--left-offset));
13419
- --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1);
13420
- --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
13421
- --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--transition--duration);
13422
- --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--transition--duration);
13423
- --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
13424
- --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
13425
- --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--transition--duration);
13426
- --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
13427
- --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--transition--duration);
13428
- --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
13429
- --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
13415
+ :where(:root, .pf-v6-c-list) {
13416
+ --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
13417
+ --pf-v6-c-list--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
13418
+ --pf-v6-c-list--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
13419
+ --pf-v6-c-list--ul--ListStyle: var(--pf-t--global--list-style);
13420
+ --pf-v6-c-list--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
13421
+ --pf-v6-c-list--m-inline--li--MarginInlineEnd: var(--pf-t--global--spacer--lg);
13422
+ --pf-v6-c-list--m-bordered--li--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
13423
+ --pf-v6-c-list--m-bordered--li--BorderBlockEndColor: var(--pf-t--global--border--color--default);
13424
+ --pf-v6-c-list--m-bordered--li--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
13425
+ --pf-v6-c-list__item-icon--MinWidth: var(--pf-t--global--icon--size--sm);
13426
+ --pf-v6-c-list__item-icon--MarginBlockStart: var(--pf-t--global--spacer--xs);
13427
+ --pf-v6-c-list__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
13428
+ --pf-v6-c-list__item-icon--Color: var(--pf-t--global--icon--color--regular);
13429
+ --pf-v6-c-list__item-icon--FontSize: var(--pf-t--global--icon--size--sm);
13430
+ --pf-v6-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-t--global--icon--size--lg);
13431
+ --pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
13432
+ --pf-v6-c-list--m-icon-lg__item-icon--FontSize: var(--pf-t--global--icon--size--lg);
13430
13433
  }
13431
13434
 
13432
- .pf-v6-c-menu__content,
13433
- .pf-v6-c-menu__list-item,
13434
- .pf-v6-c-menu__item-main,
13435
- .pf-v6-c-menu__breadcrumb,
13436
- .pf-v6-c-menu__item-check,
13437
- .pf-v6-c-menu__item-action,
13438
- .pf-v6-c-menu__item-action-icon {
13435
+ .pf-v6-c-list {
13436
+ padding-inline-start: var(--pf-v6-c-list--PaddingInlineStart);
13437
+ }
13438
+
13439
+ .pf-v6-c-list ol,
13440
+ .pf-v6-c-list ul {
13441
+ margin-block-start: var(--pf-v6-c-list--nested--MarginBlockStart);
13442
+ margin-inline-start: var(--pf-v6-c-list--nested--MarginInlineStart);
13443
+ }
13444
+
13445
+ .pf-v6-c-list li + li {
13446
+ margin-block-start: var(--pf-v6-c-list--li--MarginBlockStart);
13447
+ }
13448
+
13449
+ ul.pf-v6-c-list {
13450
+ list-style: var(--pf-v6-c-list--ul--ListStyle);
13451
+ }
13452
+
13453
+ .pf-v6-c-list .pf-v6-c-list__item {
13439
13454
  display: flex;
13440
13455
  }
13441
13456
 
13442
- .pf-v6-c-menu__list,
13443
- .pf-v6-c-menu__group {
13444
- --pf-v6-hidden-visible--visible--Display: grid;
13445
- --pf-v6-hidden-visible--hidden--Display: none;
13446
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
13447
- display: var(--pf-v6-hidden-visible--Display);
13457
+ .pf-v6-c-list .pf-v6-c-list__item-icon {
13458
+ flex-shrink: 0;
13459
+ min-width: var(--pf-v6-c-list__item-icon--MinWidth);
13460
+ margin-block-start: var(--pf-v6-c-list__item-icon--MarginBlockStart);
13461
+ margin-inline-end: var(--pf-v6-c-list__item-icon--MarginInlineEnd);
13462
+ font-size: var(--pf-v6-c-list__item-icon--FontSize);
13463
+ line-height: 1;
13464
+ color: var(--pf-v6-c-list__item-icon--Color);
13448
13465
  }
13449
13466
 
13450
- .pf-v6-c-menu__list.pf-m-hidden,
13451
- .pf-v6-c-menu__group.pf-m-hidden {
13452
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
13467
+ .pf-v6-c-list.pf-m-icon-lg {
13468
+ --pf-v6-c-list__item-icon--MinWidth: var(--pf-v6-c-list--m-icon-lg__item-icon--MinWidth);
13469
+ --pf-v6-c-list__item-icon--MarginBlockStart: 0;
13470
+ --pf-v6-c-list__item-icon--MarginInlineEnd: var(--pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd);
13471
+ --pf-v6-c-list__item-icon--FontSize: var(--pf-v6-c-list--m-icon-lg__item-icon--FontSize);
13453
13472
  }
13454
13473
 
13455
- @media screen and (min-width: 576px) {
13456
- .pf-v6-c-menu__list.pf-m-hidden-on-sm,
13457
- .pf-v6-c-menu__group.pf-m-hidden-on-sm {
13458
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
13459
- }
13460
- .pf-v6-c-menu__list.pf-m-visible-on-sm,
13461
- .pf-v6-c-menu__group.pf-m-visible-on-sm {
13462
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
13463
- }
13474
+ .pf-v6-c-list.pf-m-plain {
13475
+ --pf-v6-c-list--PaddingInlineStart: 0;
13476
+ list-style: none;
13477
+ }
13478
+
13479
+ .pf-v6-c-list.pf-m-inline {
13480
+ --pf-v6-c-list--PaddingInlineStart: 0;
13481
+ display: flex;
13482
+ flex-wrap: wrap;
13483
+ list-style: none;
13484
+ }
13485
+
13486
+ .pf-v6-c-list.pf-m-inline li {
13487
+ --pf-v6-c-list--li--MarginBlockStart: 0;
13488
+ }
13489
+
13490
+ .pf-v6-c-list.pf-m-inline li:not(:last-child) {
13491
+ margin-inline-end: var(--pf-v6-c-list--m-inline--li--MarginInlineEnd);
13492
+ }
13493
+
13494
+ .pf-v6-c-list.pf-m-bordered > * {
13495
+ padding-block-end: var(--pf-v6-c-list--m-bordered--li--PaddingBlockEnd);
13496
+ border-block-end: var(--pf-v6-c-list--m-bordered--li--BorderBlockEndWidth) solid var(--pf-v6-c-list--m-bordered--li--BorderBlockEndColor);
13497
+ }
13498
+
13499
+ .pf-v6-c-list.pf-m-bordered > :last-child {
13500
+ --pf-v6-c-list--m-bordered--li--PaddingBlockEnd: 0;
13501
+ --pf-v6-c-list--m-bordered--li--BorderBlockEndWidth: 0;
13502
+ }
13503
+
13504
+ :where(:root, .pf-v6-c-masthead) {
13505
+ --pf-v6-c-masthead--RowGap: var(--pf-t--global--spacer--sm);
13506
+ --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--md);
13507
+ --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
13508
+ --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
13509
+ --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
13510
+ --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
13511
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13512
+ --pf-v6-c-masthead__brand--MarginInlineEnd: var(--pf-t--global--spacer--md);
13513
+ --pf-v6-c-masthead__brand--MaxHeight: 2.375rem;
13514
+ --pf-v6-c-masthead__toggle--Size: var(--pf-t--global--icon--size--xl);
13515
+ --pf-v6-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
13516
+ --pf-v6-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
13517
+ --pf-v6-c-masthead--m-display-stack__main--Order: -1;
13518
+ --pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd: var(--pf-v6-c-masthead--RowGap);
13519
+ --pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
13520
+ --pf-v6-c-masthead--m-display-stack__content--GridColumn: 2;
13521
+ --pf-v6-c-masthead--m-display-stack__content--Order: 1;
13522
+ --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
13523
+ --pf-v6-c-masthead--m-display-inline__main--GridColumn: 2;
13524
+ --pf-v6-c-masthead--m-display-inline__main--Order: 0;
13525
+ --pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd: 0;
13526
+ --pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd: 0;
13527
+ --pf-v6-c-masthead--m-display-inline__content--GridColumn: 3;
13528
+ --pf-v6-c-masthead--m-display-inline__content--Order: 0;
13529
+ --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
13530
+ --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
13531
+ --pf-v6-c-masthead--c-toolbar--Width: 100%;
13532
+ --pf-v6-c-masthead--c-toolbar--PaddingBlock: 0;
13533
+ --pf-v6-c-masthead--c-toolbar--PaddingInline: 0;
13534
+ }
13535
+
13536
+ .pf-v6-c-masthead {
13537
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
13538
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
13539
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
13540
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
13541
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
13542
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
13543
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
13544
+ display: grid;
13545
+ grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
13546
+ row-gap: var(--pf-v6-c-masthead--RowGap);
13547
+ column-gap: var(--pf-v6-c-masthead--ColumnGap);
13548
+ align-items: start;
13549
+ min-width: 0;
13550
+ padding-block-start: var(--pf-v6-c-masthead--PaddingBlockStart, var(--pf-v6-c-masthead--PaddingBlock));
13551
+ padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock));
13552
+ padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline));
13553
+ padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
13554
+ background-color: var(--pf-v6-c-masthead--BackgroundColor);
13464
13555
  }
13556
+
13557
+ .pf-v6-c-masthead .pf-v6-c-toolbar {
13558
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
13559
+ --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-v6-c-masthead--c-toolbar--PaddingBlock);
13560
+ --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-masthead--c-toolbar--PaddingInline);
13561
+ --pf-v6-c-toolbar__content--MinWidth: 0;
13562
+ }
13563
+
13465
13564
  @media screen and (min-width: 768px) {
13466
- .pf-v6-c-menu__list.pf-m-hidden-on-md,
13467
- .pf-v6-c-menu__group.pf-m-hidden-on-md {
13468
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
13469
- }
13470
- .pf-v6-c-menu__list.pf-m-visible-on-md,
13471
- .pf-v6-c-menu__group.pf-m-visible-on-md {
13472
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
13565
+ :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
13566
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
13567
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
13568
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
13569
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
13570
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
13571
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
13572
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
13473
13573
  }
13474
13574
  }
13475
- @media screen and (min-width: 992px) {
13476
- .pf-v6-c-menu__list.pf-m-hidden-on-lg,
13477
- .pf-v6-c-menu__group.pf-m-hidden-on-lg {
13478
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
13479
- }
13480
- .pf-v6-c-menu__list.pf-m-visible-on-lg,
13481
- .pf-v6-c-menu__group.pf-m-visible-on-lg {
13482
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
13483
- }
13575
+ .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
13576
+ flex-wrap: nowrap;
13577
+ min-width: 0;
13484
13578
  }
13485
- @media screen and (min-width: 1200px) {
13486
- .pf-v6-c-menu__list.pf-m-hidden-on-xl,
13487
- .pf-v6-c-menu__group.pf-m-hidden-on-xl {
13488
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
13489
- }
13490
- .pf-v6-c-menu__list.pf-m-visible-on-xl,
13491
- .pf-v6-c-menu__group.pf-m-visible-on-xl {
13492
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
13493
- }
13579
+
13580
+ .pf-v6-c-masthead .pf-v6-c-toolbar__expandable-content {
13581
+ inset-block-start: 100%;
13582
+ border-block-start: var(--pf-v6-c-masthead__expandable-content--BorderBlockStart);
13583
+ box-shadow: var(--pf-v6-c-masthead__expandable-content--BoxShadow);
13494
13584
  }
13495
- @media screen and (min-width: 1450px) {
13496
- .pf-v6-c-menu__list.pf-m-hidden-on-2xl,
13497
- .pf-v6-c-menu__group.pf-m-hidden-on-2xl {
13498
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
13499
- }
13500
- .pf-v6-c-menu__list.pf-m-visible-on-2xl,
13501
- .pf-v6-c-menu__group.pf-m-visible-on-2xl {
13502
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
13503
- }
13585
+
13586
+ .pf-v6-c-masthead.pf-m-display-stack {
13587
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
13588
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
13589
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
13590
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
13591
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
13592
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
13593
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
13504
13594
  }
13505
- .pf-v6-c-menu__list,
13506
- .pf-v6-c-menu__list-item,
13507
- .pf-v6-c-menu__breadcrumb,
13508
- .pf-v6-c-menu__footer {
13509
- position: relative;
13595
+
13596
+ .pf-v6-c-masthead.pf-m-display-inline {
13597
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
13598
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
13599
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
13600
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
13601
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
13602
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
13603
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
13510
13604
  }
13511
13605
 
13512
- .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]),
13513
- .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) {
13514
- --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__item--m-disabled--Color);
13515
- --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
13516
- --pf-v6-c-menu__item-external-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
13517
- --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
13518
- --pf-v6-c-menu__list-item--BackgroundColor: transparent;
13519
- pointer-events: none;
13606
+ .pf-v6-c-masthead.pf-m-inset-none {
13607
+ padding-inline-start: 0;
13608
+ padding-inline-end: 0;
13520
13609
  }
13521
13610
 
13522
- [class*=pf-v6-c-menu]:is([hidden]) {
13523
- display: none;
13611
+ .pf-v6-c-masthead.pf-m-inset-sm {
13612
+ padding-inline-start: var(--pf-t--global--spacer--sm);
13613
+ padding-inline-end: var(--pf-t--global--spacer--sm);
13524
13614
  }
13525
13615
 
13526
- .pf-v6-c-menu {
13527
- display: grid;
13528
- row-gap: var(--pf-v6-c-menu--RowGap);
13529
- width: var(--pf-v6-c-menu--Width);
13530
- min-width: var(--pf-v6-c-menu--MinWidth);
13531
- padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
13532
- padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
13533
- overflow: hidden;
13534
- color: var(--pf-v6-c-menu--Color);
13535
- background-color: var(--pf-v6-c-menu--BackgroundColor);
13536
- border-radius: var(--pf-v6-c-menu--BorderRadius);
13537
- box-shadow: var(--pf-v6-c-menu--BoxShadow);
13538
- transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
13539
- transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
13616
+ .pf-v6-c-masthead.pf-m-inset-md {
13617
+ padding-inline-start: var(--pf-t--global--spacer--md);
13618
+ padding-inline-end: var(--pf-t--global--spacer--md);
13619
+ }
13620
+
13621
+ .pf-v6-c-masthead.pf-m-inset-lg {
13622
+ padding-inline-start: var(--pf-t--global--spacer--lg);
13623
+ padding-inline-end: var(--pf-t--global--spacer--lg);
13624
+ }
13625
+
13626
+ .pf-v6-c-masthead.pf-m-inset-xl {
13627
+ padding-inline-start: var(--pf-t--global--spacer--xl);
13628
+ padding-inline-end: var(--pf-t--global--spacer--xl);
13629
+ }
13630
+
13631
+ .pf-v6-c-masthead.pf-m-inset-2xl {
13632
+ padding-inline-start: var(--pf-t--global--spacer--2xl);
13633
+ padding-inline-end: var(--pf-t--global--spacer--2xl);
13540
13634
  }
13541
13635
 
13542
- .pf-v6-c-menu .pf-v6-c-menu {
13543
- min-width: 100%;
13636
+ .pf-v6-c-masthead,
13637
+ .pf-v6-c-masthead__main {
13638
+ position: relative;
13544
13639
  }
13545
13640
 
13546
- .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu .pf-v6-c-menu__content {
13547
- overflow: visible;
13641
+ .pf-v6-c-masthead__main,
13642
+ .pf-v6-c-masthead__content,
13643
+ .pf-v6-c-masthead__logo,
13644
+ .pf-v6-c-masthead__brand {
13645
+ display: flex;
13646
+ align-self: stretch;
13548
13647
  }
13549
13648
 
13550
- .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu {
13551
- min-width: 100%;
13552
- border-radius: 0;
13649
+ .pf-v6-c-masthead__main,
13650
+ .pf-v6-c-masthead__brand,
13651
+ .pf-v6-c-masthead__content {
13652
+ min-width: 0.25rem;
13553
13653
  }
13554
13654
 
13555
- .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu, .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content {
13556
- overflow: visible;
13655
+ .pf-v6-c-masthead__main {
13656
+ grid-column: var(--pf-v6-c-masthead__main--GridColumn);
13657
+ row-gap: var(--pf-v6-c-masthead__main--RowGap, var(--pf-v6-c-masthead--RowGap));
13658
+ align-items: var(--pf-v6-c-masthead__main--AlignItems, var(--pf-v6-c-masthead--AlignItems));
13659
+ order: var(--pf-v6-c-masthead__main--Order);
13660
+ padding-block-end: var(--pf-v6-c-masthead__main--PaddingBlockEnd);
13661
+ border-block-end: var(--pf-v6-c-masthead__main--BorderBlockEnd);
13557
13662
  }
13558
13663
 
13559
- .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu {
13560
- position: absolute;
13561
- inset-block-start: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockStart);
13562
- inset-block-end: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockEnd);
13563
- inset-inline-start: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineStart);
13564
- inset-inline-end: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineEnd);
13565
- z-index: var(--pf-v6-c-menu--m-flyout__Zindex);
13566
- border-radius: var(--pf-v6-c-menu--BorderRadius);
13664
+ .pf-v6-c-masthead__content {
13665
+ flex-wrap: wrap;
13666
+ grid-column: var(--pf-v6-c-masthead__content--GridColumn);
13667
+ grid-column-end: -1;
13668
+ row-gap: var(--pf-v6-c-masthead__content-RowGap, var(--pf-v6-c-masthead--RowGap));
13669
+ column-gap: var(--pf-v6-c-masthead__content-ColumnGap, var(--pf-v6-c-masthead--ColumnGap));
13670
+ align-items: var(--pf-v6-c-masthead__content--AlignItems, var(--pf-v6-c-masthead--AlignItems));
13671
+ order: var(--pf-v6-c-masthead__content--Order);
13567
13672
  }
13568
13673
 
13569
- .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu .pf-v6-c-menu__content {
13570
- overflow-y: visible;
13674
+ .pf-v6-c-masthead__brand {
13675
+ align-items: var(--pf-v6-c-masthead__brand--AlignItems, var(--pf-v6-c-masthead--AlignItems));
13676
+ max-height: var(--pf-v6-c-masthead__brand--MaxHeight);
13677
+ margin-inline-end: var(--pf-v6-c-masthead__brand--MarginInlineEnd);
13571
13678
  }
13572
13679
 
13573
- .pf-v6-c-menu.pf-m-top {
13574
- --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: auto;
13575
- --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: var(--pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd);
13680
+ .pf-v6-c-masthead__toggle {
13681
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-masthead__toggle--Size);
13576
13682
  }
13577
13683
 
13578
- .pf-v6-c-menu.pf-m-left {
13579
- --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: var(--pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd);
13580
- --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: auto;
13684
+ .pf-v6-c-masthead__expandable-content {
13685
+ row-gap: var(--pf-v6-c-masthead__expandable-content-RowGap, var(--pf-v6-c-masthead--RowGap));
13686
+ background-color: var(--pf-v6-c-masthead--BackgroundColor);
13581
13687
  }
13582
13688
 
13583
- .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content {
13584
- overflow: hidden;
13585
- transition: var(--pf-v6-c-menu--m-drilldown__content--Transition);
13689
+ .pf-v6-c-masthead.pf-m-display-stack {
13690
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
13691
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
13692
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
13693
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
13694
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
13695
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
13696
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
13586
13697
  }
13587
13698
 
13588
- .pf-v6-c-menu.pf-m-drilldown :where(.pf-v6-c-menu) {
13589
- padding: 0;
13699
+ .pf-v6-c-masthead.pf-m-display-inline {
13700
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
13701
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
13702
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
13703
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
13704
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
13705
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
13706
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
13590
13707
  }
13591
13708
 
13592
- .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list,
13593
- .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list {
13594
- transform: translateX(-100%);
13709
+ .pf-v6-c-masthead.pf-m-inset-none {
13710
+ padding-inline-start: 0;
13711
+ padding-inline-end: 0;
13595
13712
  }
13596
13713
 
13597
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list, .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list {
13598
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
13714
+ .pf-v6-c-masthead.pf-m-inset-sm {
13715
+ padding-inline-start: var(--pf-t--global--spacer--sm);
13716
+ padding-inline-end: var(--pf-t--global--spacer--sm);
13599
13717
  }
13600
13718
 
13601
- .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu {
13602
- position: absolute;
13603
- inset-block-start: var(--pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart);
13604
- inset-inline-start: 100%;
13605
- width: 100%;
13606
- box-shadow: none;
13607
- transition: var(--pf-v6-c-menu--m-drilldown--c-menu--Transition);
13719
+ .pf-v6-c-masthead.pf-m-inset-md {
13720
+ padding-inline-start: var(--pf-t--global--spacer--md);
13721
+ padding-inline-end: var(--pf-t--global--spacer--md);
13608
13722
  }
13609
13723
 
13610
- .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in {
13611
- transform: translateX(-100%);
13724
+ .pf-v6-c-masthead.pf-m-inset-lg {
13725
+ padding-inline-start: var(--pf-t--global--spacer--lg);
13726
+ padding-inline-end: var(--pf-t--global--spacer--lg);
13612
13727
  }
13613
13728
 
13614
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in {
13615
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
13729
+ .pf-v6-c-masthead.pf-m-inset-xl {
13730
+ padding-inline-start: var(--pf-t--global--spacer--xl);
13731
+ padding-inline-end: var(--pf-t--global--spacer--xl);
13616
13732
  }
13617
13733
 
13618
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list {
13619
- overflow: hidden;
13620
- visibility: visible;
13621
- transition: var(--pf-v6-c-menu--m-drilldown__list--Transition);
13734
+ .pf-v6-c-masthead.pf-m-inset-2xl {
13735
+ padding-inline-start: var(--pf-t--global--spacer--2xl);
13736
+ padding-inline-end: var(--pf-t--global--spacer--2xl);
13622
13737
  }
13623
13738
 
13624
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list {
13625
- --pf-v6-c-menu__list--PaddingBlockStart: 0;
13626
- --pf-v6-c-menu__list--PaddingBlockEnd: 0;
13739
+ @media (min-width: 576px) {
13740
+ .pf-v6-c-masthead.pf-m-display-stack-on-sm {
13741
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
13742
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
13743
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
13744
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
13745
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
13746
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
13747
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
13748
+ }
13749
+ .pf-v6-c-masthead.pf-m-display-inline-on-sm {
13750
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
13751
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
13752
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
13753
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
13754
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
13755
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
13756
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
13757
+ }
13758
+ }
13759
+ .pf-v6-c-masthead.pf-m-inset-none {
13760
+ padding-inline-start: 0;
13761
+ padding-inline-end: 0;
13627
13762
  }
13628
13763
 
13629
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path .pf-v6-c-menu {
13630
- z-index: var(--pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
13764
+ .pf-v6-c-masthead.pf-m-inset-sm {
13765
+ padding-inline-start: var(--pf-t--global--spacer--sm);
13766
+ padding-inline-end: var(--pf-t--global--spacer--sm);
13631
13767
  }
13632
13768
 
13633
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path > .pf-v6-c-menu {
13634
- overflow: visible;
13769
+ .pf-v6-c-masthead.pf-m-inset-md {
13770
+ padding-inline-start: var(--pf-t--global--spacer--md);
13771
+ padding-inline-end: var(--pf-t--global--spacer--md);
13635
13772
  }
13636
13773
 
13637
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static > .pf-v6-c-menu {
13638
- position: static;
13774
+ .pf-v6-c-masthead.pf-m-inset-lg {
13775
+ padding-inline-start: var(--pf-t--global--spacer--lg);
13776
+ padding-inline-end: var(--pf-t--global--spacer--lg);
13639
13777
  }
13640
13778
 
13641
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static:hover {
13642
- background-color: transparent;
13779
+ .pf-v6-c-masthead.pf-m-inset-xl {
13780
+ padding-inline-start: var(--pf-t--global--spacer--xl);
13781
+ padding-inline-end: var(--pf-t--global--spacer--xl);
13643
13782
  }
13644
13783
 
13645
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item:not(.pf-m-current-path) .pf-v6-c-menu {
13646
- display: none;
13784
+ .pf-v6-c-masthead.pf-m-inset-2xl {
13785
+ padding-inline-start: var(--pf-t--global--spacer--2xl);
13786
+ padding-inline-end: var(--pf-t--global--spacer--2xl);
13647
13787
  }
13648
13788
 
13649
- .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__item {
13650
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
13789
+ @media (min-width: 768px) {
13790
+ .pf-v6-c-masthead.pf-m-display-stack-on-md {
13791
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
13792
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
13793
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
13794
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
13795
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
13796
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
13797
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
13798
+ }
13799
+ .pf-v6-c-masthead.pf-m-display-inline-on-md {
13800
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
13801
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
13802
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
13803
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
13804
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
13805
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
13806
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
13807
+ }
13808
+ }
13809
+ .pf-v6-c-masthead.pf-m-inset-none {
13810
+ padding-inline-start: 0;
13811
+ padding-inline-end: 0;
13651
13812
  }
13652
13813
 
13653
- .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list {
13654
- overflow: visible;
13655
- visibility: hidden;
13814
+ .pf-v6-c-masthead.pf-m-inset-sm {
13815
+ padding-inline-start: var(--pf-t--global--spacer--sm);
13816
+ padding-inline-end: var(--pf-t--global--spacer--sm);
13656
13817
  }
13657
13818
 
13658
- .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-divider,
13659
- .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item:not(.pf-m-current-path) {
13660
- display: none;
13819
+ .pf-v6-c-masthead.pf-m-inset-md {
13820
+ padding-inline-start: var(--pf-t--global--spacer--md);
13821
+ padding-inline-end: var(--pf-t--global--spacer--md);
13661
13822
  }
13662
13823
 
13663
- .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item.pf-m-current-path {
13664
- visibility: hidden;
13824
+ .pf-v6-c-masthead.pf-m-inset-lg {
13825
+ padding-inline-start: var(--pf-t--global--spacer--lg);
13826
+ padding-inline-end: var(--pf-t--global--spacer--lg);
13665
13827
  }
13666
13828
 
13667
- .pf-v6-c-menu.pf-m-plain {
13668
- --pf-v6-c-menu--BoxShadow: var(--pf-v6-c-menu--m-plain--BoxShadow);
13829
+ .pf-v6-c-masthead.pf-m-inset-xl {
13830
+ padding-inline-start: var(--pf-t--global--spacer--xl);
13831
+ padding-inline-end: var(--pf-t--global--spacer--xl);
13669
13832
  }
13670
13833
 
13671
- .pf-v6-c-menu.pf-m-scrollable {
13672
- --pf-v6-c-menu__content--MaxHeight: var(--pf-v6-c-menu--m-scrollable__content--MaxHeight);
13673
- --pf-v6-c-menu__footer--BoxShadow: var(--pf-v6-c-menu--m-scrollable__footer--BoxShadow);
13674
- --pf-v6-c-menu__footer--PaddingBlockStart: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
13675
- --pf-v6-c-menu__footer--PaddingBlockEnd: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
13676
- overflow: hidden;
13834
+ .pf-v6-c-masthead.pf-m-inset-2xl {
13835
+ padding-inline-start: var(--pf-t--global--spacer--2xl);
13836
+ padding-inline-end: var(--pf-t--global--spacer--2xl);
13837
+ }
13838
+
13839
+ @media (min-width: 992px) {
13840
+ .pf-v6-c-masthead.pf-m-display-stack-on-lg {
13841
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
13842
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
13843
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
13844
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
13845
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
13846
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
13847
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
13848
+ }
13849
+ .pf-v6-c-masthead.pf-m-display-inline-on-lg {
13850
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
13851
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
13852
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
13853
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
13854
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
13855
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
13856
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
13857
+ }
13858
+ }
13859
+ .pf-v6-c-masthead.pf-m-inset-none {
13860
+ padding-inline-start: 0;
13861
+ padding-inline-end: 0;
13677
13862
  }
13678
13863
 
13679
- .pf-v6-c-menu.pf-m-scrollable:has(.pf-v6-c-menu__footer) {
13680
- --pf-v6-c-menu--PaddingBlockEnd: 0;
13864
+ .pf-v6-c-masthead.pf-m-inset-sm {
13865
+ padding-inline-start: var(--pf-t--global--spacer--sm);
13866
+ padding-inline-end: var(--pf-t--global--spacer--sm);
13681
13867
  }
13682
13868
 
13683
- .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__content,
13684
- .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list {
13685
- overflow-y: auto;
13869
+ .pf-v6-c-masthead.pf-m-inset-md {
13870
+ padding-inline-start: var(--pf-t--global--spacer--md);
13871
+ padding-inline-end: var(--pf-t--global--spacer--md);
13686
13872
  }
13687
13873
 
13688
- .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__content {
13689
- position: relative;
13690
- z-index: var(--pf-v6-c-menu--ZIndex);
13691
- margin-block-start: calc(var(--pf-v6-c-menu--RowGap) * -1);
13692
- margin-block-end: calc(var(--pf-v6-c-menu--RowGap) * -1);
13693
- overflow: hidden;
13874
+ .pf-v6-c-masthead.pf-m-inset-lg {
13875
+ padding-inline-start: var(--pf-t--global--spacer--lg);
13876
+ padding-inline-end: var(--pf-t--global--spacer--lg);
13694
13877
  }
13695
13878
 
13696
- .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list {
13697
- padding-block-start: var(--pf-v6-c-menu--RowGap);
13698
- padding-block-end: var(--pf-v6-c-menu--RowGap);
13879
+ .pf-v6-c-masthead.pf-m-inset-xl {
13880
+ padding-inline-start: var(--pf-t--global--spacer--xl);
13881
+ padding-inline-end: var(--pf-t--global--spacer--xl);
13699
13882
  }
13700
13883
 
13701
- .pf-v6-c-menu__header {
13702
- padding-block-start: var(--pf-v6-c-menu__header--PaddingBlockStart);
13703
- padding-block-end: var(--pf-v6-c-menu__header--PaddingBlockEnd);
13704
- padding-inline-start: var(--pf-v6-c-menu__header--PaddingInlineStart);
13705
- padding-inline-end: var(--pf-v6-c-menu__header--PaddingInlineEnd);
13884
+ .pf-v6-c-masthead.pf-m-inset-2xl {
13885
+ padding-inline-start: var(--pf-t--global--spacer--2xl);
13886
+ padding-inline-end: var(--pf-t--global--spacer--2xl);
13706
13887
  }
13707
13888
 
13708
- .pf-v6-c-menu__search {
13709
- padding-block-start: var(--pf-v6-c-menu__search--PaddingBlockStart);
13710
- padding-block-end: var(--pf-v6-c-menu__search--PaddingBlockEnd);
13711
- padding-inline-start: var(--pf-v6-c-menu__search--PaddingInlineStart);
13712
- padding-inline-end: var(--pf-v6-c-menu__search--PaddingInlineEnd);
13889
+ @media (min-width: 1200px) {
13890
+ .pf-v6-c-masthead.pf-m-display-stack-on-xl {
13891
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
13892
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
13893
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
13894
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
13895
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
13896
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
13897
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
13898
+ }
13899
+ .pf-v6-c-masthead.pf-m-display-inline-on-xl {
13900
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
13901
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
13902
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
13903
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
13904
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
13905
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
13906
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
13907
+ }
13713
13908
  }
13714
-
13715
- .pf-v6-c-menu__footer {
13716
- padding-block-start: var(--pf-v6-c-menu__footer--PaddingBlockStart);
13717
- padding-block-end: var(--pf-v6-c-menu__footer--PaddingBlockEnd);
13718
- padding-inline-start: var(--pf-v6-c-menu__footer--PaddingInlineStart);
13719
- padding-inline-end: var(--pf-v6-c-menu__footer--PaddingInlineEnd);
13720
- box-shadow: var(--pf-v6-c-menu__footer--BoxShadow);
13909
+ .pf-v6-c-masthead.pf-m-inset-none {
13910
+ padding-inline-start: 0;
13911
+ padding-inline-end: 0;
13721
13912
  }
13722
13913
 
13723
- .pf-v6-c-menu__content {
13724
- flex-direction: column;
13725
- row-gap: var(--pf-v6-c-menu__content--RowGap);
13726
- height: var(--pf-v6-c-menu__content--Height);
13727
- max-height: var(--pf-v6-c-menu__content--MaxHeight);
13914
+ .pf-v6-c-masthead.pf-m-inset-sm {
13915
+ padding-inline-start: var(--pf-t--global--spacer--sm);
13916
+ padding-inline-end: var(--pf-t--global--spacer--sm);
13728
13917
  }
13729
13918
 
13730
- .pf-v6-c-menu__content .pf-v6-c-menu__content {
13731
- --pf-v6-c-menu__content--Height: auto;
13919
+ .pf-v6-c-masthead.pf-m-inset-md {
13920
+ padding-inline-start: var(--pf-t--global--spacer--md);
13921
+ padding-inline-end: var(--pf-t--global--spacer--md);
13732
13922
  }
13733
13923
 
13734
- .pf-v6-c-menu__list :where(.pf-v6-c-divider:is(li)) {
13735
- margin-block-start: var(--pf-v6-c-menu__list--divider--MarginBlockStart);
13736
- margin-block-end: var(--pf-v6-c-menu__list--divider--MarginBlockEnd);
13924
+ .pf-v6-c-masthead.pf-m-inset-lg {
13925
+ padding-inline-start: var(--pf-t--global--spacer--lg);
13926
+ padding-inline-end: var(--pf-t--global--spacer--lg);
13737
13927
  }
13738
13928
 
13739
- .pf-v6-c-menu__list-item {
13740
- align-items: baseline;
13741
- min-width: 0;
13742
- transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
13743
- transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
13744
- transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
13929
+ .pf-v6-c-masthead.pf-m-inset-xl {
13930
+ padding-inline-start: var(--pf-t--global--spacer--xl);
13931
+ padding-inline-end: var(--pf-t--global--spacer--xl);
13745
13932
  }
13746
13933
 
13747
- .pf-v6-c-menu__list-item > * {
13748
- position: relative;
13934
+ .pf-v6-c-masthead.pf-m-inset-2xl {
13935
+ padding-inline-start: var(--pf-t--global--spacer--2xl);
13936
+ padding-inline-end: var(--pf-t--global--spacer--2xl);
13749
13937
  }
13750
13938
 
13751
- .pf-v6-c-menu__list-item::before {
13752
- position: absolute;
13753
- inset: 0;
13754
- content: "";
13755
- background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
13756
- transition: inherit;
13939
+ @media (min-width: 1450px) {
13940
+ .pf-v6-c-masthead.pf-m-display-stack-on-2xl {
13941
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
13942
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
13943
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
13944
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
13945
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
13946
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
13947
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
13948
+ }
13949
+ .pf-v6-c-masthead.pf-m-display-inline-on-2xl {
13950
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
13951
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
13952
+ --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
13953
+ --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
13954
+ --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
13955
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
13956
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
13957
+ }
13757
13958
  }
13758
-
13759
- .pf-v6-c-menu__list-item.pf-m-load {
13760
- --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);
13959
+ .pf-v6-c-masthead.pf-m-inset-none {
13960
+ padding-inline-start: 0;
13961
+ padding-inline-end: 0;
13761
13962
  }
13762
13963
 
13763
- .pf-v6-c-menu__list-item.pf-m-loading {
13764
- justify-content: center;
13765
- overflow: hidden;
13766
- pointer-events: none;
13964
+ .pf-v6-c-masthead.pf-m-inset-sm {
13965
+ padding-inline-start: var(--pf-t--global--spacer--sm);
13966
+ padding-inline-end: var(--pf-t--global--spacer--sm);
13767
13967
  }
13768
13968
 
13769
- .pf-v6-c-menu__list-item.pf-m-loading .pf-v6-c-menu__item-text {
13770
- text-align: center;
13969
+ .pf-v6-c-masthead.pf-m-inset-md {
13970
+ padding-inline-start: var(--pf-t--global--spacer--md);
13971
+ padding-inline-end: var(--pf-t--global--spacer--md);
13771
13972
  }
13772
13973
 
13773
- .pf-v6-c-menu__list-item.pf-m-danger {
13774
- --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-danger--Color);
13974
+ .pf-v6-c-masthead.pf-m-inset-lg {
13975
+ padding-inline-start: var(--pf-t--global--spacer--lg);
13976
+ padding-inline-end: var(--pf-t--global--spacer--lg);
13775
13977
  }
13776
13978
 
13777
- .pf-v6-c-menu__list-item.pf-m-danger:is(:hover, :focus) {
13778
- --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-danger--hover--Color, var(--pf-v6-c-menu__list-item--m-danger--Color));
13979
+ .pf-v6-c-masthead.pf-m-inset-xl {
13980
+ padding-inline-start: var(--pf-t--global--spacer--xl);
13981
+ padding-inline-end: var(--pf-t--global--spacer--xl);
13779
13982
  }
13780
13983
 
13781
- .pf-v6-c-menu__list-item:has(.pf-v6-c-menu__item-action) {
13782
- padding-inline-end: var(--pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd);
13984
+ .pf-v6-c-masthead.pf-m-inset-2xl {
13985
+ padding-inline-start: var(--pf-t--global--spacer--2xl);
13986
+ padding-inline-end: var(--pf-t--global--spacer--2xl);
13783
13987
  }
13784
13988
 
13785
- .pf-v6-c-menu__list-item.pf-m-focus, .pf-v6-c-menu__list-item:focus-within, .pf-v6-c-menu__list-item:has(> :hover) {
13786
- --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-v6-c-menu__list-item--hover--BackgroundColor);
13989
+ :where(:root, .pf-v6-c-menu) {
13990
+ --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
13991
+ --pf-v6-c-menu--Width: auto;
13992
+ --pf-v6-c-menu--MinWidth: auto;
13993
+ --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--sm);
13994
+ --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
13995
+ --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
13996
+ --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
13997
+ --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
13998
+ --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
13999
+ --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
14000
+ --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
14001
+ --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
14002
+ --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
14003
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
14004
+ --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
14005
+ --pf-v6-c-menu--m-plain--BoxShadow: none;
14006
+ --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
14007
+ --pf-v6-c-menu__content--Height: auto;
14008
+ --pf-v6-c-menu__content--MaxHeight: none;
14009
+ --pf-v6-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
14010
+ --pf-v6-c-menu__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14011
+ --pf-v6-c-menu__search--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
14012
+ --pf-v6-c-menu__search--PaddingInlineStart: var(--pf-t--global--spacer--md);
14013
+ --pf-v6-c-menu__search--PaddingInlineEnd: var(--pf-t--global--spacer--md);
14014
+ --pf-v6-c-menu__footer--BoxShadow: none;
14015
+ --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
14016
+ --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
14017
+ --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
14018
+ --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
14019
+ --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
14020
+ --pf-v6-c-menu__list-item--TransitionProperty: background-color;
14021
+ --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
14022
+ --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
14023
+ --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
14024
+ --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
14025
+ --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--sm);
14026
+ --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--sm);
14027
+ --pf-v6-c-menu__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14028
+ --pf-v6-c-menu__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
14029
+ --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--lg);
14030
+ --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
14031
+ --pf-v6-c-menu__item--FontSize: var(--pf-t--global--font--size--body--default);
14032
+ --pf-v6-c-menu__item--LineHeight: var(--pf-t--global--font--line-height--body);
14033
+ --pf-v6-c-menu__item--FontWeight: var(--pf-t--global--font--weight--body);
14034
+ --pf-v6-c-menu__item--Color: var(--pf-t--global--text--color--regular);
14035
+ --pf-v6-c-menu__item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
14036
+ --pf-v6-c-menu__item--m-disabled--Color: var(--pf-t--global--text--color--disabled);
14037
+ --pf-v6-c-menu__header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14038
+ --pf-v6-c-menu__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
14039
+ --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
14040
+ --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
14041
+ --pf-v6-c-menu__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14042
+ --pf-v6-c-menu__group-title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
14043
+ --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--lg);
14044
+ --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
14045
+ --pf-v6-c-menu__breadcrumb--PaddingBlockStart: 0;
14046
+ --pf-v6-c-menu__breadcrumb--PaddingBlockEnd: 0;
14047
+ --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--lg);
14048
+ --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
14049
+ --pf-v6-c-menu__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14050
+ --pf-v6-c-menu__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
14051
+ --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
14052
+ --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
14053
+ --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--sm);
14054
+ --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--subtle);
14055
+ --pf-v6-c-menu__item-description--FontSize: var(--pf-t--global--font--size--body--sm);
14056
+ --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
14057
+ --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
14058
+ --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
14059
+ --pf-v6-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
14060
+ --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
14061
+ --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
14062
+ --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
14063
+ --pf-v6-c-menu__item--m-selected__item-select-icon--Color: var(--pf-t--global--icon--color--brand--default);
14064
+ --pf-v6-c-menu__item-external--Color: var(--pf-t--global--icon--color--brand--default);
14065
+ --pf-v6-c-menu--m-flyout__menu--top-offset: 0px;
14066
+ --pf-v6-c-menu--m-flyout__menu--left-offset: 0px;
14067
+ --pf-v6-c-menu--m-flyout__menu--m-left--right-offset: 0px;
14068
+ --pf-v6-c-menu--m-flyout__Zindex: var(--pf-t--global--z-index--sm);
14069
+ --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1 + var(--pf-v6-c-menu--m-flyout__menu--top-offset));
14070
+ --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: auto;
14071
+ --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: auto;
14072
+ --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--left-offset));
14073
+ --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1);
14074
+ --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
14075
+ --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--transition--duration);
14076
+ --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--transition--duration);
14077
+ --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
14078
+ --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
14079
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--transition--duration);
14080
+ --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
14081
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--transition--duration);
14082
+ --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
14083
+ --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
13787
14084
  }
13788
14085
 
13789
- .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-select-icon,
13790
- .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-select-icon,
13791
- .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-select-icon,
13792
- .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-external-icon {
13793
- opacity: 1;
14086
+ .pf-v6-c-menu__content,
14087
+ .pf-v6-c-menu__list-item,
14088
+ .pf-v6-c-menu__item-main,
14089
+ .pf-v6-c-menu__breadcrumb,
14090
+ .pf-v6-c-menu__item-check,
14091
+ .pf-v6-c-menu__item-action,
14092
+ .pf-v6-c-menu__item-action-icon {
14093
+ display: flex;
13794
14094
  }
13795
14095
 
13796
- .pf-v6-c-menu__item {
13797
- flex-basis: 100%;
13798
- flex-direction: column;
13799
- min-width: 0;
13800
- padding-block-start: var(--pf-v6-c-menu__item--PaddingBlockStart);
13801
- padding-block-end: var(--pf-v6-c-menu__item--PaddingBlockEnd);
13802
- padding-inline-start: var(--pf-v6-c-menu__item--PaddingInlineStart);
13803
- padding-inline-end: var(--pf-v6-c-menu__item--PaddingInlineEnd);
13804
- font-size: var(--pf-v6-c-menu__item--FontSize);
13805
- font-weight: var(--pf-v6-c-menu__item--FontWeight);
13806
- line-height: var(--pf-v6-c-menu__item--LineHeight);
13807
- color: var(--pf-v6-c-menu__item--Color);
13808
- text-align: start;
13809
- text-decoration: none;
13810
- background-color: var(--pf-v6-c-menu__item--BackgroundColor);
13811
- border: 0;
13812
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
13813
- --pf-v6-hidden-visible--visible--Display: flex;
14096
+ .pf-v6-c-menu__list,
14097
+ .pf-v6-c-menu__group {
14098
+ --pf-v6-hidden-visible--visible--Display: grid;
13814
14099
  --pf-v6-hidden-visible--hidden--Display: none;
13815
14100
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
13816
14101
  display: var(--pf-v6-hidden-visible--Display);
13817
14102
  }
13818
14103
 
13819
- .pf-v6-c-menu__item.pf-m-hidden {
14104
+ .pf-v6-c-menu__list.pf-m-hidden,
14105
+ .pf-v6-c-menu__group.pf-m-hidden {
13820
14106
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
13821
14107
  }
13822
14108
 
13823
14109
  @media screen and (min-width: 576px) {
13824
- .pf-v6-c-menu__item.pf-m-hidden-on-sm {
14110
+ .pf-v6-c-menu__list.pf-m-hidden-on-sm,
14111
+ .pf-v6-c-menu__group.pf-m-hidden-on-sm {
13825
14112
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
13826
14113
  }
13827
- .pf-v6-c-menu__item.pf-m-visible-on-sm {
14114
+ .pf-v6-c-menu__list.pf-m-visible-on-sm,
14115
+ .pf-v6-c-menu__group.pf-m-visible-on-sm {
13828
14116
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
13829
14117
  }
13830
14118
  }
13831
14119
  @media screen and (min-width: 768px) {
13832
- .pf-v6-c-menu__item.pf-m-hidden-on-md {
14120
+ .pf-v6-c-menu__list.pf-m-hidden-on-md,
14121
+ .pf-v6-c-menu__group.pf-m-hidden-on-md {
13833
14122
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
13834
14123
  }
13835
- .pf-v6-c-menu__item.pf-m-visible-on-md {
14124
+ .pf-v6-c-menu__list.pf-m-visible-on-md,
14125
+ .pf-v6-c-menu__group.pf-m-visible-on-md {
13836
14126
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
13837
14127
  }
13838
14128
  }
13839
14129
  @media screen and (min-width: 992px) {
13840
- .pf-v6-c-menu__item.pf-m-hidden-on-lg {
14130
+ .pf-v6-c-menu__list.pf-m-hidden-on-lg,
14131
+ .pf-v6-c-menu__group.pf-m-hidden-on-lg {
13841
14132
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
13842
14133
  }
13843
- .pf-v6-c-menu__item.pf-m-visible-on-lg {
14134
+ .pf-v6-c-menu__list.pf-m-visible-on-lg,
14135
+ .pf-v6-c-menu__group.pf-m-visible-on-lg {
13844
14136
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
13845
14137
  }
13846
14138
  }
13847
14139
  @media screen and (min-width: 1200px) {
13848
- .pf-v6-c-menu__item.pf-m-hidden-on-xl {
14140
+ .pf-v6-c-menu__list.pf-m-hidden-on-xl,
14141
+ .pf-v6-c-menu__group.pf-m-hidden-on-xl {
13849
14142
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
13850
14143
  }
13851
- .pf-v6-c-menu__item.pf-m-visible-on-xl {
14144
+ .pf-v6-c-menu__list.pf-m-visible-on-xl,
14145
+ .pf-v6-c-menu__group.pf-m-visible-on-xl {
13852
14146
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
13853
14147
  }
13854
14148
  }
13855
14149
  @media screen and (min-width: 1450px) {
13856
- .pf-v6-c-menu__item.pf-m-hidden-on-2xl {
14150
+ .pf-v6-c-menu__list.pf-m-hidden-on-2xl,
14151
+ .pf-v6-c-menu__group.pf-m-hidden-on-2xl {
13857
14152
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
13858
14153
  }
13859
- .pf-v6-c-menu__item.pf-m-visible-on-2xl {
14154
+ .pf-v6-c-menu__list.pf-m-visible-on-2xl,
14155
+ .pf-v6-c-menu__group.pf-m-visible-on-2xl {
13860
14156
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
13861
14157
  }
13862
14158
  }
13863
- :where(label).pf-v6-c-menu__item {
13864
- cursor: pointer;
13865
- }
13866
-
13867
- .pf-v6-c-menu__item.pf-m-selected {
13868
- --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
13869
- }
13870
-
13871
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
13872
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
13873
- opacity: 1;
13874
- }
13875
-
13876
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
13877
- color: var(--pf-v6-c-menu__item-external--Color);
14159
+ .pf-v6-c-menu__list,
14160
+ .pf-v6-c-menu__list-item,
14161
+ .pf-v6-c-menu__breadcrumb,
14162
+ .pf-v6-c-menu__footer {
14163
+ position: relative;
13878
14164
  }
13879
14165
 
13880
- .pf-v6-c-menu__item-select-icon {
13881
- color: var(--pf-v6-c-menu__item-select-icon--Color);
14166
+ .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]),
14167
+ .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) {
14168
+ --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__item--m-disabled--Color);
14169
+ --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
14170
+ --pf-v6-c-menu__item-external-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
14171
+ --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
14172
+ --pf-v6-c-menu__list-item--BackgroundColor: transparent;
14173
+ pointer-events: none;
13882
14174
  }
13883
14175
 
13884
- .pf-v6-c-menu__item-main {
13885
- column-gap: var(--pf-v6-c-menu__item-main--ColumnGap);
13886
- align-items: center;
13887
- width: 100%;
14176
+ [class*=pf-v6-c-menu]:is([hidden]) {
14177
+ display: none;
13888
14178
  }
13889
14179
 
13890
- .pf-v6-c-menu__item-text {
14180
+ .pf-v6-c-menu {
14181
+ display: grid;
14182
+ row-gap: var(--pf-v6-c-menu--RowGap);
14183
+ width: var(--pf-v6-c-menu--Width);
14184
+ min-width: var(--pf-v6-c-menu--MinWidth);
14185
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
14186
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
13891
14187
  overflow: hidden;
13892
- text-overflow: ellipsis;
13893
- white-space: nowrap;
13894
- flex-grow: 1;
13895
- }
13896
-
13897
- .pf-v6-c-menu__group-title {
13898
- padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
13899
- padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
13900
- padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
13901
- padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
13902
- font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
13903
- font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
13904
- color: var(--pf-v6-c-menu__group-title--Color);
14188
+ color: var(--pf-v6-c-menu--Color);
14189
+ background-color: var(--pf-v6-c-menu--BackgroundColor);
14190
+ border-radius: var(--pf-v6-c-menu--BorderRadius);
14191
+ box-shadow: var(--pf-v6-c-menu--BoxShadow);
14192
+ transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
14193
+ transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
13905
14194
  }
13906
14195
 
13907
- .pf-v6-c-menu__item-description {
13908
- font-size: var(--pf-v6-c-menu__item-description--FontSize);
13909
- color: var(--pf-v6-c-menu__item-description--Color);
13910
- word-break: break-word;
14196
+ .pf-v6-c-menu .pf-v6-c-menu {
14197
+ min-width: 100%;
13911
14198
  }
13912
14199
 
13913
- .pf-v6-c-menu__item-check .pf-v6-c-check {
13914
- --pf-v6-c-check__input--TranslateY: none;
14200
+ .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu .pf-v6-c-menu__content {
14201
+ overflow: visible;
13915
14202
  }
13916
14203
 
13917
- .pf-v6-c-menu__item-toggle-icon {
13918
- color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
14204
+ .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu {
14205
+ min-width: 100%;
14206
+ border-radius: 0;
13919
14207
  }
13920
14208
 
13921
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
13922
- scale: -1 1;
14209
+ .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu, .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content {
14210
+ overflow: visible;
13923
14211
  }
13924
14212
 
13925
- .pf-v6-c-menu__item-icon {
13926
- color: var(--pf-v6-c-menu__item--icon--Color, inherit);
14213
+ .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu {
14214
+ position: absolute;
14215
+ inset-block-start: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockStart);
14216
+ inset-block-end: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockEnd);
14217
+ inset-inline-start: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineStart);
14218
+ inset-inline-end: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineEnd);
14219
+ z-index: var(--pf-v6-c-menu--m-flyout__Zindex);
14220
+ border-radius: var(--pf-v6-c-menu--BorderRadius);
13927
14221
  }
13928
14222
 
13929
- .pf-v6-c-menu__item-select-icon,
13930
- .pf-v6-c-menu__item-external-icon {
13931
- opacity: 0;
14223
+ .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu .pf-v6-c-menu__content {
14224
+ overflow-y: visible;
13932
14225
  }
13933
14226
 
13934
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button,
13935
- .pf-v6-c-menu__item-action.pf-m-favorited,
13936
- .pf-v6-c-menu__item-action.pf-m-favorited:hover,
13937
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
13938
- --pf-v6-c-button--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
13939
- --pf-v6-c-menu__item-action--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
14227
+ .pf-v6-c-menu.pf-m-top {
14228
+ --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: auto;
14229
+ --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: var(--pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd);
13940
14230
  }
13941
14231
 
13942
- .pf-v6-c-menu__breadcrumb {
13943
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
13944
- padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
13945
- padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
13946
- padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
13947
- padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
14232
+ .pf-v6-c-menu.pf-m-left {
14233
+ --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: var(--pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd);
14234
+ --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: auto;
13948
14235
  }
13949
14236
 
13950
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
13951
- min-width: auto;
13952
- padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
13953
- padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
14237
+ .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content {
14238
+ overflow: hidden;
14239
+ transition: var(--pf-v6-c-menu--m-drilldown__content--Transition);
13954
14240
  }
13955
14241
 
13956
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
13957
- height: auto;
14242
+ .pf-v6-c-menu.pf-m-drilldown :where(.pf-v6-c-menu) {
14243
+ padding: 0;
13958
14244
  }
13959
14245
 
13960
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
13961
- --pf-v6-c-menu-toggle--BorderWidth: 0;
13962
- --pf-v6-c-menu-toggle--BorderColor: transparent;
13963
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
14246
+ .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list,
14247
+ .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list {
14248
+ transform: translateX(-100%);
13964
14249
  }
13965
14250
 
13966
- :where(:root, .pf-v6-c-masthead) {
13967
- --pf-v6-c-masthead--RowGap: var(--pf-t--global--spacer--sm);
13968
- --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--md);
13969
- --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
13970
- --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
13971
- --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
13972
- --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
13973
- --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13974
- --pf-v6-c-masthead__brand--MarginInlineEnd: var(--pf-t--global--spacer--md);
13975
- --pf-v6-c-masthead__brand--MaxHeight: 2.375rem;
13976
- --pf-v6-c-masthead__toggle--Size: var(--pf-t--global--icon--size--xl);
13977
- --pf-v6-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
13978
- --pf-v6-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
13979
- --pf-v6-c-masthead--m-display-stack__main--Order: -1;
13980
- --pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd: var(--pf-v6-c-masthead--RowGap);
13981
- --pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
13982
- --pf-v6-c-masthead--m-display-stack__content--GridColumn: 2;
13983
- --pf-v6-c-masthead--m-display-stack__content--Order: 1;
13984
- --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
13985
- --pf-v6-c-masthead--m-display-inline__main--GridColumn: 2;
13986
- --pf-v6-c-masthead--m-display-inline__main--Order: 0;
13987
- --pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd: 0;
13988
- --pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd: 0;
13989
- --pf-v6-c-masthead--m-display-inline__content--GridColumn: 3;
13990
- --pf-v6-c-masthead--m-display-inline__content--Order: 0;
13991
- --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
13992
- --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
13993
- --pf-v6-c-masthead--c-toolbar--Width: 100%;
13994
- --pf-v6-c-masthead--c-toolbar--PaddingBlock: 0;
13995
- --pf-v6-c-masthead--c-toolbar--PaddingInline: 0;
14251
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list, .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list {
14252
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
13996
14253
  }
13997
14254
 
13998
- .pf-v6-c-masthead {
13999
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
14000
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
14001
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
14002
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
14003
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
14004
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
14005
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
14006
- display: grid;
14007
- grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
14008
- row-gap: var(--pf-v6-c-masthead--RowGap);
14009
- column-gap: var(--pf-v6-c-masthead--ColumnGap);
14010
- align-items: start;
14011
- min-width: 0;
14012
- padding-block-start: var(--pf-v6-c-masthead--PaddingBlockStart, var(--pf-v6-c-masthead--PaddingBlock));
14013
- padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock));
14014
- padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline));
14015
- padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
14016
- background-color: var(--pf-v6-c-masthead--BackgroundColor);
14255
+ .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu {
14256
+ position: absolute;
14257
+ inset-block-start: var(--pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart);
14258
+ inset-inline-start: 100%;
14259
+ width: 100%;
14260
+ box-shadow: none;
14261
+ transition: var(--pf-v6-c-menu--m-drilldown--c-menu--Transition);
14017
14262
  }
14018
14263
 
14019
- .pf-v6-c-masthead .pf-v6-c-toolbar {
14020
- --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
14021
- --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-v6-c-masthead--c-toolbar--PaddingBlock);
14022
- --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-masthead--c-toolbar--PaddingInline);
14023
- --pf-v6-c-toolbar__content--MinWidth: 0;
14264
+ .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in {
14265
+ transform: translateX(-100%);
14024
14266
  }
14025
14267
 
14026
- @media screen and (min-width: 768px) {
14027
- :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
14028
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
14029
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
14030
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
14031
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
14032
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
14033
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
14034
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
14035
- }
14036
- }
14037
- .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
14038
- flex-wrap: nowrap;
14039
- min-width: 0;
14268
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu.pf-m-drilled-in {
14269
+ transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
14040
14270
  }
14041
14271
 
14042
- .pf-v6-c-masthead .pf-v6-c-toolbar__expandable-content {
14043
- inset-block-start: 100%;
14044
- border-block-start: var(--pf-v6-c-masthead__expandable-content--BorderBlockStart);
14045
- box-shadow: var(--pf-v6-c-masthead__expandable-content--BoxShadow);
14272
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list {
14273
+ overflow: hidden;
14274
+ visibility: visible;
14275
+ transition: var(--pf-v6-c-menu--m-drilldown__list--Transition);
14046
14276
  }
14047
14277
 
14048
- .pf-v6-c-masthead.pf-m-display-stack {
14049
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
14050
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
14051
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
14052
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
14053
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
14054
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
14055
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
14278
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list .pf-v6-c-menu__list {
14279
+ --pf-v6-c-menu__list--PaddingBlockStart: 0;
14280
+ --pf-v6-c-menu__list--PaddingBlockEnd: 0;
14056
14281
  }
14057
14282
 
14058
- .pf-v6-c-masthead.pf-m-display-inline {
14059
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
14060
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
14061
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
14062
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
14063
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
14064
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
14065
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
14283
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path .pf-v6-c-menu {
14284
+ z-index: var(--pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
14066
14285
  }
14067
14286
 
14068
- .pf-v6-c-masthead.pf-m-inset-none {
14069
- padding-inline-start: 0;
14070
- padding-inline-end: 0;
14287
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-current-path > .pf-v6-c-menu {
14288
+ overflow: visible;
14071
14289
  }
14072
14290
 
14073
- .pf-v6-c-masthead.pf-m-inset-sm {
14074
- padding-inline-start: var(--pf-t--global--spacer--sm);
14075
- padding-inline-end: var(--pf-t--global--spacer--sm);
14291
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static > .pf-v6-c-menu {
14292
+ position: static;
14076
14293
  }
14077
14294
 
14078
- .pf-v6-c-masthead.pf-m-inset-md {
14079
- padding-inline-start: var(--pf-t--global--spacer--md);
14080
- padding-inline-end: var(--pf-t--global--spacer--md);
14295
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item.pf-m-static:hover {
14296
+ background-color: transparent;
14081
14297
  }
14082
14298
 
14083
- .pf-v6-c-masthead.pf-m-inset-lg {
14084
- padding-inline-start: var(--pf-t--global--spacer--lg);
14085
- padding-inline-end: var(--pf-t--global--spacer--lg);
14299
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item:not(.pf-m-current-path) .pf-v6-c-menu {
14300
+ display: none;
14086
14301
  }
14087
14302
 
14088
- .pf-v6-c-masthead.pf-m-inset-xl {
14089
- padding-inline-start: var(--pf-t--global--spacer--xl);
14090
- padding-inline-end: var(--pf-t--global--spacer--xl);
14303
+ .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__item {
14304
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
14091
14305
  }
14092
14306
 
14093
- .pf-v6-c-masthead.pf-m-inset-2xl {
14094
- padding-inline-start: var(--pf-t--global--spacer--2xl);
14095
- padding-inline-end: var(--pf-t--global--spacer--2xl);
14307
+ .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list {
14308
+ overflow: visible;
14309
+ visibility: hidden;
14096
14310
  }
14097
14311
 
14098
- .pf-v6-c-masthead,
14099
- .pf-v6-c-masthead__main {
14100
- position: relative;
14312
+ .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-divider,
14313
+ .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item:not(.pf-m-current-path) {
14314
+ display: none;
14101
14315
  }
14102
14316
 
14103
- .pf-v6-c-masthead__main,
14104
- .pf-v6-c-masthead__content,
14105
- .pf-v6-c-masthead__logo,
14106
- .pf-v6-c-masthead__brand {
14107
- display: flex;
14108
- align-self: stretch;
14317
+ .pf-v6-c-menu.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list > .pf-v6-c-menu__list-item.pf-m-current-path {
14318
+ visibility: hidden;
14109
14319
  }
14110
14320
 
14111
- .pf-v6-c-masthead__main,
14112
- .pf-v6-c-masthead__brand,
14113
- .pf-v6-c-masthead__content {
14114
- min-width: 0.25rem;
14321
+ .pf-v6-c-menu.pf-m-plain {
14322
+ --pf-v6-c-menu--BoxShadow: var(--pf-v6-c-menu--m-plain--BoxShadow);
14115
14323
  }
14116
14324
 
14117
- .pf-v6-c-masthead__main {
14118
- grid-column: var(--pf-v6-c-masthead__main--GridColumn);
14119
- row-gap: var(--pf-v6-c-masthead__main--RowGap, var(--pf-v6-c-masthead--RowGap));
14120
- align-items: var(--pf-v6-c-masthead__main--AlignItems, var(--pf-v6-c-masthead--AlignItems));
14121
- order: var(--pf-v6-c-masthead__main--Order);
14122
- padding-block-end: var(--pf-v6-c-masthead__main--PaddingBlockEnd);
14123
- border-block-end: var(--pf-v6-c-masthead__main--BorderBlockEnd);
14325
+ .pf-v6-c-menu.pf-m-scrollable {
14326
+ --pf-v6-c-menu__content--MaxHeight: var(--pf-v6-c-menu--m-scrollable__content--MaxHeight);
14327
+ --pf-v6-c-menu__footer--BoxShadow: var(--pf-v6-c-menu--m-scrollable__footer--BoxShadow);
14328
+ --pf-v6-c-menu__footer--PaddingBlockStart: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
14329
+ --pf-v6-c-menu__footer--PaddingBlockEnd: calc(var(--pf-v6-c-menu__item--PaddingBlockStart) + var(--pf-v6-c-menu--RowGap));
14330
+ overflow: hidden;
14124
14331
  }
14125
14332
 
14126
- .pf-v6-c-masthead__content {
14127
- flex-wrap: wrap;
14128
- grid-column: var(--pf-v6-c-masthead__content--GridColumn);
14129
- grid-column-end: -1;
14130
- row-gap: var(--pf-v6-c-masthead__content-RowGap, var(--pf-v6-c-masthead--RowGap));
14131
- column-gap: var(--pf-v6-c-masthead__content-ColumnGap, var(--pf-v6-c-masthead--ColumnGap));
14132
- align-items: var(--pf-v6-c-masthead__content--AlignItems, var(--pf-v6-c-masthead--AlignItems));
14133
- order: var(--pf-v6-c-masthead__content--Order);
14333
+ .pf-v6-c-menu.pf-m-scrollable:has(.pf-v6-c-menu__footer) {
14334
+ --pf-v6-c-menu--PaddingBlockEnd: 0;
14134
14335
  }
14135
14336
 
14136
- .pf-v6-c-masthead__brand {
14137
- align-items: var(--pf-v6-c-masthead__brand--AlignItems, var(--pf-v6-c-masthead--AlignItems));
14138
- max-height: var(--pf-v6-c-masthead__brand--MaxHeight);
14139
- margin-inline-end: var(--pf-v6-c-masthead__brand--MarginInlineEnd);
14337
+ .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__content,
14338
+ .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list {
14339
+ overflow-y: auto;
14140
14340
  }
14141
14341
 
14142
- .pf-v6-c-masthead__toggle {
14143
- --pf-v6-c-button--FontSize: var(--pf-v6-c-masthead__toggle--Size);
14342
+ .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__content {
14343
+ position: relative;
14344
+ z-index: var(--pf-v6-c-menu--ZIndex);
14345
+ margin-block-start: calc(var(--pf-v6-c-menu--RowGap) * -1);
14346
+ margin-block-end: calc(var(--pf-v6-c-menu--RowGap) * -1);
14347
+ overflow: hidden;
14144
14348
  }
14145
14349
 
14146
- .pf-v6-c-masthead__expandable-content {
14147
- row-gap: var(--pf-v6-c-masthead__expandable-content-RowGap, var(--pf-v6-c-masthead--RowGap));
14148
- background-color: var(--pf-v6-c-masthead--BackgroundColor);
14350
+ .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list {
14351
+ padding-block-start: var(--pf-v6-c-menu--RowGap);
14352
+ padding-block-end: var(--pf-v6-c-menu--RowGap);
14149
14353
  }
14150
14354
 
14151
- .pf-v6-c-masthead.pf-m-display-stack {
14152
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
14153
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
14154
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
14155
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
14156
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
14157
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
14158
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
14355
+ .pf-v6-c-menu__header {
14356
+ padding-block-start: var(--pf-v6-c-menu__header--PaddingBlockStart);
14357
+ padding-block-end: var(--pf-v6-c-menu__header--PaddingBlockEnd);
14358
+ padding-inline-start: var(--pf-v6-c-menu__header--PaddingInlineStart);
14359
+ padding-inline-end: var(--pf-v6-c-menu__header--PaddingInlineEnd);
14159
14360
  }
14160
14361
 
14161
- .pf-v6-c-masthead.pf-m-display-inline {
14162
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
14163
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
14164
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
14165
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
14166
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
14167
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
14168
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
14362
+ .pf-v6-c-menu__search {
14363
+ padding-block-start: var(--pf-v6-c-menu__search--PaddingBlockStart);
14364
+ padding-block-end: var(--pf-v6-c-menu__search--PaddingBlockEnd);
14365
+ padding-inline-start: var(--pf-v6-c-menu__search--PaddingInlineStart);
14366
+ padding-inline-end: var(--pf-v6-c-menu__search--PaddingInlineEnd);
14169
14367
  }
14170
14368
 
14171
- .pf-v6-c-masthead.pf-m-inset-none {
14172
- padding-inline-start: 0;
14173
- padding-inline-end: 0;
14369
+ .pf-v6-c-menu__footer {
14370
+ padding-block-start: var(--pf-v6-c-menu__footer--PaddingBlockStart);
14371
+ padding-block-end: var(--pf-v6-c-menu__footer--PaddingBlockEnd);
14372
+ padding-inline-start: var(--pf-v6-c-menu__footer--PaddingInlineStart);
14373
+ padding-inline-end: var(--pf-v6-c-menu__footer--PaddingInlineEnd);
14374
+ box-shadow: var(--pf-v6-c-menu__footer--BoxShadow);
14174
14375
  }
14175
14376
 
14176
- .pf-v6-c-masthead.pf-m-inset-sm {
14177
- padding-inline-start: var(--pf-t--global--spacer--sm);
14178
- padding-inline-end: var(--pf-t--global--spacer--sm);
14377
+ .pf-v6-c-menu__content {
14378
+ flex-direction: column;
14379
+ row-gap: var(--pf-v6-c-menu__content--RowGap);
14380
+ height: var(--pf-v6-c-menu__content--Height);
14381
+ max-height: var(--pf-v6-c-menu__content--MaxHeight);
14179
14382
  }
14180
14383
 
14181
- .pf-v6-c-masthead.pf-m-inset-md {
14182
- padding-inline-start: var(--pf-t--global--spacer--md);
14183
- padding-inline-end: var(--pf-t--global--spacer--md);
14384
+ .pf-v6-c-menu__content .pf-v6-c-menu__content {
14385
+ --pf-v6-c-menu__content--Height: auto;
14184
14386
  }
14185
14387
 
14186
- .pf-v6-c-masthead.pf-m-inset-lg {
14187
- padding-inline-start: var(--pf-t--global--spacer--lg);
14188
- padding-inline-end: var(--pf-t--global--spacer--lg);
14388
+ .pf-v6-c-menu__list :where(.pf-v6-c-divider:is(li)) {
14389
+ margin-block-start: var(--pf-v6-c-menu__list--divider--MarginBlockStart);
14390
+ margin-block-end: var(--pf-v6-c-menu__list--divider--MarginBlockEnd);
14189
14391
  }
14190
14392
 
14191
- .pf-v6-c-masthead.pf-m-inset-xl {
14192
- padding-inline-start: var(--pf-t--global--spacer--xl);
14193
- padding-inline-end: var(--pf-t--global--spacer--xl);
14393
+ .pf-v6-c-menu__list-item {
14394
+ align-items: baseline;
14395
+ min-width: 0;
14396
+ transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
14397
+ transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
14398
+ transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
14194
14399
  }
14195
14400
 
14196
- .pf-v6-c-masthead.pf-m-inset-2xl {
14197
- padding-inline-start: var(--pf-t--global--spacer--2xl);
14198
- padding-inline-end: var(--pf-t--global--spacer--2xl);
14401
+ .pf-v6-c-menu__list-item > * {
14402
+ position: relative;
14199
14403
  }
14200
14404
 
14201
- @media (min-width: 576px) {
14202
- .pf-v6-c-masthead.pf-m-display-stack-on-sm {
14203
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
14204
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
14205
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
14206
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
14207
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
14208
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
14209
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
14210
- }
14211
- .pf-v6-c-masthead.pf-m-display-inline-on-sm {
14212
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
14213
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
14214
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
14215
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
14216
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
14217
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
14218
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
14219
- }
14405
+ .pf-v6-c-menu__list-item::before {
14406
+ position: absolute;
14407
+ inset: 0;
14408
+ content: "";
14409
+ background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
14410
+ transition: inherit;
14220
14411
  }
14221
- .pf-v6-c-masthead.pf-m-inset-none {
14222
- padding-inline-start: 0;
14223
- padding-inline-end: 0;
14412
+
14413
+ .pf-v6-c-menu__list-item.pf-m-load {
14414
+ --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);
14224
14415
  }
14225
14416
 
14226
- .pf-v6-c-masthead.pf-m-inset-sm {
14227
- padding-inline-start: var(--pf-t--global--spacer--sm);
14228
- padding-inline-end: var(--pf-t--global--spacer--sm);
14417
+ .pf-v6-c-menu__list-item.pf-m-loading {
14418
+ justify-content: center;
14419
+ overflow: hidden;
14420
+ pointer-events: none;
14229
14421
  }
14230
14422
 
14231
- .pf-v6-c-masthead.pf-m-inset-md {
14232
- padding-inline-start: var(--pf-t--global--spacer--md);
14233
- padding-inline-end: var(--pf-t--global--spacer--md);
14423
+ .pf-v6-c-menu__list-item.pf-m-loading .pf-v6-c-menu__item-text {
14424
+ text-align: center;
14234
14425
  }
14235
14426
 
14236
- .pf-v6-c-masthead.pf-m-inset-lg {
14237
- padding-inline-start: var(--pf-t--global--spacer--lg);
14238
- padding-inline-end: var(--pf-t--global--spacer--lg);
14427
+ .pf-v6-c-menu__list-item.pf-m-danger {
14428
+ --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-danger--Color);
14239
14429
  }
14240
14430
 
14241
- .pf-v6-c-masthead.pf-m-inset-xl {
14242
- padding-inline-start: var(--pf-t--global--spacer--xl);
14243
- padding-inline-end: var(--pf-t--global--spacer--xl);
14431
+ .pf-v6-c-menu__list-item.pf-m-danger:is(:hover, :focus) {
14432
+ --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-danger--hover--Color, var(--pf-v6-c-menu__list-item--m-danger--Color));
14244
14433
  }
14245
14434
 
14246
- .pf-v6-c-masthead.pf-m-inset-2xl {
14247
- padding-inline-start: var(--pf-t--global--spacer--2xl);
14248
- padding-inline-end: var(--pf-t--global--spacer--2xl);
14435
+ .pf-v6-c-menu__list-item:has(.pf-v6-c-menu__item-action) {
14436
+ padding-inline-end: var(--pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd);
14249
14437
  }
14250
14438
 
14251
- @media (min-width: 768px) {
14252
- .pf-v6-c-masthead.pf-m-display-stack-on-md {
14253
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
14254
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
14255
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
14256
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
14257
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
14258
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
14259
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
14260
- }
14261
- .pf-v6-c-masthead.pf-m-display-inline-on-md {
14262
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
14263
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
14264
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
14265
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
14266
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
14267
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
14268
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
14269
- }
14270
- }
14271
- .pf-v6-c-masthead.pf-m-inset-none {
14272
- padding-inline-start: 0;
14273
- padding-inline-end: 0;
14439
+ .pf-v6-c-menu__list-item.pf-m-focus, .pf-v6-c-menu__list-item:focus-within, .pf-v6-c-menu__list-item:has(> :hover) {
14440
+ --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-v6-c-menu__list-item--hover--BackgroundColor);
14274
14441
  }
14275
14442
 
14276
- .pf-v6-c-masthead.pf-m-inset-sm {
14277
- padding-inline-start: var(--pf-t--global--spacer--sm);
14278
- padding-inline-end: var(--pf-t--global--spacer--sm);
14443
+ .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-select-icon,
14444
+ .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-select-icon,
14445
+ .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-select-icon,
14446
+ .pf-v6-c-menu__list-item:has(> :hover) .pf-v6-c-menu__item-external-icon {
14447
+ opacity: 1;
14279
14448
  }
14280
14449
 
14281
- .pf-v6-c-masthead.pf-m-inset-md {
14282
- padding-inline-start: var(--pf-t--global--spacer--md);
14283
- padding-inline-end: var(--pf-t--global--spacer--md);
14450
+ .pf-v6-c-menu__item {
14451
+ flex-basis: 100%;
14452
+ flex-direction: column;
14453
+ min-width: 0;
14454
+ padding-block-start: var(--pf-v6-c-menu__item--PaddingBlockStart);
14455
+ padding-block-end: var(--pf-v6-c-menu__item--PaddingBlockEnd);
14456
+ padding-inline-start: var(--pf-v6-c-menu__item--PaddingInlineStart);
14457
+ padding-inline-end: var(--pf-v6-c-menu__item--PaddingInlineEnd);
14458
+ font-size: var(--pf-v6-c-menu__item--FontSize);
14459
+ font-weight: var(--pf-v6-c-menu__item--FontWeight);
14460
+ line-height: var(--pf-v6-c-menu__item--LineHeight);
14461
+ color: var(--pf-v6-c-menu__item--Color);
14462
+ text-align: start;
14463
+ text-decoration: none;
14464
+ background-color: var(--pf-v6-c-menu__item--BackgroundColor);
14465
+ border: 0;
14466
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
14467
+ --pf-v6-hidden-visible--visible--Display: flex;
14468
+ --pf-v6-hidden-visible--hidden--Display: none;
14469
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
14470
+ display: var(--pf-v6-hidden-visible--Display);
14284
14471
  }
14285
14472
 
14286
- .pf-v6-c-masthead.pf-m-inset-lg {
14287
- padding-inline-start: var(--pf-t--global--spacer--lg);
14288
- padding-inline-end: var(--pf-t--global--spacer--lg);
14473
+ .pf-v6-c-menu__item.pf-m-hidden {
14474
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
14289
14475
  }
14290
14476
 
14291
- .pf-v6-c-masthead.pf-m-inset-xl {
14292
- padding-inline-start: var(--pf-t--global--spacer--xl);
14293
- padding-inline-end: var(--pf-t--global--spacer--xl);
14477
+ @media screen and (min-width: 576px) {
14478
+ .pf-v6-c-menu__item.pf-m-hidden-on-sm {
14479
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
14480
+ }
14481
+ .pf-v6-c-menu__item.pf-m-visible-on-sm {
14482
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
14483
+ }
14294
14484
  }
14295
-
14296
- .pf-v6-c-masthead.pf-m-inset-2xl {
14297
- padding-inline-start: var(--pf-t--global--spacer--2xl);
14298
- padding-inline-end: var(--pf-t--global--spacer--2xl);
14485
+ @media screen and (min-width: 768px) {
14486
+ .pf-v6-c-menu__item.pf-m-hidden-on-md {
14487
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
14488
+ }
14489
+ .pf-v6-c-menu__item.pf-m-visible-on-md {
14490
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
14491
+ }
14299
14492
  }
14300
-
14301
- @media (min-width: 992px) {
14302
- .pf-v6-c-masthead.pf-m-display-stack-on-lg {
14303
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
14304
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
14305
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
14306
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
14307
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
14308
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
14309
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
14493
+ @media screen and (min-width: 992px) {
14494
+ .pf-v6-c-menu__item.pf-m-hidden-on-lg {
14495
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
14310
14496
  }
14311
- .pf-v6-c-masthead.pf-m-display-inline-on-lg {
14312
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
14313
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
14314
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
14315
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
14316
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
14317
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
14318
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
14497
+ .pf-v6-c-menu__item.pf-m-visible-on-lg {
14498
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
14319
14499
  }
14320
14500
  }
14321
- .pf-v6-c-masthead.pf-m-inset-none {
14322
- padding-inline-start: 0;
14323
- padding-inline-end: 0;
14501
+ @media screen and (min-width: 1200px) {
14502
+ .pf-v6-c-menu__item.pf-m-hidden-on-xl {
14503
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
14504
+ }
14505
+ .pf-v6-c-menu__item.pf-m-visible-on-xl {
14506
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
14507
+ }
14324
14508
  }
14325
-
14326
- .pf-v6-c-masthead.pf-m-inset-sm {
14327
- padding-inline-start: var(--pf-t--global--spacer--sm);
14328
- padding-inline-end: var(--pf-t--global--spacer--sm);
14509
+ @media screen and (min-width: 1450px) {
14510
+ .pf-v6-c-menu__item.pf-m-hidden-on-2xl {
14511
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
14512
+ }
14513
+ .pf-v6-c-menu__item.pf-m-visible-on-2xl {
14514
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
14515
+ }
14329
14516
  }
14330
-
14331
- .pf-v6-c-masthead.pf-m-inset-md {
14332
- padding-inline-start: var(--pf-t--global--spacer--md);
14333
- padding-inline-end: var(--pf-t--global--spacer--md);
14517
+ :where(label).pf-v6-c-menu__item {
14518
+ cursor: pointer;
14334
14519
  }
14335
14520
 
14336
- .pf-v6-c-masthead.pf-m-inset-lg {
14337
- padding-inline-start: var(--pf-t--global--spacer--lg);
14338
- padding-inline-end: var(--pf-t--global--spacer--lg);
14521
+ .pf-v6-c-menu__item.pf-m-selected {
14522
+ --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
14339
14523
  }
14340
14524
 
14341
- .pf-v6-c-masthead.pf-m-inset-xl {
14342
- padding-inline-start: var(--pf-t--global--spacer--xl);
14343
- padding-inline-end: var(--pf-t--global--spacer--xl);
14525
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
14526
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
14527
+ opacity: 1;
14344
14528
  }
14345
14529
 
14346
- .pf-v6-c-masthead.pf-m-inset-2xl {
14347
- padding-inline-start: var(--pf-t--global--spacer--2xl);
14348
- padding-inline-end: var(--pf-t--global--spacer--2xl);
14530
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
14531
+ color: var(--pf-v6-c-menu__item-external--Color);
14349
14532
  }
14350
14533
 
14351
- @media (min-width: 1200px) {
14352
- .pf-v6-c-masthead.pf-m-display-stack-on-xl {
14353
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
14354
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
14355
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
14356
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
14357
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
14358
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
14359
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
14360
- }
14361
- .pf-v6-c-masthead.pf-m-display-inline-on-xl {
14362
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
14363
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
14364
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
14365
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
14366
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
14367
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
14368
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
14369
- }
14534
+ .pf-v6-c-menu__item-select-icon {
14535
+ color: var(--pf-v6-c-menu__item-select-icon--Color);
14370
14536
  }
14371
- .pf-v6-c-masthead.pf-m-inset-none {
14372
- padding-inline-start: 0;
14373
- padding-inline-end: 0;
14537
+
14538
+ .pf-v6-c-menu__item-main {
14539
+ column-gap: var(--pf-v6-c-menu__item-main--ColumnGap);
14540
+ align-items: center;
14541
+ width: 100%;
14374
14542
  }
14375
14543
 
14376
- .pf-v6-c-masthead.pf-m-inset-sm {
14377
- padding-inline-start: var(--pf-t--global--spacer--sm);
14378
- padding-inline-end: var(--pf-t--global--spacer--sm);
14544
+ .pf-v6-c-menu__item-text {
14545
+ overflow: hidden;
14546
+ text-overflow: ellipsis;
14547
+ white-space: nowrap;
14548
+ flex-grow: 1;
14379
14549
  }
14380
14550
 
14381
- .pf-v6-c-masthead.pf-m-inset-md {
14382
- padding-inline-start: var(--pf-t--global--spacer--md);
14383
- padding-inline-end: var(--pf-t--global--spacer--md);
14551
+ .pf-v6-c-menu__group-title {
14552
+ padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
14553
+ padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
14554
+ padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
14555
+ padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
14556
+ font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
14557
+ font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
14558
+ color: var(--pf-v6-c-menu__group-title--Color);
14384
14559
  }
14385
14560
 
14386
- .pf-v6-c-masthead.pf-m-inset-lg {
14387
- padding-inline-start: var(--pf-t--global--spacer--lg);
14388
- padding-inline-end: var(--pf-t--global--spacer--lg);
14561
+ .pf-v6-c-menu__item-description {
14562
+ font-size: var(--pf-v6-c-menu__item-description--FontSize);
14563
+ color: var(--pf-v6-c-menu__item-description--Color);
14564
+ word-break: break-word;
14389
14565
  }
14390
14566
 
14391
- .pf-v6-c-masthead.pf-m-inset-xl {
14392
- padding-inline-start: var(--pf-t--global--spacer--xl);
14393
- padding-inline-end: var(--pf-t--global--spacer--xl);
14567
+ .pf-v6-c-menu__item-check .pf-v6-c-check {
14568
+ --pf-v6-c-check__input--TranslateY: none;
14394
14569
  }
14395
14570
 
14396
- .pf-v6-c-masthead.pf-m-inset-2xl {
14397
- padding-inline-start: var(--pf-t--global--spacer--2xl);
14398
- padding-inline-end: var(--pf-t--global--spacer--2xl);
14571
+ .pf-v6-c-menu__item-toggle-icon {
14572
+ color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
14399
14573
  }
14400
14574
 
14401
- @media (min-width: 1450px) {
14402
- .pf-v6-c-masthead.pf-m-display-stack-on-2xl {
14403
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
14404
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
14405
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
14406
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
14407
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
14408
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
14409
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
14410
- }
14411
- .pf-v6-c-masthead.pf-m-display-inline-on-2xl {
14412
- --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
14413
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
14414
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
14415
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
14416
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
14417
- --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
14418
- --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
14419
- }
14575
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
14576
+ scale: -1 1;
14577
+ }
14578
+
14579
+ .pf-v6-c-menu__item-icon {
14580
+ color: var(--pf-v6-c-menu__item--icon--Color, inherit);
14420
14581
  }
14421
- .pf-v6-c-masthead.pf-m-inset-none {
14422
- padding-inline-start: 0;
14423
- padding-inline-end: 0;
14582
+
14583
+ .pf-v6-c-menu__item-select-icon,
14584
+ .pf-v6-c-menu__item-external-icon {
14585
+ opacity: 0;
14424
14586
  }
14425
14587
 
14426
- .pf-v6-c-masthead.pf-m-inset-sm {
14427
- padding-inline-start: var(--pf-t--global--spacer--sm);
14428
- padding-inline-end: var(--pf-t--global--spacer--sm);
14588
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button,
14589
+ .pf-v6-c-menu__item-action.pf-m-favorited,
14590
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover,
14591
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
14592
+ --pf-v6-c-button--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
14593
+ --pf-v6-c-menu__item-action--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
14429
14594
  }
14430
14595
 
14431
- .pf-v6-c-masthead.pf-m-inset-md {
14432
- padding-inline-start: var(--pf-t--global--spacer--md);
14433
- padding-inline-end: var(--pf-t--global--spacer--md);
14596
+ .pf-v6-c-menu__breadcrumb {
14597
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
14598
+ padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
14599
+ padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
14600
+ padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
14601
+ padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
14434
14602
  }
14435
14603
 
14436
- .pf-v6-c-masthead.pf-m-inset-lg {
14437
- padding-inline-start: var(--pf-t--global--spacer--lg);
14438
- padding-inline-end: var(--pf-t--global--spacer--lg);
14604
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
14605
+ min-width: auto;
14606
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
14607
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
14439
14608
  }
14440
14609
 
14441
- .pf-v6-c-masthead.pf-m-inset-xl {
14442
- padding-inline-start: var(--pf-t--global--spacer--xl);
14443
- padding-inline-end: var(--pf-t--global--spacer--xl);
14610
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
14611
+ height: auto;
14444
14612
  }
14445
14613
 
14446
- .pf-v6-c-masthead.pf-m-inset-2xl {
14447
- padding-inline-start: var(--pf-t--global--spacer--2xl);
14448
- padding-inline-end: var(--pf-t--global--spacer--2xl);
14614
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
14615
+ --pf-v6-c-menu-toggle--BorderWidth: 0;
14616
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
14617
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
14449
14618
  }
14450
14619
 
14451
14620
  :where(:root, .pf-v6-c-modal-box) {
@@ -14637,29 +14806,241 @@ ul.pf-v6-c-list {
14637
14806
  -webkit-overflow-scrolling: touch;
14638
14807
  }
14639
14808
 
14640
- .pf-v6-c-modal-box__body:last-child {
14641
- padding-block-end: var(--pf-v6-c-modal-box__body--last-child--PaddingBlockEnd);
14809
+ .pf-v6-c-modal-box__body:last-child {
14810
+ padding-block-end: var(--pf-v6-c-modal-box__body--last-child--PaddingBlockEnd);
14811
+ }
14812
+
14813
+ .pf-v6-c-modal-box__footer {
14814
+ display: flex;
14815
+ flex: 0 0 auto;
14816
+ align-items: center;
14817
+ padding-block-start: var(--pf-v6-c-modal-box__footer--PaddingBlockStart);
14818
+ padding-block-end: var(--pf-v6-c-modal-box__footer--PaddingBlockEnd);
14819
+ padding-inline-start: var(--pf-v6-c-modal-box__footer--PaddingInlineStart);
14820
+ padding-inline-end: var(--pf-v6-c-modal-box__footer--PaddingInlineEnd);
14821
+ }
14822
+
14823
+ .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
14824
+ margin-inline-end: var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd);
14825
+ }
14826
+
14827
+ @media screen and (min-width: 576px) {
14828
+ .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
14829
+ --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd);
14830
+ }
14831
+ }
14832
+ :where(:root, .pf-v6-c-multiple-file-upload) {
14833
+ --pf-v6-c-multiple-file-upload--GridTemplateColumns: 1fr;
14834
+ --pf-v6-c-multiple-file-upload--Gap: var(--pf-t--global--spacer--md);
14835
+ --pf-v6-c-multiple-file-upload__main--TextAlign: center;
14836
+ --pf-v6-c-multiple-file-upload__main--GridTemplateColumns: auto;
14837
+ --pf-v6-c-multiple-file-upload__main--GridTemplateRows: auto;
14838
+ --pf-v6-c-multiple-file-upload__main--GridTemplateAreas:
14839
+ "title"
14840
+ "upload"
14841
+ "info";
14842
+ --pf-v6-c-multiple-file-upload__main--PaddingBlockStart: var(--pf-t--global--spacer--xl);
14843
+ --pf-v6-c-multiple-file-upload__main--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
14844
+ --pf-v6-c-multiple-file-upload__main--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
14845
+ --pf-v6-c-multiple-file-upload__main--PaddingInlineStart: var(--pf-t--global--spacer--xl);
14846
+ --pf-v6-c-multiple-file-upload__main--BorderWidth: var(--pf-t--global--border--width--regular);
14847
+ --pf-v6-c-multiple-file-upload__main--BorderStyle: dashed;
14848
+ --pf-v6-c-multiple-file-upload__main--BorderColor: var(--pf-t--global--border--color--default);
14849
+ --pf-v6-c-multiple-file-upload__main--BorderRadius: var(--pf-t--global--border--radius--medium);
14850
+ --pf-v6-c-multiple-file-upload__title--Display: grid;
14851
+ --pf-v6-c-multiple-file-upload__title--GridTemplateColumns: auto;
14852
+ --pf-v6-c-multiple-file-upload__title--Gap: var(--pf-t--global--spacer--lg);
14853
+ --pf-v6-c-multiple-file-upload__title-text--Color: var(--pf-t--global--text--color--regular);
14854
+ --pf-v6-c-multiple-file-upload__title-text--FontFamily: var(--pf-t--global--font--family--heading);
14855
+ --pf-v6-c-multiple-file-upload__title-text--FontSize: var(--pf-t--global--font--size--heading--sm);
14856
+ --pf-v6-c-multiple-file-upload__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
14857
+ --pf-v6-c-multiple-file-upload__title-icon--Color: var(--pf-t--global--icon--color--regular);
14858
+ --pf-v6-c-multiple-file-upload__title-icon--FontSize: var(--pf-t--global--icon--size--xl);
14859
+ --pf-v6-c-multiple-file-upload__title-text-separator--Display: block;
14860
+ --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart: var(--pf-t--global--spacer--sm);
14861
+ --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockEnd: var(--pf-t--global--spacer--sm);
14862
+ --pf-v6-c-multiple-file-upload__title-text-separator--Color: var(--pf-t--global--text--color--regular);
14863
+ --pf-v6-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-t--global--font--family--body);
14864
+ --pf-v6-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-t--global--font--size--body--lg);
14865
+ --pf-v6-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-t--global--font--weight--body);
14866
+ --pf-v6-c-multiple-file-upload__info--FontSize: var(--pf-t--global--font--size--body--default);
14867
+ --pf-v6-c-multiple-file-upload__info--Color: var(--pf-t--global--text--color--subtle);
14868
+ --pf-v6-c-multiple-file-upload__info--MarginBlockStart: var(--pf-t--global--spacer--lg);
14869
+ --pf-v6-c-multiple-file-upload--m-drag-over__main--BorderStyle: dashed;
14870
+ --pf-v6-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-t--global--border--color--clicked);
14871
+ --pf-v6-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
14872
+ --pf-v6-c-multiple-file-upload--m-horizontal__main--TextAlign: start;
14873
+ --pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
14874
+ --pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
14875
+ "title upload"
14876
+ "info upload";
14877
+ --pf-v6-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
14878
+ --pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
14879
+ --pf-v6-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
14880
+ --pf-v6-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-t--global--spacer--sm);
14881
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
14882
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
14883
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
14884
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginBlockStart: 0;
14885
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily: var(--pf-t--global--font--family--heading);
14886
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize: var(--pf-t--global--font--size--heading--xs);
14887
+ --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight: var(--pf-t--global--font--weight--heading);
14888
+ --pf-v6-c-multiple-file-upload--m-horizontal__info--MarginBlockStart: 0;
14889
+ --pf-v6-c-multiple-file-upload__status--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14890
+ --pf-v6-c-multiple-file-upload__status--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
14891
+ --pf-v6-c-multiple-file-upload__status--PaddingInlineStart: var(--pf-t--global--spacer--md);
14892
+ --pf-v6-c-multiple-file-upload__status--PaddingInlineEnd: var(--pf-t--global--spacer--md);
14893
+ --pf-v6-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
14894
+ --pf-v6-c-multiple-file-upload__status-progress--Gap: var(--pf-t--global--spacer--sm);
14895
+ --pf-v6-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--brand--default);
14896
+ --pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
14897
+ --pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
14898
+ --pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
14899
+ --pf-v6-c-multiple-file-upload__status-item--Gap: var(--pf-t--global--spacer--sm);
14900
+ --pf-v6-c-multiple-file-upload__status-item--BorderWidth: var(--pf-t--global--border--width--regular);
14901
+ --pf-v6-c-multiple-file-upload__status-item--BorderColor: var(--pf-t--global--border--color--default);
14902
+ --pf-v6-c-multiple-file-upload__status-item-icon--Color: var(--pf-t--global--icon--color--regular);
14903
+ --pf-v6-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
14904
+ --pf-v6-c-multiple-file-upload__status-item-progress--Gap: var(--pf-t--global--spacer--sm);
14905
+ --pf-v6-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-t--global--text--color--regular);
14906
+ --pf-v6-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-t--global--text--color--subtle);
14907
+ }
14908
+
14909
+ .pf-v6-c-multiple-file-upload {
14910
+ display: grid;
14911
+ grid-template-columns: var(--pf-v6-c-multiple-file-upload--GridTemplateColumns);
14912
+ gap: var(--pf-v6-c-multiple-file-upload--Gap);
14913
+ }
14914
+
14915
+ .pf-v6-c-multiple-file-upload.pf-m-horizontal {
14916
+ --pf-v6-c-multiple-file-upload--GridTemplateColumns: var(--pf-v6-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
14917
+ --pf-v6-c-multiple-file-upload__main--TextAlign: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--TextAlign);
14918
+ --pf-v6-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
14919
+ --pf-v6-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
14920
+ --pf-v6-c-multiple-file-upload__main--Gap: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--Gap);
14921
+ --pf-v6-c-multiple-file-upload__main--PaddingBlockEnd: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBlockEnd);
14922
+ --pf-v6-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-v6-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
14923
+ --pf-v6-c-multiple-file-upload__title--Gap: var(--pf-v6-c-multiple-file-upload--m-horizontal__title--Gap);
14924
+ --pf-v6-c-multiple-file-upload__title-icon--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-icon--FontSize);
14925
+ --pf-v6-c-multiple-file-upload__title-text--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text--FontSize);
14926
+ --pf-v6-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily);
14927
+ --pf-v6-c-multiple-file-upload__title-text-separator--Display: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
14928
+ --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginBlockStart);
14929
+ --pf-v6-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize);
14930
+ --pf-v6-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight);
14931
+ --pf-v6-c-multiple-file-upload__info--MarginBlockStart: var(--pf-v6-c-multiple-file-upload--m-horizontal__info--MarginBlockStart);
14932
+ }
14933
+
14934
+ .pf-v6-c-multiple-file-upload.pf-m-drag-over {
14935
+ --pf-v6-c-multiple-file-upload__main--BorderStyle: var(--pf-v6-c-multiple-file-upload--m-drag-over__main--BorderStyle);
14936
+ --pf-v6-c-multiple-file-upload__main--BorderColor: var(--pf-v6-c-multiple-file-upload--m-drag-over__main--BorderColor);
14937
+ }
14938
+
14939
+ .pf-v6-c-multiple-file-upload__main {
14940
+ display: grid;
14941
+ grid-template-areas: var(--pf-v6-c-multiple-file-upload__main--GridTemplateAreas);
14942
+ grid-template-rows: var(--pf-v6-c-multiple-file-upload__main--GridTemplateRows);
14943
+ grid-template-columns: var(--pf-v6-c-multiple-file-upload__main--GridTemplateColumns);
14944
+ gap: var(--pf-v6-c-multiple-file-upload__main--Gap);
14945
+ align-items: center;
14946
+ padding-block-start: var(--pf-v6-c-multiple-file-upload__main--PaddingBlockStart);
14947
+ padding-block-end: var(--pf-v6-c-multiple-file-upload__main--PaddingBlockEnd);
14948
+ padding-inline-start: var(--pf-v6-c-multiple-file-upload__main--PaddingInlineStart);
14949
+ padding-inline-end: var(--pf-v6-c-multiple-file-upload__main--PaddingInlineEnd);
14950
+ text-align: var(--pf-v6-c-multiple-file-upload__main--TextAlign);
14951
+ border: var(--pf-v6-c-multiple-file-upload__main--BorderWidth) var(--pf-v6-c-multiple-file-upload__main--BorderStyle) var(--pf-v6-c-multiple-file-upload__main--BorderColor);
14952
+ border-radius: var(--pf-v6-c-multiple-file-upload__main--BorderRadius);
14953
+ }
14954
+
14955
+ .pf-v6-c-multiple-file-upload__title {
14956
+ display: var(--pf-v6-c-multiple-file-upload__title--Display);
14957
+ grid-area: title;
14958
+ grid-template-columns: var(--pf-v6-c-multiple-file-upload__title--GridTemplateColumns);
14959
+ gap: var(--pf-v6-c-multiple-file-upload__title--Gap);
14960
+ }
14961
+
14962
+ .pf-v6-c-multiple-file-upload__title-icon {
14963
+ font-size: var(--pf-v6-c-multiple-file-upload__title-icon--FontSize);
14964
+ color: var(--pf-v6-c-multiple-file-upload__title-icon--Color);
14965
+ }
14966
+
14967
+ .pf-v6-c-multiple-file-upload__title-text {
14968
+ font-family: var(--pf-v6-c-multiple-file-upload__title-text--FontFamily);
14969
+ font-size: var(--pf-v6-c-multiple-file-upload__title-text--FontSize);
14970
+ font-weight: var(--pf-v6-c-multiple-file-upload__title-text--FontWeight);
14971
+ color: var(--pf-v6-c-multiple-file-upload__title-text--Color, inherit);
14972
+ }
14973
+
14974
+ .pf-v6-c-multiple-file-upload__title-text-separator {
14975
+ display: var(--pf-v6-c-multiple-file-upload__title-text-separator--Display);
14976
+ margin-block-start: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart);
14977
+ margin-block-end: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockEnd);
14978
+ font-family: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontFamily);
14979
+ font-size: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontSize);
14980
+ font-weight: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontWeight);
14981
+ color: var(--pf-v6-c-multiple-file-upload__title-text-separator--Color);
14982
+ }
14983
+
14984
+ .pf-v6-c-multiple-file-upload__upload {
14985
+ grid-area: upload;
14986
+ }
14987
+
14988
+ .pf-v6-c-multiple-file-upload__info {
14989
+ grid-area: info;
14990
+ margin-block-start: var(--pf-v6-c-multiple-file-upload__info--MarginBlockStart);
14991
+ font-size: var(--pf-v6-c-multiple-file-upload__info--FontSize);
14992
+ color: var(--pf-v6-c-multiple-file-upload__info--Color);
14993
+ }
14994
+
14995
+ .pf-v6-c-multiple-file-upload__status {
14996
+ padding-block-start: var(--pf-v6-c-multiple-file-upload__status--PaddingBlockStart);
14997
+ padding-block-end: var(--pf-v6-c-multiple-file-upload__status--PaddingBlockEnd);
14998
+ padding-inline-start: var(--pf-v6-c-multiple-file-upload__status--PaddingInlineStart);
14999
+ padding-inline-end: var(--pf-v6-c-multiple-file-upload__status--PaddingInlineEnd);
15000
+ }
15001
+
15002
+ .pf-v6-c-multiple-file-upload__status,
15003
+ .pf-v6-c-multiple-file-upload__status-item-main {
15004
+ min-width: 0;
15005
+ }
15006
+
15007
+ .pf-v6-c-multiple-file-upload__status-progress {
15008
+ display: grid;
15009
+ grid-template-columns: var(--pf-v6-c-multiple-file-upload__status-progress--GridTemplateColumns);
15010
+ gap: var(--pf-v6-c-multiple-file-upload__status-progress--Gap);
15011
+ }
15012
+
15013
+ .pf-v6-c-multiple-file-upload__status-progress-icon {
15014
+ color: var(--pf-v6-c-multiple-file-upload__status-progress-icon--Color);
15015
+ }
15016
+
15017
+ .pf-v6-c-multiple-file-upload__status-item {
15018
+ display: grid;
15019
+ grid-template-columns: var(--pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns);
15020
+ gap: var(--pf-v6-c-multiple-file-upload__status-item--Gap);
15021
+ padding-block-start: var(--pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart);
15022
+ padding-block-end: var(--pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd);
15023
+ border-block-end: var(--pf-v6-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v6-c-multiple-file-upload__status-item--BorderColor);
15024
+ }
15025
+
15026
+ .pf-v6-c-multiple-file-upload__status-item-icon {
15027
+ color: var(--pf-v6-c-multiple-file-upload__status-item-icon--Color);
14642
15028
  }
14643
15029
 
14644
- .pf-v6-c-modal-box__footer {
14645
- display: flex;
14646
- flex: 0 0 auto;
14647
- align-items: center;
14648
- padding-block-start: var(--pf-v6-c-modal-box__footer--PaddingBlockStart);
14649
- padding-block-end: var(--pf-v6-c-modal-box__footer--PaddingBlockEnd);
14650
- padding-inline-start: var(--pf-v6-c-modal-box__footer--PaddingInlineStart);
14651
- padding-inline-end: var(--pf-v6-c-modal-box__footer--PaddingInlineEnd);
15030
+ .pf-v6-c-multiple-file-upload__status-item-progress {
15031
+ display: grid;
15032
+ grid-template-columns: var(--pf-v6-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
15033
+ gap: var(--pf-v6-c-multiple-file-upload__status-item-progress--Gap);
14652
15034
  }
14653
15035
 
14654
- .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
14655
- margin-inline-end: var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd);
15036
+ .pf-v6-c-multiple-file-upload__status-item-progress-text {
15037
+ color: var(--pf-v6-c-multiple-file-upload__status-item-progress-text--Color);
14656
15038
  }
14657
15039
 
14658
- @media screen and (min-width: 576px) {
14659
- .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
14660
- --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd);
14661
- }
15040
+ .pf-v6-c-multiple-file-upload__status-item-progress-size {
15041
+ color: var(--pf-v6-c-multiple-file-upload__status-item-progress-size--Color);
14662
15042
  }
15043
+
14663
15044
  :where(:root, .pf-v6-c-nav) {
14664
15045
  --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14665
15046
  --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -14832,362 +15213,150 @@ ul.pf-v6-c-list {
14832
15213
  display: flex;
14833
15214
  column-gap: var(--pf-v6-c-nav__link--ColumnGap);
14834
15215
  align-items: var(--pf-v6-c-nav__link--AlignItems);
14835
- padding-block-start: var(--pf-v6-c-nav__link--PaddingBlockStart);
14836
- padding-block-end: var(--pf-v6-c-nav__link--PaddingBlockEnd);
14837
- padding-inline-start: var(--pf-v6-c-nav__link--PaddingInlineStart);
14838
- padding-inline-end: var(--pf-v6-c-nav__link--PaddingInlineEnd);
14839
- font-size: var(--pf-v6-c-nav__link--FontSize, inherit);
14840
- font-weight: var(--pf-v6-c-nav__link--FontWeight, inherit);
14841
- line-height: var(--pf-v6-c-nav__link--LineHeight, inherit);
14842
- color: var(--pf-v6-c-nav__link--Color);
14843
- text-align: start;
14844
- background-color: var(--pf-v6-c-nav__link--BackgroundColor);
14845
- border: none;
14846
- border-radius: var(--pf-v6-c-nav__link--BorderRadius);
14847
- }
14848
-
14849
- .pf-v6-c-nav__link[aria-expanded=true]::before {
14850
- inset-block-end: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
14851
- }
14852
-
14853
- .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus {
14854
- color: var(--pf-v6-c-nav__link--hover--Color);
14855
- background-color: var(--pf-v6-c-nav__link--hover--BackgroundColor);
14856
- }
14857
-
14858
- .pf-v6-c-nav__link.pf-m-current, .pf-v6-c-nav__link.pf-m-current:hover {
14859
- --pf-v6-c-nav__link-icon--Color: var(--pf-v6-c-nav__link--m-current__link-icon--Color);
14860
- color: var(--pf-v6-c-nav__link--m-current--Color);
14861
- background-color: var(--pf-v6-c-nav__link--m-current--BackgroundColor);
14862
- }
14863
-
14864
- .pf-v6-c-nav__link-icon {
14865
- color: var(--pf-v6-c-nav__link-icon--Color);
14866
- }
14867
-
14868
- .pf-v6-c-nav__toggle {
14869
- flex: none;
14870
- align-self: start;
14871
- margin-inline-start: auto;
14872
- transform: translateY(var(--pf-v6-c-nav__toggle--TranslateY));
14873
- }
14874
-
14875
- .pf-v6-c-nav__toggle-icon {
14876
- display: inline-block;
14877
- transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate));
14878
- }
14879
-
14880
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__toggle-icon {
14881
- scale: -1 1;
14882
- }
14883
-
14884
- .pf-v6-c-nav__item:where(.pf-m-flyout) .pf-v6-c-nav__toggle-icon {
14885
- --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 0;
14886
- }
14887
-
14888
- .pf-v6-c-nav__link:where([aria-expanded=true]) .pf-v6-c-nav__toggle-icon {
14889
- transform: rotate(var(--pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate));
14890
- }
14891
-
14892
- .pf-v6-c-nav__scroll-button {
14893
- position: relative;
14894
- }
14895
-
14896
- .pf-v6-c-nav__scroll-button::before {
14897
- position: absolute;
14898
- inset: 0;
14899
- content: "";
14900
- }
14901
-
14902
- .pf-v6-c-nav__scroll-button:first-of-type .pf-v6-c-button {
14903
- --pf-v6-c-button--BorderStartStartRadius: var(--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius);
14904
- --pf-v6-c-button--BorderEndStartRadius: var(--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderEndStartRadius);
14905
- }
14906
-
14907
- .pf-v6-c-nav__scroll-button:first-of-type::before {
14908
- border-inline-end: var(--pf-v6-c-nav__scroll-button--BorderWidth) solid var(--pf-v6-c-nav__scroll-button--BorderColor);
14909
- }
14910
-
14911
- .pf-v6-c-nav__scroll-button:last-of-type .pf-v6-c-button {
14912
- --pf-v6-c-button--BorderStartEndRadius: var(--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderStartEndRadius);
14913
- --pf-v6-c-button--BorderEndEndRadius: var(--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderEndEndRadius);
14914
- }
14915
-
14916
- .pf-v6-c-nav__scroll-button:last-of-type::before {
14917
- border-inline-start: var(--pf-v6-c-nav__scroll-button--BorderWidth) solid var(--pf-v6-c-nav__scroll-button--BorderColor);
14918
- }
14919
-
14920
- .pf-v6-c-nav__scroll-button .pf-v6-c-button {
14921
- outline-offset: var(--pf-v6-c-nav--OutlineOffset);
14922
- }
14923
-
14924
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__scroll-button .pf-v6-c-button > * {
14925
- scale: -1 1;
14926
- }
14927
-
14928
- .pf-v6-c-nav:where(.pf-m-horizontal) {
14929
- padding: 0;
14930
- overflow: hidden;
14931
- }
14932
-
14933
- .pf-v6-c-nav:where(.pf-m-horizontal),
14934
- .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__section,
14935
- .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__subnav,
14936
- .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list,
14937
- .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__item {
14938
- display: flex;
14939
- }
14940
-
14941
- .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list {
14942
- padding-block-start: var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockStart);
14943
- padding-block-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd);
14944
- padding-inline-start: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineStart);
14945
- padding-inline-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd);
14946
- overflow-x: auto;
14947
- white-space: nowrap;
14948
- scroll-snap-type: var(--pf-v6-c-nav__list--ScrollSnapType);
14949
- scroll-padding-inline-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd);
14950
- -webkit-overflow-scrolling: touch;
14951
- scrollbar-width: none;
14952
- -ms-overflow-style: -ms-autohiding-scrollbar;
14953
- }
14954
-
14955
- .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list::-webkit-scrollbar {
14956
- display: none;
14957
- }
14958
-
14959
- .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__link {
14960
- outline-offset: var(--pf-v6-c-nav--OutlineOffset);
14961
- }
14962
-
14963
- .pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav {
14964
- --pf-v6-c-nav--BackgroundColor: var(--pf-v6-c-nav--m-horizontal--m-subnav--BackgroundColor);
14965
- --pf-v6-c-nav--m-horizontal__list--PaddingBlockStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart);
14966
- --pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
14967
- --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart);
14968
- --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd);
14969
- --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart: var(--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineStart);
14970
- --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd);
14971
- --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart);
14972
- --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd);
14973
- border-radius: var(--pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius);
14974
- }
14975
-
14976
- .pf-v6-c-nav:where(.pf-m-horizontal).pf-m-scrollable {
14977
- --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart);
14978
- --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd);
14979
- }
14980
-
14981
- :where(:root, .pf-v6-c-multiple-file-upload) {
14982
- --pf-v6-c-multiple-file-upload--GridTemplateColumns: 1fr;
14983
- --pf-v6-c-multiple-file-upload--Gap: var(--pf-t--global--spacer--md);
14984
- --pf-v6-c-multiple-file-upload__main--TextAlign: center;
14985
- --pf-v6-c-multiple-file-upload__main--GridTemplateColumns: auto;
14986
- --pf-v6-c-multiple-file-upload__main--GridTemplateRows: auto;
14987
- --pf-v6-c-multiple-file-upload__main--GridTemplateAreas:
14988
- "title"
14989
- "upload"
14990
- "info";
14991
- --pf-v6-c-multiple-file-upload__main--PaddingBlockStart: var(--pf-t--global--spacer--xl);
14992
- --pf-v6-c-multiple-file-upload__main--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
14993
- --pf-v6-c-multiple-file-upload__main--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
14994
- --pf-v6-c-multiple-file-upload__main--PaddingInlineStart: var(--pf-t--global--spacer--xl);
14995
- --pf-v6-c-multiple-file-upload__main--BorderWidth: var(--pf-t--global--border--width--regular);
14996
- --pf-v6-c-multiple-file-upload__main--BorderStyle: dashed;
14997
- --pf-v6-c-multiple-file-upload__main--BorderColor: var(--pf-t--global--border--color--default);
14998
- --pf-v6-c-multiple-file-upload__main--BorderRadius: var(--pf-t--global--border--radius--medium);
14999
- --pf-v6-c-multiple-file-upload__title--Display: grid;
15000
- --pf-v6-c-multiple-file-upload__title--GridTemplateColumns: auto;
15001
- --pf-v6-c-multiple-file-upload__title--Gap: var(--pf-t--global--spacer--lg);
15002
- --pf-v6-c-multiple-file-upload__title-text--Color: var(--pf-t--global--text--color--regular);
15003
- --pf-v6-c-multiple-file-upload__title-text--FontFamily: var(--pf-t--global--font--family--heading);
15004
- --pf-v6-c-multiple-file-upload__title-text--FontSize: var(--pf-t--global--font--size--heading--sm);
15005
- --pf-v6-c-multiple-file-upload__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
15006
- --pf-v6-c-multiple-file-upload__title-icon--Color: var(--pf-t--global--icon--color--regular);
15007
- --pf-v6-c-multiple-file-upload__title-icon--FontSize: var(--pf-t--global--icon--size--xl);
15008
- --pf-v6-c-multiple-file-upload__title-text-separator--Display: block;
15009
- --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart: var(--pf-t--global--spacer--sm);
15010
- --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockEnd: var(--pf-t--global--spacer--sm);
15011
- --pf-v6-c-multiple-file-upload__title-text-separator--Color: var(--pf-t--global--text--color--regular);
15012
- --pf-v6-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-t--global--font--family--body);
15013
- --pf-v6-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-t--global--font--size--body--lg);
15014
- --pf-v6-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-t--global--font--weight--body);
15015
- --pf-v6-c-multiple-file-upload__info--FontSize: var(--pf-t--global--font--size--body--default);
15016
- --pf-v6-c-multiple-file-upload__info--Color: var(--pf-t--global--text--color--subtle);
15017
- --pf-v6-c-multiple-file-upload__info--MarginBlockStart: var(--pf-t--global--spacer--lg);
15018
- --pf-v6-c-multiple-file-upload--m-drag-over__main--BorderStyle: dashed;
15019
- --pf-v6-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-t--global--border--color--clicked);
15020
- --pf-v6-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
15021
- --pf-v6-c-multiple-file-upload--m-horizontal__main--TextAlign: start;
15022
- --pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
15023
- --pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
15024
- "title upload"
15025
- "info upload";
15026
- --pf-v6-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
15027
- --pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
15028
- --pf-v6-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
15029
- --pf-v6-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-t--global--spacer--sm);
15030
- --pf-v6-c-multiple-file-upload--m-horizontal__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
15031
- --pf-v6-c-multiple-file-upload--m-horizontal__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
15032
- --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
15033
- --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginBlockStart: 0;
15034
- --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily: var(--pf-t--global--font--family--heading);
15035
- --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize: var(--pf-t--global--font--size--heading--xs);
15036
- --pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight: var(--pf-t--global--font--weight--heading);
15037
- --pf-v6-c-multiple-file-upload--m-horizontal__info--MarginBlockStart: 0;
15038
- --pf-v6-c-multiple-file-upload__status--PaddingBlockStart: var(--pf-t--global--spacer--sm);
15039
- --pf-v6-c-multiple-file-upload__status--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
15040
- --pf-v6-c-multiple-file-upload__status--PaddingInlineStart: var(--pf-t--global--spacer--md);
15041
- --pf-v6-c-multiple-file-upload__status--PaddingInlineEnd: var(--pf-t--global--spacer--md);
15042
- --pf-v6-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
15043
- --pf-v6-c-multiple-file-upload__status-progress--Gap: var(--pf-t--global--spacer--sm);
15044
- --pf-v6-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--brand--default);
15045
- --pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
15046
- --pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
15047
- --pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
15048
- --pf-v6-c-multiple-file-upload__status-item--Gap: var(--pf-t--global--spacer--sm);
15049
- --pf-v6-c-multiple-file-upload__status-item--BorderWidth: var(--pf-t--global--border--width--regular);
15050
- --pf-v6-c-multiple-file-upload__status-item--BorderColor: var(--pf-t--global--border--color--default);
15051
- --pf-v6-c-multiple-file-upload__status-item-icon--Color: var(--pf-t--global--icon--color--regular);
15052
- --pf-v6-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
15053
- --pf-v6-c-multiple-file-upload__status-item-progress--Gap: var(--pf-t--global--spacer--sm);
15054
- --pf-v6-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-t--global--text--color--regular);
15055
- --pf-v6-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-t--global--text--color--subtle);
15216
+ padding-block-start: var(--pf-v6-c-nav__link--PaddingBlockStart);
15217
+ padding-block-end: var(--pf-v6-c-nav__link--PaddingBlockEnd);
15218
+ padding-inline-start: var(--pf-v6-c-nav__link--PaddingInlineStart);
15219
+ padding-inline-end: var(--pf-v6-c-nav__link--PaddingInlineEnd);
15220
+ font-size: var(--pf-v6-c-nav__link--FontSize, inherit);
15221
+ font-weight: var(--pf-v6-c-nav__link--FontWeight, inherit);
15222
+ line-height: var(--pf-v6-c-nav__link--LineHeight, inherit);
15223
+ color: var(--pf-v6-c-nav__link--Color);
15224
+ text-align: start;
15225
+ background-color: var(--pf-v6-c-nav__link--BackgroundColor);
15226
+ border: none;
15227
+ border-radius: var(--pf-v6-c-nav__link--BorderRadius);
15056
15228
  }
15057
15229
 
15058
- .pf-v6-c-multiple-file-upload {
15059
- display: grid;
15060
- grid-template-columns: var(--pf-v6-c-multiple-file-upload--GridTemplateColumns);
15061
- gap: var(--pf-v6-c-multiple-file-upload--Gap);
15230
+ .pf-v6-c-nav__link[aria-expanded=true]::before {
15231
+ inset-block-end: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
15062
15232
  }
15063
15233
 
15064
- .pf-v6-c-multiple-file-upload.pf-m-horizontal {
15065
- --pf-v6-c-multiple-file-upload--GridTemplateColumns: var(--pf-v6-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
15066
- --pf-v6-c-multiple-file-upload__main--TextAlign: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--TextAlign);
15067
- --pf-v6-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
15068
- --pf-v6-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
15069
- --pf-v6-c-multiple-file-upload__main--Gap: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--Gap);
15070
- --pf-v6-c-multiple-file-upload__main--PaddingBlockEnd: var(--pf-v6-c-multiple-file-upload--m-horizontal__main--PaddingBlockEnd);
15071
- --pf-v6-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-v6-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
15072
- --pf-v6-c-multiple-file-upload__title--Gap: var(--pf-v6-c-multiple-file-upload--m-horizontal__title--Gap);
15073
- --pf-v6-c-multiple-file-upload__title-icon--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-icon--FontSize);
15074
- --pf-v6-c-multiple-file-upload__title-text--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text--FontSize);
15075
- --pf-v6-c-multiple-file-upload__title-text-separator--FontFamily: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontFamily);
15076
- --pf-v6-c-multiple-file-upload__title-text-separator--Display: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
15077
- --pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--MarginBlockStart);
15078
- --pf-v6-c-multiple-file-upload__title-text-separator--FontSize: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontSize);
15079
- --pf-v6-c-multiple-file-upload__title-text-separator--FontWeight: var(--pf-v6-c-multiple-file-upload--m-horizontal__title-text-separator--FontWeight);
15080
- --pf-v6-c-multiple-file-upload__info--MarginBlockStart: var(--pf-v6-c-multiple-file-upload--m-horizontal__info--MarginBlockStart);
15234
+ .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus {
15235
+ color: var(--pf-v6-c-nav__link--hover--Color);
15236
+ background-color: var(--pf-v6-c-nav__link--hover--BackgroundColor);
15081
15237
  }
15082
15238
 
15083
- .pf-v6-c-multiple-file-upload.pf-m-drag-over {
15084
- --pf-v6-c-multiple-file-upload__main--BorderStyle: var(--pf-v6-c-multiple-file-upload--m-drag-over__main--BorderStyle);
15085
- --pf-v6-c-multiple-file-upload__main--BorderColor: var(--pf-v6-c-multiple-file-upload--m-drag-over__main--BorderColor);
15239
+ .pf-v6-c-nav__link.pf-m-current, .pf-v6-c-nav__link.pf-m-current:hover {
15240
+ --pf-v6-c-nav__link-icon--Color: var(--pf-v6-c-nav__link--m-current__link-icon--Color);
15241
+ color: var(--pf-v6-c-nav__link--m-current--Color);
15242
+ background-color: var(--pf-v6-c-nav__link--m-current--BackgroundColor);
15086
15243
  }
15087
15244
 
15088
- .pf-v6-c-multiple-file-upload__main {
15089
- display: grid;
15090
- grid-template-areas: var(--pf-v6-c-multiple-file-upload__main--GridTemplateAreas);
15091
- grid-template-rows: var(--pf-v6-c-multiple-file-upload__main--GridTemplateRows);
15092
- grid-template-columns: var(--pf-v6-c-multiple-file-upload__main--GridTemplateColumns);
15093
- gap: var(--pf-v6-c-multiple-file-upload__main--Gap);
15094
- align-items: center;
15095
- padding-block-start: var(--pf-v6-c-multiple-file-upload__main--PaddingBlockStart);
15096
- padding-block-end: var(--pf-v6-c-multiple-file-upload__main--PaddingBlockEnd);
15097
- padding-inline-start: var(--pf-v6-c-multiple-file-upload__main--PaddingInlineStart);
15098
- padding-inline-end: var(--pf-v6-c-multiple-file-upload__main--PaddingInlineEnd);
15099
- text-align: var(--pf-v6-c-multiple-file-upload__main--TextAlign);
15100
- border: var(--pf-v6-c-multiple-file-upload__main--BorderWidth) var(--pf-v6-c-multiple-file-upload__main--BorderStyle) var(--pf-v6-c-multiple-file-upload__main--BorderColor);
15101
- border-radius: var(--pf-v6-c-multiple-file-upload__main--BorderRadius);
15245
+ .pf-v6-c-nav__link-icon {
15246
+ color: var(--pf-v6-c-nav__link-icon--Color);
15102
15247
  }
15103
15248
 
15104
- .pf-v6-c-multiple-file-upload__title {
15105
- display: var(--pf-v6-c-multiple-file-upload__title--Display);
15106
- grid-area: title;
15107
- grid-template-columns: var(--pf-v6-c-multiple-file-upload__title--GridTemplateColumns);
15108
- gap: var(--pf-v6-c-multiple-file-upload__title--Gap);
15249
+ .pf-v6-c-nav__toggle {
15250
+ flex: none;
15251
+ align-self: start;
15252
+ margin-inline-start: auto;
15253
+ transform: translateY(var(--pf-v6-c-nav__toggle--TranslateY));
15109
15254
  }
15110
15255
 
15111
- .pf-v6-c-multiple-file-upload__title-icon {
15112
- font-size: var(--pf-v6-c-multiple-file-upload__title-icon--FontSize);
15113
- color: var(--pf-v6-c-multiple-file-upload__title-icon--Color);
15256
+ .pf-v6-c-nav__toggle-icon {
15257
+ display: inline-block;
15258
+ transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate));
15114
15259
  }
15115
15260
 
15116
- .pf-v6-c-multiple-file-upload__title-text {
15117
- font-family: var(--pf-v6-c-multiple-file-upload__title-text--FontFamily);
15118
- font-size: var(--pf-v6-c-multiple-file-upload__title-text--FontSize);
15119
- font-weight: var(--pf-v6-c-multiple-file-upload__title-text--FontWeight);
15120
- color: var(--pf-v6-c-multiple-file-upload__title-text--Color, inherit);
15261
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__toggle-icon {
15262
+ scale: -1 1;
15121
15263
  }
15122
15264
 
15123
- .pf-v6-c-multiple-file-upload__title-text-separator {
15124
- display: var(--pf-v6-c-multiple-file-upload__title-text-separator--Display);
15125
- margin-block-start: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockStart);
15126
- margin-block-end: var(--pf-v6-c-multiple-file-upload__title-text-separator--MarginBlockEnd);
15127
- font-family: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontFamily);
15128
- font-size: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontSize);
15129
- font-weight: var(--pf-v6-c-multiple-file-upload__title-text-separator--FontWeight);
15130
- color: var(--pf-v6-c-multiple-file-upload__title-text-separator--Color);
15265
+ .pf-v6-c-nav__item:where(.pf-m-flyout) .pf-v6-c-nav__toggle-icon {
15266
+ --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 0;
15131
15267
  }
15132
15268
 
15133
- .pf-v6-c-multiple-file-upload__upload {
15134
- grid-area: upload;
15269
+ .pf-v6-c-nav__link:where([aria-expanded=true]) .pf-v6-c-nav__toggle-icon {
15270
+ transform: rotate(var(--pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate));
15135
15271
  }
15136
15272
 
15137
- .pf-v6-c-multiple-file-upload__info {
15138
- grid-area: info;
15139
- margin-block-start: var(--pf-v6-c-multiple-file-upload__info--MarginBlockStart);
15140
- font-size: var(--pf-v6-c-multiple-file-upload__info--FontSize);
15141
- color: var(--pf-v6-c-multiple-file-upload__info--Color);
15273
+ .pf-v6-c-nav__scroll-button {
15274
+ position: relative;
15142
15275
  }
15143
15276
 
15144
- .pf-v6-c-multiple-file-upload__status {
15145
- padding-block-start: var(--pf-v6-c-multiple-file-upload__status--PaddingBlockStart);
15146
- padding-block-end: var(--pf-v6-c-multiple-file-upload__status--PaddingBlockEnd);
15147
- padding-inline-start: var(--pf-v6-c-multiple-file-upload__status--PaddingInlineStart);
15148
- padding-inline-end: var(--pf-v6-c-multiple-file-upload__status--PaddingInlineEnd);
15277
+ .pf-v6-c-nav__scroll-button::before {
15278
+ position: absolute;
15279
+ inset: 0;
15280
+ content: "";
15149
15281
  }
15150
15282
 
15151
- .pf-v6-c-multiple-file-upload__status,
15152
- .pf-v6-c-multiple-file-upload__status-item-main {
15153
- min-width: 0;
15283
+ .pf-v6-c-nav__scroll-button:first-of-type .pf-v6-c-button {
15284
+ --pf-v6-c-button--BorderStartStartRadius: var(--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius);
15285
+ --pf-v6-c-button--BorderEndStartRadius: var(--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderEndStartRadius);
15154
15286
  }
15155
15287
 
15156
- .pf-v6-c-multiple-file-upload__status-progress {
15157
- display: grid;
15158
- grid-template-columns: var(--pf-v6-c-multiple-file-upload__status-progress--GridTemplateColumns);
15159
- gap: var(--pf-v6-c-multiple-file-upload__status-progress--Gap);
15288
+ .pf-v6-c-nav__scroll-button:first-of-type::before {
15289
+ border-inline-end: var(--pf-v6-c-nav__scroll-button--BorderWidth) solid var(--pf-v6-c-nav__scroll-button--BorderColor);
15160
15290
  }
15161
15291
 
15162
- .pf-v6-c-multiple-file-upload__status-progress-icon {
15163
- color: var(--pf-v6-c-multiple-file-upload__status-progress-icon--Color);
15292
+ .pf-v6-c-nav__scroll-button:last-of-type .pf-v6-c-button {
15293
+ --pf-v6-c-button--BorderStartEndRadius: var(--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderStartEndRadius);
15294
+ --pf-v6-c-button--BorderEndEndRadius: var(--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderEndEndRadius);
15164
15295
  }
15165
15296
 
15166
- .pf-v6-c-multiple-file-upload__status-item {
15167
- display: grid;
15168
- grid-template-columns: var(--pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns);
15169
- gap: var(--pf-v6-c-multiple-file-upload__status-item--Gap);
15170
- padding-block-start: var(--pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart);
15171
- padding-block-end: var(--pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd);
15172
- border-block-end: var(--pf-v6-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v6-c-multiple-file-upload__status-item--BorderColor);
15297
+ .pf-v6-c-nav__scroll-button:last-of-type::before {
15298
+ border-inline-start: var(--pf-v6-c-nav__scroll-button--BorderWidth) solid var(--pf-v6-c-nav__scroll-button--BorderColor);
15173
15299
  }
15174
15300
 
15175
- .pf-v6-c-multiple-file-upload__status-item-icon {
15176
- color: var(--pf-v6-c-multiple-file-upload__status-item-icon--Color);
15301
+ .pf-v6-c-nav__scroll-button .pf-v6-c-button {
15302
+ outline-offset: var(--pf-v6-c-nav--OutlineOffset);
15177
15303
  }
15178
15304
 
15179
- .pf-v6-c-multiple-file-upload__status-item-progress {
15180
- display: grid;
15181
- grid-template-columns: var(--pf-v6-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
15182
- gap: var(--pf-v6-c-multiple-file-upload__status-item-progress--Gap);
15305
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__scroll-button .pf-v6-c-button > * {
15306
+ scale: -1 1;
15183
15307
  }
15184
15308
 
15185
- .pf-v6-c-multiple-file-upload__status-item-progress-text {
15186
- color: var(--pf-v6-c-multiple-file-upload__status-item-progress-text--Color);
15309
+ .pf-v6-c-nav:where(.pf-m-horizontal) {
15310
+ padding: 0;
15311
+ overflow: hidden;
15187
15312
  }
15188
15313
 
15189
- .pf-v6-c-multiple-file-upload__status-item-progress-size {
15190
- color: var(--pf-v6-c-multiple-file-upload__status-item-progress-size--Color);
15314
+ .pf-v6-c-nav:where(.pf-m-horizontal),
15315
+ .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__section,
15316
+ .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__subnav,
15317
+ .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list,
15318
+ .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__item {
15319
+ display: flex;
15320
+ }
15321
+
15322
+ .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list {
15323
+ padding-block-start: var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockStart);
15324
+ padding-block-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd);
15325
+ padding-inline-start: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineStart);
15326
+ padding-inline-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd);
15327
+ overflow-x: auto;
15328
+ white-space: nowrap;
15329
+ scroll-snap-type: var(--pf-v6-c-nav__list--ScrollSnapType);
15330
+ scroll-padding-inline-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd);
15331
+ -webkit-overflow-scrolling: touch;
15332
+ scrollbar-width: none;
15333
+ -ms-overflow-style: -ms-autohiding-scrollbar;
15334
+ }
15335
+
15336
+ .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list::-webkit-scrollbar {
15337
+ display: none;
15338
+ }
15339
+
15340
+ .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__link {
15341
+ outline-offset: var(--pf-v6-c-nav--OutlineOffset);
15342
+ }
15343
+
15344
+ .pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav {
15345
+ --pf-v6-c-nav--BackgroundColor: var(--pf-v6-c-nav--m-horizontal--m-subnav--BackgroundColor);
15346
+ --pf-v6-c-nav--m-horizontal__list--PaddingBlockStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart);
15347
+ --pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
15348
+ --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart);
15349
+ --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd);
15350
+ --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart: var(--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineStart);
15351
+ --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd);
15352
+ --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart);
15353
+ --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd);
15354
+ border-radius: var(--pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius);
15355
+ }
15356
+
15357
+ .pf-v6-c-nav:where(.pf-m-horizontal).pf-m-scrollable {
15358
+ --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart);
15359
+ --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd);
15191
15360
  }
15192
15361
 
15193
15362
  :where(:root, .pf-v6-c-notification-drawer) {
@@ -23941,86 +24110,38 @@ label.pf-v6-c-tree-view__node-text {
23941
24110
  }
23942
24111
 
23943
24112
  .pf-v6-c-panel.pf-m-scrollable {
23944
- --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
23945
- --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
23946
- --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
23947
- }
23948
-
23949
- .pf-v6-c-panel__header {
23950
- padding-block-start: var(--pf-v6-c-panel__header--PaddingBlockStart);
23951
- padding-block-end: var(--pf-v6-c-panel__header--PaddingBlockEnd);
23952
- padding-inline-start: var(--pf-v6-c-panel__header--PaddingInlineStart);
23953
- padding-inline-end: var(--pf-v6-c-panel__header--PaddingInlineEnd);
23954
- }
23955
-
23956
- .pf-v6-c-panel__main {
23957
- max-height: var(--pf-v6-c-panel__main--MaxHeight);
23958
- overflow: var(--pf-v6-c-panel__main--Overflow);
23959
- }
23960
-
23961
- .pf-v6-c-panel__main-body {
23962
- padding-block-start: var(--pf-v6-c-panel__main-body--PaddingBlockStart);
23963
- padding-block-end: var(--pf-v6-c-panel__main-body--PaddingBlockEnd);
23964
- padding-inline-start: var(--pf-v6-c-panel__main-body--PaddingInlineStart);
23965
- padding-inline-end: var(--pf-v6-c-panel__main-body--PaddingInlineEnd);
23966
- }
23967
-
23968
- .pf-v6-c-panel__footer {
23969
- padding-block-start: var(--pf-v6-c-panel__footer--PaddingBlockStart);
23970
- padding-block-end: var(--pf-v6-c-panel__footer--PaddingBlockEnd);
23971
- padding-inline-start: var(--pf-v6-c-panel__footer--PaddingInlineStart);
23972
- padding-inline-end: var(--pf-v6-c-panel__footer--PaddingInlineEnd);
23973
- box-shadow: var(--pf-v6-c-panel__footer--BoxShadow);
23974
- }
23975
-
23976
- :where(:root, .pf-v6-c-truncate) {
23977
- --pf-v6-c-truncate--MinWidth: 6ch;
23978
- --pf-v6-c-truncate__start--MinWidth: 6ch;
23979
- }
23980
-
23981
- .pf-v6-c-truncate {
23982
- display: inline-grid;
23983
- grid-auto-flow: column;
23984
- align-items: baseline;
23985
- min-width: var(--pf-v6-c-truncate--MinWidth);
23986
- }
23987
-
23988
- .pf-v6-c-truncate__start,
23989
- .pf-v6-c-truncate__end {
23990
- overflow: hidden;
23991
- text-overflow: ellipsis;
23992
- white-space: nowrap;
23993
- }
23994
-
23995
- .pf-v6-c-truncate__start {
23996
- min-width: var(--pf-v6-c-truncate__start--MinWidth);
24113
+ --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
24114
+ --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
24115
+ --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
23997
24116
  }
23998
24117
 
23999
- .pf-v6-c-truncate__end {
24000
- direction: rtl;
24118
+ .pf-v6-c-panel__header {
24119
+ padding-block-start: var(--pf-v6-c-panel__header--PaddingBlockStart);
24120
+ padding-block-end: var(--pf-v6-c-panel__header--PaddingBlockEnd);
24121
+ padding-inline-start: var(--pf-v6-c-panel__header--PaddingInlineStart);
24122
+ padding-inline-end: var(--pf-v6-c-panel__header--PaddingInlineEnd);
24001
24123
  }
24002
24124
 
24003
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-truncate__end {
24004
- direction: ltr;
24125
+ .pf-v6-c-panel__main {
24126
+ max-height: var(--pf-v6-c-panel__main--MaxHeight);
24127
+ overflow: var(--pf-v6-c-panel__main--Overflow);
24005
24128
  }
24006
24129
 
24007
- .pf-v6-c-truncate__start + .pf-v6-c-truncate__end {
24008
- overflow: visible;
24009
- direction: ltr;
24130
+ .pf-v6-c-panel__main-body {
24131
+ padding-block-start: var(--pf-v6-c-panel__main-body--PaddingBlockStart);
24132
+ padding-block-end: var(--pf-v6-c-panel__main-body--PaddingBlockEnd);
24133
+ padding-inline-start: var(--pf-v6-c-panel__main-body--PaddingInlineStart);
24134
+ padding-inline-end: var(--pf-v6-c-panel__main-body--PaddingInlineEnd);
24010
24135
  }
24011
24136
 
24012
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-truncate__start + .pf-v6-c-truncate__end {
24013
- direction: rtl;
24137
+ .pf-v6-c-panel__footer {
24138
+ padding-block-start: var(--pf-v6-c-panel__footer--PaddingBlockStart);
24139
+ padding-block-end: var(--pf-v6-c-panel__footer--PaddingBlockEnd);
24140
+ padding-inline-start: var(--pf-v6-c-panel__footer--PaddingInlineStart);
24141
+ padding-inline-end: var(--pf-v6-c-panel__footer--PaddingInlineEnd);
24142
+ box-shadow: var(--pf-v6-c-panel__footer--BoxShadow);
24014
24143
  }
24015
24144
 
24016
- @supports (-webkit-hyphens: none) {
24017
- .pf-v6-c-truncate__end {
24018
- direction: ltr;
24019
- }
24020
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-truncate__end {
24021
- direction: rtl;
24022
- }
24023
- }
24024
24145
  :where(:root, .pf-v6-c-alert-group) {
24025
24146
  --pf-v6-c-alert-group__item--MarginBlockStart: var(--pf-t--global--spacer--md);
24026
24147
  --pf-v6-c-alert-group--m-toast--InsetBlockStart: var(--pf-t--global--spacer--2xl);
@@ -24088,6 +24209,54 @@ label.pf-v6-c-tree-view__node-text {
24088
24209
  --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
24089
24210
  }
24090
24211
 
24212
+ :where(:root, .pf-v6-c-truncate) {
24213
+ --pf-v6-c-truncate--MinWidth: 6ch;
24214
+ --pf-v6-c-truncate__start--MinWidth: 6ch;
24215
+ }
24216
+
24217
+ .pf-v6-c-truncate {
24218
+ display: inline-grid;
24219
+ grid-auto-flow: column;
24220
+ align-items: baseline;
24221
+ min-width: var(--pf-v6-c-truncate--MinWidth);
24222
+ }
24223
+
24224
+ .pf-v6-c-truncate__start,
24225
+ .pf-v6-c-truncate__end {
24226
+ overflow: hidden;
24227
+ text-overflow: ellipsis;
24228
+ white-space: nowrap;
24229
+ }
24230
+
24231
+ .pf-v6-c-truncate__start {
24232
+ min-width: var(--pf-v6-c-truncate__start--MinWidth);
24233
+ }
24234
+
24235
+ .pf-v6-c-truncate__end {
24236
+ direction: rtl;
24237
+ }
24238
+
24239
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-truncate__end {
24240
+ direction: ltr;
24241
+ }
24242
+
24243
+ .pf-v6-c-truncate__start + .pf-v6-c-truncate__end {
24244
+ overflow: visible;
24245
+ direction: ltr;
24246
+ }
24247
+
24248
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-truncate__start + .pf-v6-c-truncate__end {
24249
+ direction: rtl;
24250
+ }
24251
+
24252
+ @supports (-webkit-hyphens: none) {
24253
+ .pf-v6-c-truncate__end {
24254
+ direction: ltr;
24255
+ }
24256
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-truncate__end {
24257
+ direction: rtl;
24258
+ }
24259
+ }
24091
24260
  :where(:root, .pf-v6-l-bullseye) {
24092
24261
  --pf-v6-l-bullseye--Padding: 0;
24093
24262
  }
@@ -27711,175 +27880,6 @@ label.pf-v6-c-tree-view__node-text {
27711
27880
  gap: var(--pf-v6-l-stack--m-gutter--Gap);
27712
27881
  }
27713
27882
 
27714
- :where(:root, .pf-v6-c-banner) {
27715
- --pf-v6-c-banner--PaddingBlockStart: var(--pf-t--global--spacer--xs);
27716
- --pf-v6-c-banner--PaddingInlineEnd: var(--pf-t--global--spacer--md);
27717
- --pf-v6-c-banner--md--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
27718
- --pf-v6-c-banner--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
27719
- --pf-v6-c-banner--PaddingInlineStart: var(--pf-t--global--spacer--md);
27720
- --pf-v6-c-banner--md--PaddingInlineStart: var(--pf-t--global--spacer--lg);
27721
- --pf-v6-c-banner--FontSize: var(--pf-t--global--font--size--body--default);
27722
- --pf-v6-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
27723
- --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
27724
- --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
27725
- --pf-v6-c-banner--link--TextDecoration: underline;
27726
- --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
27727
- --pf-v6-c-banner--link--hover--FontWeight: var(--pf-t--global--font--weight--body--bold);
27728
- --pf-v6-c-banner--link--disabled--Color: var(--pf-v6-c-banner--Color);
27729
- --pf-v6-c-banner--link--disabled--TextDecoration: none;
27730
- --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
27731
- --pf-v6-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
27732
- --pf-v6-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
27733
- --pf-v6-c-banner--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
27734
- --pf-v6-c-banner--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
27735
- --pf-v6-c-banner--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
27736
- --pf-v6-c-banner--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
27737
- --pf-v6-c-banner--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
27738
- --pf-v6-c-banner--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
27739
- --pf-v6-c-banner--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
27740
- --pf-v6-c-banner--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
27741
- --pf-v6-c-banner--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
27742
- --pf-v6-c-banner--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
27743
- --pf-v6-c-banner--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
27744
- --pf-v6-c-banner--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
27745
- --pf-v6-c-banner--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
27746
- --pf-v6-c-banner--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
27747
- --pf-v6-c-banner--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
27748
- --pf-v6-c-banner--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
27749
- --pf-v6-c-banner--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
27750
- --pf-v6-c-banner--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
27751
- --pf-v6-c-banner--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
27752
- --pf-v6-c-banner--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
27753
- --pf-v6-c-banner--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
27754
- --pf-v6-c-banner--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
27755
- --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
27756
- --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
27757
- --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
27758
- }
27759
-
27760
- @media (min-width: 768px) {
27761
- :where(:root, .pf-v6-c-banner) {
27762
- --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
27763
- --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
27764
- }
27765
- }
27766
- .pf-v6-c-banner {
27767
- flex-shrink: 0;
27768
- padding-block-start: var(--pf-v6-c-banner--PaddingBlockStart);
27769
- padding-block-end: var(--pf-v6-c-banner--PaddingBlockEnd);
27770
- padding-inline-start: var(--pf-v6-c-banner--PaddingInlineStart);
27771
- padding-inline-end: var(--pf-v6-c-banner--PaddingInlineEnd);
27772
- font-size: var(--pf-v6-c-banner--FontSize);
27773
- color: var(--pf-v6-c-banner--Color);
27774
- white-space: nowrap;
27775
- background-color: var(--pf-v6-c-banner--BackgroundColor);
27776
- }
27777
-
27778
- .pf-v6-c-banner.pf-m-danger {
27779
- --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-danger--BackgroundColor);
27780
- --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-danger--Color);
27781
- }
27782
-
27783
- .pf-v6-c-banner.pf-m-success {
27784
- --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-success--BackgroundColor);
27785
- --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-success--Color);
27786
- }
27787
-
27788
- .pf-v6-c-banner.pf-m-warning {
27789
- --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-warning--BackgroundColor);
27790
- --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-warning--Color);
27791
- }
27792
-
27793
- .pf-v6-c-banner.pf-m-info {
27794
- --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-info--BackgroundColor);
27795
- --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-info--Color);
27796
- }
27797
-
27798
- .pf-v6-c-banner.pf-m-custom {
27799
- --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-custom--BackgroundColor);
27800
- --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-custom--Color);
27801
- }
27802
-
27803
- .pf-v6-c-banner.pf-m-red {
27804
- --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-red--BackgroundColor);
27805
- --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-red--Color);
27806
- }
27807
-
27808
- .pf-v6-c-banner.pf-m-orangered {
27809
- --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-orangered--BackgroundColor);
27810
- --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-orangered--Color);
27811
- }
27812
-
27813
- .pf-v6-c-banner.pf-m-orange {
27814
- --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-orange--BackgroundColor);
27815
- --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-orange--Color);
27816
- }
27817
-
27818
- .pf-v6-c-banner.pf-m-yellow {
27819
- --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-yellow--BackgroundColor);
27820
- --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-yellow--Color);
27821
- }
27822
-
27823
- .pf-v6-c-banner.pf-m-green {
27824
- --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-green--BackgroundColor);
27825
- --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-green--Color);
27826
- }
27827
-
27828
- .pf-v6-c-banner.pf-m-teal {
27829
- --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-teal--BackgroundColor);
27830
- --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-teal--Color);
27831
- }
27832
-
27833
- .pf-v6-c-banner.pf-m-blue {
27834
- --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-blue--BackgroundColor);
27835
- --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-blue--Color);
27836
- }
27837
-
27838
- .pf-v6-c-banner.pf-m-purple {
27839
- --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-purple--BackgroundColor);
27840
- --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-purple--Color);
27841
- }
27842
-
27843
- .pf-v6-c-banner.pf-m-sticky {
27844
- position: sticky;
27845
- inset-block-start: 0;
27846
- z-index: var(--pf-v6-c-banner--m-sticky--ZIndex);
27847
- box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow);
27848
- }
27849
-
27850
- .pf-v6-c-banner a {
27851
- color: var(--pf-v6-c-banner--link--Color);
27852
- text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
27853
- }
27854
-
27855
- .pf-v6-c-banner a:hover:not(.pf-m-disabled) {
27856
- --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
27857
- font-weight: var(--pf-v6-c-banner--link--hover--FontWeight);
27858
- }
27859
-
27860
- .pf-v6-c-banner a.pf-m-disabled {
27861
- --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--disabled--Color);
27862
- --pf-v6-c-banner--link--TextDecoration: var(--pf-v6-c-banner--link--disabled--TextDecoration);
27863
- cursor: not-allowed;
27864
- }
27865
-
27866
- .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
27867
- --pf-v6-c-button--m-link--Color: var(--pf-v6-c-banner--link--Color);
27868
- --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
27869
- --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
27870
- text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
27871
- }
27872
-
27873
- .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:hover {
27874
- --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
27875
- font-weight: var(--pf-v6-c-banner--link--hover--FontWeight);
27876
- }
27877
-
27878
- .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
27879
- --pf-v6-c-banner--link--TextDecoration: var(--pf-v6-c-banner--link--disabled--TextDecoration);
27880
- cursor: not-allowed;
27881
- }
27882
-
27883
27883
  :where(:root, .pf-v6-c-about-modal-box) {
27884
27884
  --pf-v6-c-about-modal-box--BackgroundImage: none;
27885
27885
  --pf-v6-c-about-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);