@patternfly/patternfly 6.0.0-alpha.62 → 6.0.0-alpha.63

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.
@@ -13220,19 +13220,23 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13220
13220
  }
13221
13221
  }
13222
13222
 
13223
- .pf-v5-c-drawer {
13224
- --pf-v5-c-drawer__section--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
13225
- --pf-v5-c-drawer__section--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
13223
+ :where(:root),
13224
+ :where(.pf-v5-c-drawer) {
13225
+ --pf-v5-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13226
+ --pf-v5-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13226
13227
  --pf-v5-c-drawer__content--FlexBasis: 100%;
13227
- --pf-v5-c-drawer__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
13228
- --pf-v5-c-drawer__content--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
13229
- --pf-v5-c-drawer__content--ZIndex: var(--pf-v5-global--ZIndex--xs);
13228
+ --pf-v5-c-drawer__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13229
+ --pf-v5-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13230
+ --pf-v5-c-drawer__content--ZIndex: var(--pf-t--global--Zindex--xs);
13230
13231
  --pf-v5-c-drawer__panel--MinWidth: 50%;
13231
13232
  --pf-v5-c-drawer__panel--MaxHeight: auto;
13232
- --pf-v5-c-drawer__panel--ZIndex: var(--pf-v5-global--ZIndex--sm);
13233
- --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
13234
- --pf-v5-c-drawer__panel--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
13235
- --pf-v5-c-drawer__panel--TransitionDuration: var(--pf-v5-global--TransitionDuration);
13233
+ --pf-v5-c-drawer__panel--ZIndex: var(--pf-t--global--Zindex--sm);
13234
+ --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
13235
+ --pf-v5-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13236
+ --pf-v5-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
13237
+ --pf-v5-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
13238
+ --pf-v5-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
13239
+ --pf-v5-c-drawer__panel--TransitionDuration: 250ms;
13236
13240
  --pf-v5-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
13237
13241
  --pf-v5-c-drawer__panel--FlexBasis: 100%;
13238
13242
  --pf-v5-c-drawer__panel--md--FlexBasis--min: 1.5rem;
@@ -13249,46 +13253,47 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13249
13253
  --pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
13250
13254
  --pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
13251
13255
  --pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
13252
- --pf-v5-c-drawer--child--PaddingTop: var(--pf-v5-global--spacer--md);
13253
- --pf-v5-c-drawer--child--PaddingRight: var(--pf-v5-global--spacer--md);
13254
- --pf-v5-c-drawer--child--PaddingBottom: var(--pf-v5-global--spacer--md);
13255
- --pf-v5-c-drawer--child--PaddingLeft: var(--pf-v5-global--spacer--md);
13256
- --pf-v5-c-drawer--child--md--PaddingTop: var(--pf-v5-global--spacer--lg);
13257
- --pf-v5-c-drawer--child--md--PaddingRight: var(--pf-v5-global--spacer--lg);
13258
- --pf-v5-c-drawer--child--md--PaddingBottom: var(--pf-v5-global--spacer--lg);
13259
- --pf-v5-c-drawer--child--md--PaddingLeft: var(--pf-v5-global--spacer--lg);
13260
- --pf-v5-c-drawer--child--m-padding--PaddingTop: var(--pf-v5-global--spacer--md);
13261
- --pf-v5-c-drawer--child--m-padding--PaddingRight: var(--pf-v5-global--spacer--md);
13262
- --pf-v5-c-drawer--child--m-padding--PaddingBottom: var(--pf-v5-global--spacer--md);
13263
- --pf-v5-c-drawer--child--m-padding--PaddingLeft: var(--pf-v5-global--spacer--md);
13264
- --pf-v5-c-drawer--child--m-padding--md--PaddingTop: var(--pf-v5-global--spacer--lg);
13265
- --pf-v5-c-drawer--child--m-padding--md--PaddingRight: var(--pf-v5-global--spacer--lg);
13266
- --pf-v5-c-drawer--child--m-padding--md--PaddingBottom: var(--pf-v5-global--spacer--lg);
13267
- --pf-v5-c-drawer--child--m-padding--md--PaddingLeft: var(--pf-v5-global--spacer--lg);
13268
- --pf-v5-c-drawer__content--child--PaddingTop: 0;
13269
- --pf-v5-c-drawer__content--child--PaddingRight: 0;
13270
- --pf-v5-c-drawer__content--child--PaddingBottom: 0;
13271
- --pf-v5-c-drawer__content--child--PaddingLeft: 0;
13256
+ --pf-v5-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--sm);
13257
+ --pf-v5-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
13258
+ --pf-v5-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
13259
+ --pf-v5-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
13260
+ --pf-v5-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
13261
+ --pf-v5-c-drawer__description--PaddingInlineStart: var(--pf-t--global--spacer--md);
13262
+ --pf-v5-c-drawer__description--PaddingInlineEnd: var(--pf-t--global--spacer--md);
13263
+ --pf-v5-c-drawer__body--PaddingTop--base: var(--pf-t--global--spacer--md);
13264
+ --pf-v5-c-drawer__body--PaddingRight--base: var(--pf-t--global--spacer--md);
13265
+ --pf-v5-c-drawer__body--PaddingBottom--base: var(--pf-t--global--spacer--md);
13266
+ --pf-v5-c-drawer__body--PaddingLeft--base: var(--pf-t--global--spacer--md);
13267
+ --pf-v5-c-drawer__content__body--PaddingTop: 0;
13268
+ --pf-v5-c-drawer__content__body--PaddingRight: 0;
13269
+ --pf-v5-c-drawer__content__body--PaddingBottom: 0;
13270
+ --pf-v5-c-drawer__content__body--PaddingLeft: 0;
13271
+ --pf-v5-c-drawer__panel__body--PaddingTop: var(--pf-v5-c-drawer__body--PaddingTop--base);
13272
+ --pf-v5-c-drawer__panel__body--PaddingRight: var(--pf-v5-c-drawer__body--PaddingRight--base);
13273
+ --pf-v5-c-drawer__panel__body--PaddingBottom: var(--pf-v5-c-drawer__body--PaddingBottom--base);
13274
+ --pf-v5-c-drawer__panel__body--PaddingLeft: var(--pf-v5-c-drawer__body--PaddingLeft--base);
13275
+ --pf-v5-c-drawer__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
13276
+ --pf-v5-c-drawer__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
13277
+ --pf-v5-c-drawer__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
13278
+ --pf-v5-c-drawer__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
13272
13279
  --pf-v5-c-drawer__splitter--Height: 0.5625rem;
13273
13280
  --pf-v5-c-drawer__splitter--Width: 100%;
13274
- --pf-v5-c-drawer__splitter--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
13281
+ --pf-v5-c-drawer__splitter--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13275
13282
  --pf-v5-c-drawer__splitter--Cursor: row-resize;
13276
13283
  --pf-v5-c-drawer__splitter--m-vertical--Height: 100%;
13277
13284
  --pf-v5-c-drawer__splitter--m-vertical--Width: 0.5625rem;
13278
13285
  --pf-v5-c-drawer__splitter--m-vertical--Cursor: col-resize;
13279
13286
  --pf-v5-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
13280
- --pf-v5-c-drawer__splitter--after--BorderColor: var(--pf-v5-global--BorderColor--100);
13281
- --pf-v5-c-drawer__splitter--after--border-width--base: var(--pf-v5-global--BorderWidth--sm);
13287
+ --pf-v5-c-drawer__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
13288
+ --pf-v5-c-drawer__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
13282
13289
  --pf-v5-c-drawer__splitter--after--BorderTopWidth: 0;
13283
13290
  --pf-v5-c-drawer__splitter--after--BorderRightWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
13284
13291
  --pf-v5-c-drawer__splitter--after--BorderBottomWidth: 0;
13285
- --pf-v5-c-drawer__splitter--after--BorderLeftWidth: 0;
13286
- --pf-v5-c-drawer--m-panel-left__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
13292
+ --pf-v5-c-drawer__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
13293
+ --pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderTopWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
13287
13294
  --pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
13288
13295
  --pf-v5-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
13289
13296
  --pf-v5-c-drawer--m-inline__splitter-handle--Left: 50%;
13290
- --pf-v5-c-drawer--m-inline__splitter--after--BorderRightWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
13291
- --pf-v5-c-drawer--m-inline__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
13292
13297
  --pf-v5-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
13293
13298
  --pf-v5-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top: 50%;
13294
13299
  --pf-v5-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
@@ -13296,62 +13301,54 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13296
13301
  --pf-v5-c-drawer__splitter-handle--Left: calc(50% - var(--pf-v5-c-drawer__splitter--after--border-width--base));
13297
13302
  --pf-v5-c-drawer--m-panel-left__splitter-handle--Left: 50%;
13298
13303
  --pf-v5-c-drawer--m-panel-bottom__splitter-handle--Top: calc(50% - var(--pf-v5-c-drawer__splitter--after--border-width--base));
13299
- --pf-v5-c-drawer__splitter-handle--after--BorderColor: var(--pf-v5-global--Color--200);
13300
- --pf-v5-c-drawer__splitter-handle--after--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
13304
+ --pf-v5-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--default);
13305
+ --pf-v5-c-drawer__splitter-handle--after--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
13301
13306
  --pf-v5-c-drawer__splitter-handle--after--BorderRightWidth: 0;
13302
- --pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
13307
+ --pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
13303
13308
  --pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth: 0;
13304
- --pf-v5-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-v5-global--Color--100);
13305
- --pf-v5-c-drawer__splitter--focus__splitter-handle--after--BorderColor: var(--pf-v5-global--Color--100);
13309
+ --pf-v5-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--hover);
13306
13310
  --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth: 0;
13307
- --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
13311
+ --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth: var(--pf-t--global--border--width--divider--default);
13308
13312
  --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth: 0;
13309
- --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
13313
+ --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
13310
13314
  --pf-v5-c-drawer__splitter-handle--after--Width: 0.75rem;
13311
13315
  --pf-v5-c-drawer__splitter-handle--after--Height: 0.25rem;
13312
13316
  --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
13313
13317
  --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
13314
- --pf-v5-c-drawer__actions--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
13315
- --pf-v5-c-drawer__actions--MarginRight: calc(var(--pf-v5-global--spacer--form-element) * -1);
13318
+ --pf-v5-c-drawer__actions--MarginTop: calc(var(--pf-t--global--spacer--xs) * -1.5);
13319
+ --pf-v5-c-drawer__actions--MarginRight: calc(var(--pf-t--global--spacer--xs) * -1.5);
13316
13320
  --pf-v5-c-drawer__panel--BoxShadow: none;
13317
- --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
13318
- --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
13319
- --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
13320
- --pf-v5-c-drawer__panel--after--Width: var(--pf-v5-global--BorderWidth--sm);
13321
- --pf-v5-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-v5-global--BorderWidth--sm);
13321
+ --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--top);
13322
+ --pf-v5-c-drawer__panel--after--Width: var(--pf-t--global--border--width--divider--default);
13323
+ --pf-v5-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--divider--default);
13322
13324
  --pf-v5-c-drawer__panel--after--BackgroundColor: transparent;
13323
- --pf-v5-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-v5-global--BorderColor--100);
13325
+ --pf-v5-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
13324
13326
  --pf-v5-c-drawer--m-inline__panel--PaddingLeft: var(--pf-v5-c-drawer__panel--after--Width);
13325
13327
  --pf-v5-c-drawer--m-panel-left--m-inline__panel--PaddingRight: var(--pf-v5-c-drawer__panel--after--Width);
13326
13328
  --pf-v5-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop: var(--pf-v5-c-drawer__panel--after--Width);
13327
- display: flex;
13328
- flex-direction: column;
13329
- height: 100%;
13330
- overflow-x: hidden;
13331
- }
13332
- @media screen and (min-width: 768px) {
13333
- .pf-v5-c-drawer {
13334
- --pf-v5-c-drawer--child--PaddingTop: var(--pf-v5-c-drawer--child--md--PaddingTop);
13335
- --pf-v5-c-drawer--child--PaddingRight: var(--pf-v5-c-drawer--child--md--PaddingRight);
13336
- --pf-v5-c-drawer--child--PaddingBottom: var(--pf-v5-c-drawer--child--md--PaddingBottom);
13337
- --pf-v5-c-drawer--child--PaddingLeft: var(--pf-v5-c-drawer--child--md--PaddingLeft);
13338
- --pf-v5-c-drawer--child--m-padding--PaddingTop: var(--pf-v5-c-drawer--child--m-padding--md--PaddingTop);
13339
- --pf-v5-c-drawer--child--m-padding--PaddingRight: var(--pf-v5-c-drawer--child--m-padding--md--PaddingRight);
13340
- --pf-v5-c-drawer--child--m-padding--PaddingBottom: var(--pf-v5-c-drawer--child--m-padding--md--PaddingBottom);
13341
- --pf-v5-c-drawer--child--m-padding--PaddingLeft: var(--pf-v5-c-drawer--child--m-padding--md--PaddingLeft);
13342
- }
13343
13329
  }
13344
13330
  @media screen and (min-width: 1200px) {
13345
- .pf-v5-c-drawer {
13331
+ :where(:root),
13332
+ :where(.pf-v5-c-drawer) {
13346
13333
  --pf-v5-c-drawer__panel--MinWidth: var(--pf-v5-c-drawer__panel--xl--MinWidth);
13347
13334
  }
13348
- .pf-v5-c-drawer.pf-m-panel-bottom {
13335
+ :where(:root).pf-m-panel-bottom,
13336
+ :where(.pf-v5-c-drawer).pf-m-panel-bottom {
13349
13337
  --pf-v5-c-drawer__panel--MinWidth: auto;
13350
13338
  --pf-v5-c-drawer__panel--MinHeight: var(--pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight);
13351
13339
  }
13352
13340
  }
13341
+
13342
+ .pf-v5-c-drawer {
13343
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--left);
13344
+ --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
13345
+ display: flex;
13346
+ flex-direction: column;
13347
+ height: 100%;
13348
+ overflow-x: hidden;
13349
+ }
13353
13350
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
13354
- --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
13351
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--right);
13355
13352
  }
13356
13353
 
13357
13354
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
@@ -13401,12 +13398,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13401
13398
  flex-grow: 0;
13402
13399
  background-color: var(--pf-v5-c-drawer__section--BackgroundColor);
13403
13400
  }
13401
+ .pf-v5-c-drawer__section.pf-m-secondary {
13402
+ --pf-v5-c-drawer__section--BackgroundColor: var(--pf-v5-c-drawer__section--m-secondary--BackgroundColor);
13403
+ }
13404
13404
  .pf-v5-c-drawer__section.pf-m-no-background {
13405
13405
  --pf-v5-c-drawer__section--BackgroundColor: transparent;
13406
13406
  }
13407
- .pf-v5-c-drawer__section.pf-m-light-200 {
13408
- --pf-v5-c-drawer__section--BackgroundColor: var(--pf-v5-c-drawer__section--m-light-200--BackgroundColor);
13409
- }
13410
13407
 
13411
13408
  .pf-v5-c-drawer__main {
13412
13409
  display: flex;
@@ -13427,24 +13424,26 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13427
13424
  z-index: var(--pf-v5-c-drawer__content--ZIndex);
13428
13425
  flex-basis: var(--pf-v5-c-drawer__content--FlexBasis);
13429
13426
  order: 0;
13427
+ background-color: var(--pf-v5-c-drawer__content--BackgroundColor);
13428
+ }
13429
+ .pf-v5-c-drawer__content.pf-m-secondary {
13430
+ --pf-v5-c-drawer__content--BackgroundColor: var(--pf-v5-c-drawer__content--m-secondary--BackgroundColor);
13430
13431
  }
13431
13432
  .pf-v5-c-drawer__content.pf-m-no-background {
13432
13433
  --pf-v5-c-drawer__content--BackgroundColor: transparent;
13433
13434
  }
13434
- .pf-v5-c-drawer__content.pf-m-light-200 {
13435
- --pf-v5-c-drawer__content--BackgroundColor: var(--pf-v5-c-drawer__content--m-light-200--BackgroundColor);
13436
- }
13437
13435
  .pf-v5-c-drawer__content > .pf-v5-c-drawer__body {
13438
- padding-block-start: var(--pf-v5-c-drawer__content--child--PaddingTop);
13439
- padding-block-end: var(--pf-v5-c-drawer__content--child--PaddingBottom);
13440
- padding-inline-start: var(--pf-v5-c-drawer__content--child--PaddingLeft);
13441
- padding-inline-end: var(--pf-v5-c-drawer__content--child--PaddingRight);
13436
+ padding-block-start: var(--pf-v5-c-drawer__content__body--PaddingTop);
13437
+ padding-block-end: var(--pf-v5-c-drawer__content__body--PaddingBottom);
13438
+ padding-inline-start: var(--pf-v5-c-drawer__content__body--PaddingLeft);
13439
+ padding-inline-end: var(--pf-v5-c-drawer__content__body--PaddingRight);
13442
13440
  }
13443
13441
 
13444
13442
  .pf-v5-c-drawer__panel {
13445
13443
  position: relative;
13446
13444
  z-index: var(--pf-v5-c-drawer__panel--ZIndex);
13447
13445
  flex-basis: var(--pf-v5-c-drawer__panel--FlexBasis);
13446
+ row-gap: var(--pf-v5-c-drawer__panel--RowGap);
13448
13447
  order: 1;
13449
13448
  max-height: var(--pf-v5-c-drawer__panel--MaxHeight);
13450
13449
  overflow: auto;
@@ -13463,12 +13462,16 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13463
13462
  content: "";
13464
13463
  background-color: var(--pf-v5-c-drawer__panel--after--BackgroundColor);
13465
13464
  }
13465
+ .pf-v5-c-drawer__panel:not(.pf-m-resizable) {
13466
+ padding-block-start: var(--pf-v5-c-drawer__panel--PaddingBlockStart);
13467
+ padding-block-end: var(--pf-v5-c-drawer__panel--PaddingBlockEnd);
13468
+ }
13469
+ .pf-v5-c-drawer__panel.pf-m-secondary {
13470
+ --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-c-drawer__panel--m-secondary--BackgroundColor);
13471
+ }
13466
13472
  .pf-v5-c-drawer__panel.pf-m-no-background {
13467
13473
  --pf-v5-c-drawer__panel--BackgroundColor: transparent;
13468
13474
  }
13469
- .pf-v5-c-drawer__panel.pf-m-light-200 {
13470
- --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-c-drawer__panel--m-light-200--BackgroundColor);
13471
- }
13472
13475
  @media screen and (min-width: 768px) {
13473
13476
  .pf-v5-c-drawer__panel {
13474
13477
  --pf-v5-c-drawer__panel--FlexBasis:
@@ -13487,8 +13490,18 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13487
13490
  }
13488
13491
  }
13489
13492
 
13493
+ .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body,
13494
+ .pf-v5-c-drawer__panel-main > .pf-v5-c-drawer__body {
13495
+ padding-block-start: var(--pf-v5-c-drawer__panel__body--PaddingTop);
13496
+ padding-block-end: var(--pf-v5-c-drawer__panel__body--PaddingBottom);
13497
+ padding-inline-start: var(--pf-v5-c-drawer__panel__body--PaddingLeft);
13498
+ padding-inline-end: var(--pf-v5-c-drawer__panel__body--PaddingRight);
13499
+ }
13500
+
13490
13501
  .pf-v5-c-drawer__panel-main {
13491
13502
  flex-grow: 1;
13503
+ padding-block-start: var(--pf-v5-c-drawer__panel--PaddingBlockStart);
13504
+ padding-block-end: var(--pf-v5-c-drawer__panel--PaddingBlockEnd);
13492
13505
  }
13493
13506
 
13494
13507
  @keyframes pf-remove-tab-focus {
@@ -13506,6 +13519,11 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13506
13519
  display: grid;
13507
13520
  grid-template-columns: auto;
13508
13521
  grid-auto-columns: max-content;
13522
+ column-gap: var(--pf-v5-c-drawer__head--ColumnGap);
13523
+ padding-block-start: var(--pf-v5-c-drawer__head--PaddingBlockStart);
13524
+ padding-block-end: var(--pf-v5-c-drawer__head--PaddingBlockEnd);
13525
+ padding-inline-start: var(--pf-v5-c-drawer__head--PaddingInlineStart);
13526
+ padding-inline-end: var(--pf-v5-c-drawer__head--PaddingInlineEnd);
13509
13527
  }
13510
13528
  .pf-v5-c-drawer__head > * {
13511
13529
  grid-column: 1;
@@ -13520,25 +13538,19 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13520
13538
  margin-inline-end: var(--pf-v5-c-drawer__actions--MarginRight);
13521
13539
  }
13522
13540
 
13523
- .pf-v5-c-drawer__body {
13524
- padding-block-start: var(--pf-v5-c-drawer--child--PaddingTop);
13525
- padding-block-end: var(--pf-v5-c-drawer--child--PaddingBottom);
13526
- padding-inline-start: var(--pf-v5-c-drawer--child--PaddingLeft);
13527
- padding-inline-end: var(--pf-v5-c-drawer--child--PaddingRight);
13541
+ .pf-v5-c-drawer__description {
13542
+ padding-inline-start: var(--pf-v5-c-drawer__description--PaddingInlineStart);
13543
+ padding-inline-end: var(--pf-v5-c-drawer__description--PaddingInlineEnd);
13528
13544
  }
13545
+
13529
13546
  .pf-v5-c-drawer__body.pf-m-no-padding {
13530
13547
  padding: 0;
13531
13548
  }
13532
- .pf-v5-c-drawer__body.pf-m-no-padding > .pf-v5-c-drawer__actions,
13533
- .pf-v5-c-drawer__body.pf-m-no-padding > .pf-v5-c-drawer__head > .pf-v5-c-drawer__actions {
13534
- margin-block-start: 0;
13535
- margin-inline-end: 0;
13536
- }
13537
13549
  .pf-v5-c-drawer__body.pf-m-padding {
13538
- padding-block-start: var(--pf-v5-c-drawer--child--m-padding--PaddingTop);
13539
- padding-block-end: var(--pf-v5-c-drawer--child--m-padding--PaddingBottom);
13540
- padding-inline-start: var(--pf-v5-c-drawer--child--m-padding--PaddingLeft);
13541
- padding-inline-end: var(--pf-v5-c-drawer--child--m-padding--PaddingRight);
13550
+ padding-block-start: var(--pf-v5-c-drawer__body--m-padding--PaddingTop);
13551
+ padding-block-end: var(--pf-v5-c-drawer__body--m-padding--PaddingBottom);
13552
+ padding-inline-start: var(--pf-v5-c-drawer__body--m-padding--PaddingLeft);
13553
+ padding-inline-end: var(--pf-v5-c-drawer__body--m-padding--PaddingRight);
13542
13554
  }
13543
13555
  .pf-v5-c-drawer__body:not(.pf-m-no-padding) + * {
13544
13556
  padding-block-start: 0;
@@ -13570,12 +13582,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13570
13582
  --pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth: var(--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth);
13571
13583
  --pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth: var(--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth);
13572
13584
  }
13573
- .pf-v5-c-drawer__splitter:hover {
13585
+ .pf-v5-c-drawer__splitter:hover, .pf-v5-c-drawer__splitter:focus {
13574
13586
  --pf-v5-c-drawer__splitter-handle--after--BorderColor: var(--pf-v5-c-drawer__splitter--hover__splitter-handle--after--BorderColor);
13575
13587
  }
13576
- .pf-v5-c-drawer__splitter:focus {
13577
- --pf-v5-c-drawer__splitter-handle--after--BorderColor: var(--pf-v5-c-drawer__splitter--focus__splitter-handle--after--BorderColor);
13578
- }
13579
13588
  .pf-v5-c-drawer__splitter::after {
13580
13589
  position: absolute;
13581
13590
  inset-block-start: 0;
@@ -13651,8 +13660,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13651
13660
  }
13652
13661
  .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__splitter {
13653
13662
  --pf-v5-c-drawer__splitter-handle--Left: var(--pf-v5-c-drawer--m-panel-left__splitter-handle--Left);
13654
- --pf-v5-c-drawer__splitter--after--BorderRightWidth: 0;
13655
- --pf-v5-c-drawer__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer--m-panel-left__splitter--after--BorderLeftWidth);
13656
13663
  order: 1;
13657
13664
  }
13658
13665
  .pf-v5-c-drawer.pf-m-panel-bottom {
@@ -13680,14 +13687,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13680
13687
  }
13681
13688
  .pf-v5-c-drawer.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__splitter {
13682
13689
  --pf-v5-c-drawer__splitter-handle--Top: var(--pf-v5-c-drawer--m-panel-bottom__splitter-handle--Top);
13690
+ --pf-v5-c-drawer__splitter--after--BorderTopWidth: var(--pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderTopWidth);
13683
13691
  --pf-v5-c-drawer__splitter--after--BorderRightWidth: 0;
13684
13692
  --pf-v5-c-drawer__splitter--after--BorderBottomWidth: var(--pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth);
13693
+ --pf-v5-c-drawer__splitter--after--BorderLeftWidth: 0;
13685
13694
  }
13686
13695
  .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__splitter {
13687
13696
  --pf-v5-c-drawer__splitter--m-vertical--Width: var(--pf-v5-c-drawer--m-inline__splitter--m-vertical--Width);
13688
13697
  --pf-v5-c-drawer__splitter-handle--Left: var(--pf-v5-c-drawer--m-inline__splitter-handle--Left);
13689
- --pf-v5-c-drawer__splitter--after--BorderRightWidth: var(--pf-v5-c-drawer--m-inline__splitter--after--BorderRightWidth);
13690
- --pf-v5-c-drawer__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer--m-inline__splitter--after--BorderLeftWidth);
13691
13698
  outline-offset: var(--pf-v5-c-drawer--m-inline__splitter--focus--OutlineOffset);
13692
13699
  }
13693
13700
  .pf-v5-c-drawer.pf-m-inline.pf-m-panel-bottom > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel.pf-m-resizable > .pf-v5-c-drawer__splitter {
@@ -14053,18 +14060,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14053
14060
  display: none;
14054
14061
  }
14055
14062
  }
14056
- :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
14057
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
14058
- }
14059
-
14060
- :where(.pf-theme-dark) .pf-v5-c-drawer {
14061
- --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
14062
- --pf-v5-c-drawer__splitter--BackgroundColor: transparent;
14063
- }
14064
- :where(.pf-theme-dark) .pf-v5-c-drawer.pf-m-inline, :where(.pf-theme-dark) .pf-v5-c-drawer.pf-m-static {
14065
- --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
14066
- }
14067
-
14068
14063
  .pf-v5-c-dropdown {
14069
14064
  --pf-v5-c-dropdown__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
14070
14065
  --pf-v5-c-dropdown__toggle--PaddingRight: var(--pf-v5-global--spacer--sm);