@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.
Files changed (12) hide show
  1. package/components/Drawer/drawer.css +113 -113
  2. package/components/Drawer/drawer.scss +135 -136
  3. package/docs/components/Drawer/examples/Drawer.md +294 -256
  4. package/docs/demos/Drawer/examples/Drawer.md +30 -26
  5. package/docs/demos/JumpLinks/examples/JumpLinks.md +30 -26
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +113 -118
  8. package/patternfly-theme-dark-unversioned.css +113 -118
  9. package/patternfly.css +113 -118
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
  12. package/components/Drawer/themes/dark/drawer.scss +0 -13
package/docs/demos/Drawer/examples/Drawer.md CHANGED
@@ -1513,22 +1513,24 @@ wrapperTag: div
1513
1513
  </div>
1514
1514
  </div>
1515
1515
  <div class="pf-v5-c-drawer__panel" hidden>
1516
- <div class="pf-v5-c-drawer__body">
1517
- <div class="pf-v5-c-drawer__head">
1518
- <span>drawer-panel</span>
1519
- <div class="pf-v5-c-drawer__actions">
1520
- <div class="pf-v5-c-drawer__close">
1521
- <button
1522
- class="pf-v5-c-button pf-m-plain"
1523
- type="button"
1524
- aria-label="Close drawer panel"
1525
- >
1526
- <i class="fas fa-times" aria-hidden="true"></i>
1527
- </button>
1528
- </div>
1516
+ <div class="pf-v5-c-drawer__head">
1517
+ <span>Drawer panel header content</span>
1518
+ <div class="pf-v5-c-drawer__actions">
1519
+ <div class="pf-v5-c-drawer__close">
1520
+ <button
1521
+ class="pf-v5-c-button pf-m-plain"
1522
+ type="button"
1523
+ aria-label="Close drawer panel"
1524
+ >
1525
+ <i class="fas fa-times" aria-hidden="true"></i>
1526
+ </button>
1529
1527
  </div>
1530
1528
  </div>
1531
1529
  </div>
1530
+ <div
1531
+ class="pf-v5-c-drawer__description"
1532
+ >This is a helpful description of the drawer panel.</div>
1533
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
1532
1534
  </div>
1533
1535
  </div>
1534
1536
  </div>
@@ -1876,22 +1878,24 @@ wrapperTag: div
1876
1878
  </div>
1877
1879
  </div>
1878
1880
  <div class="pf-v5-c-drawer__panel">
1879
- <div class="pf-v5-c-drawer__body">
1880
- <div class="pf-v5-c-drawer__head">
1881
- <span>drawer-panel</span>
1882
- <div class="pf-v5-c-drawer__actions">
1883
- <div class="pf-v5-c-drawer__close">
1884
- <button
1885
- class="pf-v5-c-button pf-m-plain"
1886
- type="button"
1887
- aria-label="Close drawer panel"
1888
- >
1889
- <i class="fas fa-times" aria-hidden="true"></i>
1890
- </button>
1891
- </div>
1881
+ <div class="pf-v5-c-drawer__head">
1882
+ <span>Drawer panel header content</span>
1883
+ <div class="pf-v5-c-drawer__actions">
1884
+ <div class="pf-v5-c-drawer__close">
1885
+ <button
1886
+ class="pf-v5-c-button pf-m-plain"
1887
+ type="button"
1888
+ aria-label="Close drawer panel"
1889
+ >
1890
+ <i class="fas fa-times" aria-hidden="true"></i>
1891
+ </button>
1892
1892
  </div>
1893
1893
  </div>
1894
1894
  </div>
1895
+ <div
1896
+ class="pf-v5-c-drawer__description"
1897
+ >This is a helpful description of the drawer panel.</div>
1898
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
1895
1899
  </div>
1896
1900
  </div>
1897
1901
  </div>
package/docs/demos/JumpLinks/examples/JumpLinks.md CHANGED
@@ -1873,22 +1873,24 @@ section: components
1873
1873
  </div>
1874
1874
  </div>
1875
1875
  <div class="pf-v5-c-drawer__panel" hidden>
1876
- <div class="pf-v5-c-drawer__body">
1877
- <div class="pf-v5-c-drawer__head">
1878
- <span>drawer-panel</span>
1879
- <div class="pf-v5-c-drawer__actions">
1880
- <div class="pf-v5-c-drawer__close">
1881
- <button
1882
- class="pf-v5-c-button pf-m-plain"
1883
- type="button"
1884
- aria-label="Close drawer panel"
1885
- >
1886
- <i class="fas fa-times" aria-hidden="true"></i>
1887
- </button>
1888
- </div>
1876
+ <div class="pf-v5-c-drawer__head">
1877
+ <span>Drawer panel header content</span>
1878
+ <div class="pf-v5-c-drawer__actions">
1879
+ <div class="pf-v5-c-drawer__close">
1880
+ <button
1881
+ class="pf-v5-c-button pf-m-plain"
1882
+ type="button"
1883
+ aria-label="Close drawer panel"
1884
+ >
1885
+ <i class="fas fa-times" aria-hidden="true"></i>
1886
+ </button>
1889
1887
  </div>
1890
1888
  </div>
1891
1889
  </div>
1890
+ <div
1891
+ class="pf-v5-c-drawer__description"
1892
+ >This is a helpful description of the drawer panel.</div>
1893
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
1892
1894
  </div>
1893
1895
  </div>
1894
1896
  </div>
@@ -2236,22 +2238,24 @@ section: components
2236
2238
  </div>
2237
2239
  </div>
2238
2240
  <div class="pf-v5-c-drawer__panel">
2239
- <div class="pf-v5-c-drawer__body">
2240
- <div class="pf-v5-c-drawer__head">
2241
- <span>drawer-panel</span>
2242
- <div class="pf-v5-c-drawer__actions">
2243
- <div class="pf-v5-c-drawer__close">
2244
- <button
2245
- class="pf-v5-c-button pf-m-plain"
2246
- type="button"
2247
- aria-label="Close drawer panel"
2248
- >
2249
- <i class="fas fa-times" aria-hidden="true"></i>
2250
- </button>
2251
- </div>
2241
+ <div class="pf-v5-c-drawer__head">
2242
+ <span>Drawer panel header content</span>
2243
+ <div class="pf-v5-c-drawer__actions">
2244
+ <div class="pf-v5-c-drawer__close">
2245
+ <button
2246
+ class="pf-v5-c-button pf-m-plain"
2247
+ type="button"
2248
+ aria-label="Close drawer panel"
2249
+ >
2250
+ <i class="fas fa-times" aria-hidden="true"></i>
2251
+ </button>
2252
2252
  </div>
2253
2253
  </div>
2254
2254
  </div>
2255
+ <div
2256
+ class="pf-v5-c-drawer__description"
2257
+ >This is a helpful description of the drawer panel.</div>
2258
+ <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
2255
2259
  </div>
2256
2260
  </div>
2257
2261
  </div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.62",
4
+ "version": "6.0.0-alpha.63",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -13103,19 +13103,23 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13103
13103
  }
13104
13104
  }
13105
13105
 
13106
- .pf-v5-c-drawer {
13107
- --pf-v5-c-drawer__section--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
13108
- --pf-v5-c-drawer__section--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
13106
+ :where(:root),
13107
+ :where(.pf-v5-c-drawer) {
13108
+ --pf-v5-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13109
+ --pf-v5-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13109
13110
  --pf-v5-c-drawer__content--FlexBasis: 100%;
13110
- --pf-v5-c-drawer__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
13111
- --pf-v5-c-drawer__content--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
13112
- --pf-v5-c-drawer__content--ZIndex: var(--pf-v5-global--ZIndex--xs);
13111
+ --pf-v5-c-drawer__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13112
+ --pf-v5-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13113
+ --pf-v5-c-drawer__content--ZIndex: var(--pf-t--global--Zindex--xs);
13113
13114
  --pf-v5-c-drawer__panel--MinWidth: 50%;
13114
13115
  --pf-v5-c-drawer__panel--MaxHeight: auto;
13115
- --pf-v5-c-drawer__panel--ZIndex: var(--pf-v5-global--ZIndex--sm);
13116
- --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
13117
- --pf-v5-c-drawer__panel--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
13118
- --pf-v5-c-drawer__panel--TransitionDuration: var(--pf-v5-global--TransitionDuration);
13116
+ --pf-v5-c-drawer__panel--ZIndex: var(--pf-t--global--Zindex--sm);
13117
+ --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
13118
+ --pf-v5-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13119
+ --pf-v5-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
13120
+ --pf-v5-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
13121
+ --pf-v5-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
13122
+ --pf-v5-c-drawer__panel--TransitionDuration: 250ms;
13119
13123
  --pf-v5-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
13120
13124
  --pf-v5-c-drawer__panel--FlexBasis: 100%;
13121
13125
  --pf-v5-c-drawer__panel--md--FlexBasis--min: 1.5rem;
@@ -13132,46 +13136,47 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13132
13136
  --pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
13133
13137
  --pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
13134
13138
  --pf-v5-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
13135
- --pf-v5-c-drawer--child--PaddingTop: var(--pf-v5-global--spacer--md);
13136
- --pf-v5-c-drawer--child--PaddingRight: var(--pf-v5-global--spacer--md);
13137
- --pf-v5-c-drawer--child--PaddingBottom: var(--pf-v5-global--spacer--md);
13138
- --pf-v5-c-drawer--child--PaddingLeft: var(--pf-v5-global--spacer--md);
13139
- --pf-v5-c-drawer--child--md--PaddingTop: var(--pf-v5-global--spacer--lg);
13140
- --pf-v5-c-drawer--child--md--PaddingRight: var(--pf-v5-global--spacer--lg);
13141
- --pf-v5-c-drawer--child--md--PaddingBottom: var(--pf-v5-global--spacer--lg);
13142
- --pf-v5-c-drawer--child--md--PaddingLeft: var(--pf-v5-global--spacer--lg);
13143
- --pf-v5-c-drawer--child--m-padding--PaddingTop: var(--pf-v5-global--spacer--md);
13144
- --pf-v5-c-drawer--child--m-padding--PaddingRight: var(--pf-v5-global--spacer--md);
13145
- --pf-v5-c-drawer--child--m-padding--PaddingBottom: var(--pf-v5-global--spacer--md);
13146
- --pf-v5-c-drawer--child--m-padding--PaddingLeft: var(--pf-v5-global--spacer--md);
13147
- --pf-v5-c-drawer--child--m-padding--md--PaddingTop: var(--pf-v5-global--spacer--lg);
13148
- --pf-v5-c-drawer--child--m-padding--md--PaddingRight: var(--pf-v5-global--spacer--lg);
13149
- --pf-v5-c-drawer--child--m-padding--md--PaddingBottom: var(--pf-v5-global--spacer--lg);
13150
- --pf-v5-c-drawer--child--m-padding--md--PaddingLeft: var(--pf-v5-global--spacer--lg);
13151
- --pf-v5-c-drawer__content--child--PaddingTop: 0;
13152
- --pf-v5-c-drawer__content--child--PaddingRight: 0;
13153
- --pf-v5-c-drawer__content--child--PaddingBottom: 0;
13154
- --pf-v5-c-drawer__content--child--PaddingLeft: 0;
13139
+ --pf-v5-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--sm);
13140
+ --pf-v5-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
13141
+ --pf-v5-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
13142
+ --pf-v5-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
13143
+ --pf-v5-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
13144
+ --pf-v5-c-drawer__description--PaddingInlineStart: var(--pf-t--global--spacer--md);
13145
+ --pf-v5-c-drawer__description--PaddingInlineEnd: var(--pf-t--global--spacer--md);
13146
+ --pf-v5-c-drawer__body--PaddingTop--base: var(--pf-t--global--spacer--md);
13147
+ --pf-v5-c-drawer__body--PaddingRight--base: var(--pf-t--global--spacer--md);
13148
+ --pf-v5-c-drawer__body--PaddingBottom--base: var(--pf-t--global--spacer--md);
13149
+ --pf-v5-c-drawer__body--PaddingLeft--base: var(--pf-t--global--spacer--md);
13150
+ --pf-v5-c-drawer__content__body--PaddingTop: 0;
13151
+ --pf-v5-c-drawer__content__body--PaddingRight: 0;
13152
+ --pf-v5-c-drawer__content__body--PaddingBottom: 0;
13153
+ --pf-v5-c-drawer__content__body--PaddingLeft: 0;
13154
+ --pf-v5-c-drawer__panel__body--PaddingTop: var(--pf-v5-c-drawer__body--PaddingTop--base);
13155
+ --pf-v5-c-drawer__panel__body--PaddingRight: var(--pf-v5-c-drawer__body--PaddingRight--base);
13156
+ --pf-v5-c-drawer__panel__body--PaddingBottom: var(--pf-v5-c-drawer__body--PaddingBottom--base);
13157
+ --pf-v5-c-drawer__panel__body--PaddingLeft: var(--pf-v5-c-drawer__body--PaddingLeft--base);
13158
+ --pf-v5-c-drawer__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
13159
+ --pf-v5-c-drawer__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
13160
+ --pf-v5-c-drawer__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
13161
+ --pf-v5-c-drawer__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
13155
13162
  --pf-v5-c-drawer__splitter--Height: 0.5625rem;
13156
13163
  --pf-v5-c-drawer__splitter--Width: 100%;
13157
- --pf-v5-c-drawer__splitter--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
13164
+ --pf-v5-c-drawer__splitter--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13158
13165
  --pf-v5-c-drawer__splitter--Cursor: row-resize;
13159
13166
  --pf-v5-c-drawer__splitter--m-vertical--Height: 100%;
13160
13167
  --pf-v5-c-drawer__splitter--m-vertical--Width: 0.5625rem;
13161
13168
  --pf-v5-c-drawer__splitter--m-vertical--Cursor: col-resize;
13162
13169
  --pf-v5-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
13163
- --pf-v5-c-drawer__splitter--after--BorderColor: var(--pf-v5-global--BorderColor--100);
13164
- --pf-v5-c-drawer__splitter--after--border-width--base: var(--pf-v5-global--BorderWidth--sm);
13170
+ --pf-v5-c-drawer__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
13171
+ --pf-v5-c-drawer__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
13165
13172
  --pf-v5-c-drawer__splitter--after--BorderTopWidth: 0;
13166
13173
  --pf-v5-c-drawer__splitter--after--BorderRightWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
13167
13174
  --pf-v5-c-drawer__splitter--after--BorderBottomWidth: 0;
13168
- --pf-v5-c-drawer__splitter--after--BorderLeftWidth: 0;
13169
- --pf-v5-c-drawer--m-panel-left__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
13175
+ --pf-v5-c-drawer__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
13176
+ --pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderTopWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
13170
13177
  --pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
13171
13178
  --pf-v5-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
13172
13179
  --pf-v5-c-drawer--m-inline__splitter-handle--Left: 50%;
13173
- --pf-v5-c-drawer--m-inline__splitter--after--BorderRightWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
13174
- --pf-v5-c-drawer--m-inline__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
13175
13180
  --pf-v5-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
13176
13181
  --pf-v5-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top: 50%;
13177
13182
  --pf-v5-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth: var(--pf-v5-c-drawer__splitter--after--border-width--base);
@@ -13179,62 +13184,54 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13179
13184
  --pf-v5-c-drawer__splitter-handle--Left: calc(50% - var(--pf-v5-c-drawer__splitter--after--border-width--base));
13180
13185
  --pf-v5-c-drawer--m-panel-left__splitter-handle--Left: 50%;
13181
13186
  --pf-v5-c-drawer--m-panel-bottom__splitter-handle--Top: calc(50% - var(--pf-v5-c-drawer__splitter--after--border-width--base));
13182
- --pf-v5-c-drawer__splitter-handle--after--BorderColor: var(--pf-v5-global--Color--200);
13183
- --pf-v5-c-drawer__splitter-handle--after--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
13187
+ --pf-v5-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--default);
13188
+ --pf-v5-c-drawer__splitter-handle--after--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
13184
13189
  --pf-v5-c-drawer__splitter-handle--after--BorderRightWidth: 0;
13185
- --pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
13190
+ --pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
13186
13191
  --pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth: 0;
13187
- --pf-v5-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-v5-global--Color--100);
13188
- --pf-v5-c-drawer__splitter--focus__splitter-handle--after--BorderColor: var(--pf-v5-global--Color--100);
13192
+ --pf-v5-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--hover);
13189
13193
  --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth: 0;
13190
- --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
13194
+ --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth: var(--pf-t--global--border--width--divider--default);
13191
13195
  --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth: 0;
13192
- --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
13196
+ --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
13193
13197
  --pf-v5-c-drawer__splitter-handle--after--Width: 0.75rem;
13194
13198
  --pf-v5-c-drawer__splitter-handle--after--Height: 0.25rem;
13195
13199
  --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
13196
13200
  --pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
13197
- --pf-v5-c-drawer__actions--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
13198
- --pf-v5-c-drawer__actions--MarginRight: calc(var(--pf-v5-global--spacer--form-element) * -1);
13201
+ --pf-v5-c-drawer__actions--MarginTop: calc(var(--pf-t--global--spacer--xs) * -1.5);
13202
+ --pf-v5-c-drawer__actions--MarginRight: calc(var(--pf-t--global--spacer--xs) * -1.5);
13199
13203
  --pf-v5-c-drawer__panel--BoxShadow: none;
13200
- --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
13201
- --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
13202
- --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
13203
- --pf-v5-c-drawer__panel--after--Width: var(--pf-v5-global--BorderWidth--sm);
13204
- --pf-v5-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-v5-global--BorderWidth--sm);
13204
+ --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--top);
13205
+ --pf-v5-c-drawer__panel--after--Width: var(--pf-t--global--border--width--divider--default);
13206
+ --pf-v5-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--divider--default);
13205
13207
  --pf-v5-c-drawer__panel--after--BackgroundColor: transparent;
13206
- --pf-v5-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-v5-global--BorderColor--100);
13208
+ --pf-v5-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
13207
13209
  --pf-v5-c-drawer--m-inline__panel--PaddingLeft: var(--pf-v5-c-drawer__panel--after--Width);
13208
13210
  --pf-v5-c-drawer--m-panel-left--m-inline__panel--PaddingRight: var(--pf-v5-c-drawer__panel--after--Width);
13209
13211
  --pf-v5-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop: var(--pf-v5-c-drawer__panel--after--Width);
13210
- display: flex;
13211
- flex-direction: column;
13212
- height: 100%;
13213
- overflow-x: hidden;
13214
- }
13215
- @media screen and (min-width: 768px) {
13216
- .pf-v5-c-drawer {
13217
- --pf-v5-c-drawer--child--PaddingTop: var(--pf-v5-c-drawer--child--md--PaddingTop);
13218
- --pf-v5-c-drawer--child--PaddingRight: var(--pf-v5-c-drawer--child--md--PaddingRight);
13219
- --pf-v5-c-drawer--child--PaddingBottom: var(--pf-v5-c-drawer--child--md--PaddingBottom);
13220
- --pf-v5-c-drawer--child--PaddingLeft: var(--pf-v5-c-drawer--child--md--PaddingLeft);
13221
- --pf-v5-c-drawer--child--m-padding--PaddingTop: var(--pf-v5-c-drawer--child--m-padding--md--PaddingTop);
13222
- --pf-v5-c-drawer--child--m-padding--PaddingRight: var(--pf-v5-c-drawer--child--m-padding--md--PaddingRight);
13223
- --pf-v5-c-drawer--child--m-padding--PaddingBottom: var(--pf-v5-c-drawer--child--m-padding--md--PaddingBottom);
13224
- --pf-v5-c-drawer--child--m-padding--PaddingLeft: var(--pf-v5-c-drawer--child--m-padding--md--PaddingLeft);
13225
- }
13226
13212
  }
13227
13213
  @media screen and (min-width: 1200px) {
13228
- .pf-v5-c-drawer {
13214
+ :where(:root),
13215
+ :where(.pf-v5-c-drawer) {
13229
13216
  --pf-v5-c-drawer__panel--MinWidth: var(--pf-v5-c-drawer__panel--xl--MinWidth);
13230
13217
  }
13231
- .pf-v5-c-drawer.pf-m-panel-bottom {
13218
+ :where(:root).pf-m-panel-bottom,
13219
+ :where(.pf-v5-c-drawer).pf-m-panel-bottom {
13232
13220
  --pf-v5-c-drawer__panel--MinWidth: auto;
13233
13221
  --pf-v5-c-drawer__panel--MinHeight: var(--pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight);
13234
13222
  }
13235
13223
  }
13224
+
13225
+ .pf-v5-c-drawer {
13226
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--left);
13227
+ --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
13228
+ display: flex;
13229
+ flex-direction: column;
13230
+ height: 100%;
13231
+ overflow-x: hidden;
13232
+ }
13236
13233
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
13237
- --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
13234
+ --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--right);
13238
13235
  }
13239
13236
 
13240
13237
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
@@ -13284,12 +13281,12 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13284
13281
  flex-grow: 0;
13285
13282
  background-color: var(--pf-v5-c-drawer__section--BackgroundColor);
13286
13283
  }
13284
+ .pf-v5-c-drawer__section.pf-m-secondary {
13285
+ --pf-v5-c-drawer__section--BackgroundColor: var(--pf-v5-c-drawer__section--m-secondary--BackgroundColor);
13286
+ }
13287
13287
  .pf-v5-c-drawer__section.pf-m-no-background {
13288
13288
  --pf-v5-c-drawer__section--BackgroundColor: transparent;
13289
13289
  }
13290
- .pf-v5-c-drawer__section.pf-m-light-200 {
13291
- --pf-v5-c-drawer__section--BackgroundColor: var(--pf-v5-c-drawer__section--m-light-200--BackgroundColor);
13292
- }
13293
13290
 
13294
13291
  .pf-v5-c-drawer__main {
13295
13292
  display: flex;
@@ -13310,24 +13307,26 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13310
13307
  z-index: var(--pf-v5-c-drawer__content--ZIndex);
13311
13308
  flex-basis: var(--pf-v5-c-drawer__content--FlexBasis);
13312
13309
  order: 0;
13310
+ background-color: var(--pf-v5-c-drawer__content--BackgroundColor);
13311
+ }
13312
+ .pf-v5-c-drawer__content.pf-m-secondary {
13313
+ --pf-v5-c-drawer__content--BackgroundColor: var(--pf-v5-c-drawer__content--m-secondary--BackgroundColor);
13313
13314
  }
13314
13315
  .pf-v5-c-drawer__content.pf-m-no-background {
13315
13316
  --pf-v5-c-drawer__content--BackgroundColor: transparent;
13316
13317
  }
13317
- .pf-v5-c-drawer__content.pf-m-light-200 {
13318
- --pf-v5-c-drawer__content--BackgroundColor: var(--pf-v5-c-drawer__content--m-light-200--BackgroundColor);
13319
- }
13320
13318
  .pf-v5-c-drawer__content > .pf-v5-c-drawer__body {
13321
- padding-block-start: var(--pf-v5-c-drawer__content--child--PaddingTop);
13322
- padding-block-end: var(--pf-v5-c-drawer__content--child--PaddingBottom);
13323
- padding-inline-start: var(--pf-v5-c-drawer__content--child--PaddingLeft);
13324
- padding-inline-end: var(--pf-v5-c-drawer__content--child--PaddingRight);
13319
+ padding-block-start: var(--pf-v5-c-drawer__content__body--PaddingTop);
13320
+ padding-block-end: var(--pf-v5-c-drawer__content__body--PaddingBottom);
13321
+ padding-inline-start: var(--pf-v5-c-drawer__content__body--PaddingLeft);
13322
+ padding-inline-end: var(--pf-v5-c-drawer__content__body--PaddingRight);
13325
13323
  }
13326
13324
 
13327
13325
  .pf-v5-c-drawer__panel {
13328
13326
  position: relative;
13329
13327
  z-index: var(--pf-v5-c-drawer__panel--ZIndex);
13330
13328
  flex-basis: var(--pf-v5-c-drawer__panel--FlexBasis);
13329
+ row-gap: var(--pf-v5-c-drawer__panel--RowGap);
13331
13330
  order: 1;
13332
13331
  max-height: var(--pf-v5-c-drawer__panel--MaxHeight);
13333
13332
  overflow: auto;
@@ -13346,12 +13345,16 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13346
13345
  content: "";
13347
13346
  background-color: var(--pf-v5-c-drawer__panel--after--BackgroundColor);
13348
13347
  }
13348
+ .pf-v5-c-drawer__panel:not(.pf-m-resizable) {
13349
+ padding-block-start: var(--pf-v5-c-drawer__panel--PaddingBlockStart);
13350
+ padding-block-end: var(--pf-v5-c-drawer__panel--PaddingBlockEnd);
13351
+ }
13352
+ .pf-v5-c-drawer__panel.pf-m-secondary {
13353
+ --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-c-drawer__panel--m-secondary--BackgroundColor);
13354
+ }
13349
13355
  .pf-v5-c-drawer__panel.pf-m-no-background {
13350
13356
  --pf-v5-c-drawer__panel--BackgroundColor: transparent;
13351
13357
  }
13352
- .pf-v5-c-drawer__panel.pf-m-light-200 {
13353
- --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-c-drawer__panel--m-light-200--BackgroundColor);
13354
- }
13355
13358
  @media screen and (min-width: 768px) {
13356
13359
  .pf-v5-c-drawer__panel {
13357
13360
  --pf-v5-c-drawer__panel--FlexBasis:
@@ -13370,8 +13373,18 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13370
13373
  }
13371
13374
  }
13372
13375
 
13376
+ .pf-v5-c-drawer__panel > .pf-v5-c-drawer__body,
13377
+ .pf-v5-c-drawer__panel-main > .pf-v5-c-drawer__body {
13378
+ padding-block-start: var(--pf-v5-c-drawer__panel__body--PaddingTop);
13379
+ padding-block-end: var(--pf-v5-c-drawer__panel__body--PaddingBottom);
13380
+ padding-inline-start: var(--pf-v5-c-drawer__panel__body--PaddingLeft);
13381
+ padding-inline-end: var(--pf-v5-c-drawer__panel__body--PaddingRight);
13382
+ }
13383
+
13373
13384
  .pf-v5-c-drawer__panel-main {
13374
13385
  flex-grow: 1;
13386
+ padding-block-start: var(--pf-v5-c-drawer__panel--PaddingBlockStart);
13387
+ padding-block-end: var(--pf-v5-c-drawer__panel--PaddingBlockEnd);
13375
13388
  }
13376
13389
 
13377
13390
  @keyframes pf-remove-tab-focus {
@@ -13389,6 +13402,11 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13389
13402
  display: grid;
13390
13403
  grid-template-columns: auto;
13391
13404
  grid-auto-columns: max-content;
13405
+ column-gap: var(--pf-v5-c-drawer__head--ColumnGap);
13406
+ padding-block-start: var(--pf-v5-c-drawer__head--PaddingBlockStart);
13407
+ padding-block-end: var(--pf-v5-c-drawer__head--PaddingBlockEnd);
13408
+ padding-inline-start: var(--pf-v5-c-drawer__head--PaddingInlineStart);
13409
+ padding-inline-end: var(--pf-v5-c-drawer__head--PaddingInlineEnd);
13392
13410
  }
13393
13411
  .pf-v5-c-drawer__head > * {
13394
13412
  grid-column: 1;
@@ -13403,25 +13421,19 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13403
13421
  margin-inline-end: var(--pf-v5-c-drawer__actions--MarginRight);
13404
13422
  }
13405
13423
 
13406
- .pf-v5-c-drawer__body {
13407
- padding-block-start: var(--pf-v5-c-drawer--child--PaddingTop);
13408
- padding-block-end: var(--pf-v5-c-drawer--child--PaddingBottom);
13409
- padding-inline-start: var(--pf-v5-c-drawer--child--PaddingLeft);
13410
- padding-inline-end: var(--pf-v5-c-drawer--child--PaddingRight);
13424
+ .pf-v5-c-drawer__description {
13425
+ padding-inline-start: var(--pf-v5-c-drawer__description--PaddingInlineStart);
13426
+ padding-inline-end: var(--pf-v5-c-drawer__description--PaddingInlineEnd);
13411
13427
  }
13428
+
13412
13429
  .pf-v5-c-drawer__body.pf-m-no-padding {
13413
13430
  padding: 0;
13414
13431
  }
13415
- .pf-v5-c-drawer__body.pf-m-no-padding > .pf-v5-c-drawer__actions,
13416
- .pf-v5-c-drawer__body.pf-m-no-padding > .pf-v5-c-drawer__head > .pf-v5-c-drawer__actions {
13417
- margin-block-start: 0;
13418
- margin-inline-end: 0;
13419
- }
13420
13432
  .pf-v5-c-drawer__body.pf-m-padding {
13421
- padding-block-start: var(--pf-v5-c-drawer--child--m-padding--PaddingTop);
13422
- padding-block-end: var(--pf-v5-c-drawer--child--m-padding--PaddingBottom);
13423
- padding-inline-start: var(--pf-v5-c-drawer--child--m-padding--PaddingLeft);
13424
- padding-inline-end: var(--pf-v5-c-drawer--child--m-padding--PaddingRight);
13433
+ padding-block-start: var(--pf-v5-c-drawer__body--m-padding--PaddingTop);
13434
+ padding-block-end: var(--pf-v5-c-drawer__body--m-padding--PaddingBottom);
13435
+ padding-inline-start: var(--pf-v5-c-drawer__body--m-padding--PaddingLeft);
13436
+ padding-inline-end: var(--pf-v5-c-drawer__body--m-padding--PaddingRight);
13425
13437
  }
13426
13438
  .pf-v5-c-drawer__body:not(.pf-m-no-padding) + * {
13427
13439
  padding-block-start: 0;
@@ -13453,12 +13465,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13453
13465
  --pf-v5-c-drawer__splitter-handle--after--BorderBottomWidth: var(--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth);
13454
13466
  --pf-v5-c-drawer__splitter-handle--after--BorderLeftWidth: var(--pf-v5-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth);
13455
13467
  }
13456
- .pf-v5-c-drawer__splitter:hover {
13468
+ .pf-v5-c-drawer__splitter:hover, .pf-v5-c-drawer__splitter:focus {
13457
13469
  --pf-v5-c-drawer__splitter-handle--after--BorderColor: var(--pf-v5-c-drawer__splitter--hover__splitter-handle--after--BorderColor);
13458
13470
  }
13459
- .pf-v5-c-drawer__splitter:focus {
13460
- --pf-v5-c-drawer__splitter-handle--after--BorderColor: var(--pf-v5-c-drawer__splitter--focus__splitter-handle--after--BorderColor);
13461
- }
13462
13471
  .pf-v5-c-drawer__splitter::after {
13463
13472
  position: absolute;
13464
13473
  inset-block-start: 0;
@@ -13534,8 +13543,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13534
13543
  }
13535
13544
  .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 {
13536
13545
  --pf-v5-c-drawer__splitter-handle--Left: var(--pf-v5-c-drawer--m-panel-left__splitter-handle--Left);
13537
- --pf-v5-c-drawer__splitter--after--BorderRightWidth: 0;
13538
- --pf-v5-c-drawer__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer--m-panel-left__splitter--after--BorderLeftWidth);
13539
13546
  order: 1;
13540
13547
  }
13541
13548
  .pf-v5-c-drawer.pf-m-panel-bottom {
@@ -13563,14 +13570,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13563
13570
  }
13564
13571
  .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 {
13565
13572
  --pf-v5-c-drawer__splitter-handle--Top: var(--pf-v5-c-drawer--m-panel-bottom__splitter-handle--Top);
13573
+ --pf-v5-c-drawer__splitter--after--BorderTopWidth: var(--pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderTopWidth);
13566
13574
  --pf-v5-c-drawer__splitter--after--BorderRightWidth: 0;
13567
13575
  --pf-v5-c-drawer__splitter--after--BorderBottomWidth: var(--pf-v5-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth);
13576
+ --pf-v5-c-drawer__splitter--after--BorderLeftWidth: 0;
13568
13577
  }
13569
13578
  .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 {
13570
13579
  --pf-v5-c-drawer__splitter--m-vertical--Width: var(--pf-v5-c-drawer--m-inline__splitter--m-vertical--Width);
13571
13580
  --pf-v5-c-drawer__splitter-handle--Left: var(--pf-v5-c-drawer--m-inline__splitter-handle--Left);
13572
- --pf-v5-c-drawer__splitter--after--BorderRightWidth: var(--pf-v5-c-drawer--m-inline__splitter--after--BorderRightWidth);
13573
- --pf-v5-c-drawer__splitter--after--BorderLeftWidth: var(--pf-v5-c-drawer--m-inline__splitter--after--BorderLeftWidth);
13574
13581
  outline-offset: var(--pf-v5-c-drawer--m-inline__splitter--focus--OutlineOffset);
13575
13582
  }
13576
13583
  .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 {
@@ -13936,18 +13943,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
13936
13943
  display: none;
13937
13944
  }
13938
13945
  }
13939
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
13940
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
13941
- }
13942
-
13943
- :where(.pf-v5-theme-dark) .pf-v5-c-drawer {
13944
- --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
13945
- --pf-v5-c-drawer__splitter--BackgroundColor: transparent;
13946
- }
13947
- :where(.pf-v5-theme-dark) .pf-v5-c-drawer.pf-m-inline, :where(.pf-v5-theme-dark) .pf-v5-c-drawer.pf-m-static {
13948
- --pf-v5-c-drawer__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
13949
- }
13950
-
13951
13946
  .pf-v5-c-dropdown {
13952
13947
  --pf-v5-c-dropdown__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
13953
13948
  --pf-v5-c-dropdown__toggle--PaddingRight: var(--pf-v5-global--spacer--sm);