@patternfly/patternfly 6.5.0-prerelease.10 → 6.5.0-prerelease.12

package/icons/PfIcons/volume.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg fill="currentColor" viewBox="0 0 832 1024" role="img">
+  <path d="M416,608 C135.8,608 44.3,549.9 14.5,512 C0,493.6 0,512 0,512 L0,704 C0,774.7 186.2,832 416,832 C645.8,832 832,774.7 832,704 L832,512 C832,512 832,493.6 817.5,512 C787.7,549.9 696.2,608 416,608 L416,608 Z M832,383 C832,453.7 645.8,511 416,511 C186.2,511 0,453.7 0,383 L0,256 C0,185.3 186.2,128 416,128 C645.8,128 832,185.3 832,256 L832,383 Z" />
+</svg>

package/icons/PfIcons/warning-triangle.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg fill="currentColor" viewBox="0 0 1088 1024" role="img">
+  <path d="M1057.10141,663.5 L845.101405,215.4 C787.101405,71.8 665.401405,0 542.901405,0 C420.201405,0 296.701405,71.9 235.001405,215.6 L31.7014051,648.5 C10.4014051,700 -0.0985948775,752.3 0.000697596367,800.8 C0.301405123,924.8 70.2014051,1024 209.101405,1024 L868.401405,1024 C1005.80141,1024 1087.70141,918.6 1088.00215,795.5 C1088.10141,752.4 1078.20141,707.2 1057.10141,663.5 Z M959.401405,800.3 C958.701405,822.9 952.901405,843.5 942.601405,859.7 C926.801405,884.6 902.601405,896.7 868.301405,896.7 L209.101405,896.7 C191.201405,896.7 176.601405,893.8 165.401405,888.2 C157.301405,884 150.801405,878.4 145.401405,870.3 C135.101405,855 129.101405,832 128.401405,805.6 C127.601405,772.8 134.901405,736.5 149.401405,700.5 L353.001405,266.7 C363.201405,242.9 376.101405,221.5 391.101405,203.2 C404.801405,186.6 420.301405,172.4 437.401405,161.1 C469.201405,139.9 505.701405,128.8 542.901405,128.8 C579.701405,128.8 615.401405,139.8 646.001405,160.5 C662.401405,171.6 677.101405,185.4 690.101405,201.6 C704.501405,219.6 716.401405,240.6 725.901405,264 L940.901405,718.9 L941.101405,719.3 L941.301405,719.7 C953.901405,746 960.201405,773.9 959.401405,800.3 Z M586.601405,832 L501.301405,832 C489.501405,831.8 480.201405,821.5 480.001405,808.7 L480.001405,727.3 C480.201405,714.5 489.601405,704.3 501.301405,704 L586.601405,704 C598.401405,704.2 607.701405,714.5 607.901405,727.3 L607.901405,808.7 L608.001405,808.7 C607.701405,821.5 598.301405,831.8 586.601405,832 M639.901405,290.7 L613.201405,610.4 C611.801405,626.9 598.001405,640 581.301405,640 L506.601405,640 C490.001405,640 476.101405,627.2 474.701405,610.7 L448.101405,291 C446.501405,272.3 461.301405,256.3 480.001405,256.3 L608.001405,256 C626.701405,256 641.401405,272 639.901405,290.7" />
+</svg>

package/icons/PfIcons/zone.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg fill="currentColor" viewBox="0 0 1024 1024" role="img">
+  <path d="M1024,368 C1024,164.8 859.2,0 656,0 C567.1,0 485.6,31.5 422,83.9 C404.4,81.3 386.3,80 368,80 C164.8,80 0,244.8 0,448 C0,609 103.4,745.9 247.5,795.8 C302.5,929.7 434.3,1024 588,1024 C791.2,1024 956,859.2 956,656 C956,633.3 953.9,611 950,589.4 C996.4,527.8 1024,451.1 1024,368 Z M390.6,255.9 C404,224.3 422.7,195.7 446.2,170.7 C457.7,173.9 469,177.9 480.1,182.6 C514.4,197.1 545.2,217.9 571.7,244.4 C585.3,258 597.4,272.8 607.9,288.6 C601.3,288.2 594.7,288.1 588,288.1 C505.6,288.1 429.4,315.2 368.1,361 C369,324.5 376.5,289.2 390.6,255.9 Z M646.4,373.7 C652.8,397.7 656,422.5 656,447.8 C656,486.7 648.4,524.4 633.4,559.9 C620,591.5 601.3,620.1 577.8,645.1 C566.3,642.1 555,638.1 543.9,633.4 C509.6,618.9 478.8,598.1 452.3,571.6 C425.8,545.1 405,514.3 390.5,480 C387.1,471.9 384,463.6 381.4,455.2 C382.4,454.2 383.3,453.2 384.3,452.2 C410.8,425.7 441.6,404.9 475.9,390.4 C511.4,375.4 549.1,367.8 588,367.8 C607.8,367.8 627.3,369.8 646.4,373.7 Z M220,656 C220,669.7 220.8,683.2 222.2,696.4 C201.2,684.1 181.8,669.1 164.4,651.6 C137.9,625.1 117.1,594.3 102.6,560 C87.6,524.6 80,486.9 80,448 C80,409.1 87.6,371.4 102.6,335.9 C117.1,301.6 137.9,270.8 164.4,244.3 C190.9,217.8 221.7,197 256,182.5 C286.6,169.6 318.9,162.1 352.2,160.3 C311.7,219.5 288,291 288,368 C288,390.7 290.1,413 294,434.6 C247.5,496.2 220,572.9 220,656 Z M309.6,730.1 C303.2,706.1 300,681.3 300,656 C300,617.1 307.6,579.4 322.6,543.9 C324.1,540.4 325.6,536.9 327.3,533.5 C364.8,607.9 426.8,667.8 502.7,702.6 C495.3,706.5 487.8,710.1 480.1,713.4 C444.6,728.4 406.9,736 368,736 C348.2,736 328.7,734 309.6,730.1 Z M853.3,768 C838.9,802.4 818.1,833.2 791.6,859.6 C765.1,886.1 734.3,906.9 700,921.4 C664.5,936.4 626.8,944 587.9,944 C549,944 511.3,936.4 475.8,921.4 C441.5,906.9 410.7,886.1 384.2,859.6 C370.6,846 358.5,831.2 348,815.4 C354.6,815.8 361.2,815.9 367.9,815.9 C456.8,815.9 538.3,784.4 601.9,732 C619.5,734.6 637.6,735.9 655.9,735.9 C738.3,735.9 814.5,708.8 875.8,663 C874.9,699.4 867.4,734.7 853.3,768 Z M733.8,407.6 C754.8,419.9 774.2,434.9 791.7,452.4 C818.2,478.9 839,509.7 853.5,544 C856.9,552.1 860,560.4 862.6,568.8 C861.6,569.8 860.7,570.8 859.7,571.8 C833.2,598.3 802.4,619.1 768.1,633.6 C737.5,646.5 705.2,654 671.9,655.8 C712.3,596.5 736,525 736,448 C736,434.3 735.2,420.8 733.8,407.6 Z M921.5,480.2 C920,483.7 918.5,487.2 916.8,490.6 C874,405.6 799.3,339.6 708.5,308.2 C673,221.9 605.8,152.1 521.3,113.4 C528.7,109.5 536.2,105.9 543.9,102.6 C579.4,87.6 617.1,80 656,80 C694.9,80 732.6,87.6 768.1,102.6 C802.4,117.1 833.2,137.9 859.7,164.4 C886.2,190.9 907,221.7 921.5,256 C936.5,291.5 944.1,329.2 944.1,368.1 C944.1,407 936.5,444.7 921.5,480.2 Z" />
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.5.0-prerelease.10",
+  "version": "6.5.0-prerelease.12",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -37,10 +37,10 @@
   "devDependencies": {
     "@babel/core": "^7.24.4",
     "@babel/eslint-parser": "^7.24.1",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-transform-class-properties": "^7.24.4",
+    "@babel/plugin-transform-optional-chaining": "^7.24.4",
+    "@babel/plugin-transform-private-methods": "^7.24.4",
+    "@babel/plugin-transform-private-property-in-object": "^7.24.4",
     "@babel/plugin-transform-react-jsx": "^7.23.4",
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
@@ -54,7 +54,7 @@
     "@patternfly/react-core": "6.4.0",
     "@patternfly/react-table": "6.4.0",
     "@starptech/prettyhtml": "^0.10.0",
-    "backstopjs": "^6.3.23",
+    "backstopjs": "^6.3.25",
     "cheerio": "^1.0.0-rc.12",
     "commander": "^12.0.0",
     "cssnano": "^6.1.2",
@@ -69,9 +69,9 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "glob": "^10.3.12",
-    "gulp": "^4.0.2",
-    "gulp-cli": "^2.3.0",
-    "gulp-iconfont": "^11.0.1",
+    "gulp": "^5.0.1",
+    "gulp-cli": "^3.1.0",
+    "gulp-iconfont": "^12.0.0",
     "gulp-iconfont-css": "^3.0.0",
     "gulp-postcss": "^10.0.0",
     "gulp-rename": "^2.0.0",
@@ -87,21 +87,33 @@
     "react-dom": "^18.2.0",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
-    "rimraf": "*",
+    "rimraf": "^6.0.1",
     "sass": "^1.74.1",
     "stylelint": "^16.3.1",
     "stylelint-config-recess-order": "^5.0.0",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-use-logical-spec": "^5.0.1",
-    "surge": "^0.23.1",
+    "surge": "^0.24.6",
     "unified": "^11.0.4",
     "webpack": "^5.91.0"
   },
   "resolutions": {
     "@babel/preset-env": "7.18.2",
     "monaco-editor": "0.34.1",
-    "on-headers": "~1.1.0"
+    "on-headers": "~1.1.0",
+    "form-data": "^4.0.4",
+    "minimist": "^1.2.8",
+    "tar-fs": "^3.1.1",
+    "axios": "^1.13.1",
+    "body-parser": "^2.2.0",
+    "ws": "^8.18.0",
+    "follow-redirects": "^1.15.11",
+    "express": "^4.21.2",
+    "parse-git-config": "^3.0.0",
+    "braces": "^3.0.3",
+    "ip": "^2.0.1",
+    "request": "^2.88.2"
   },
   "repository": {
     "type": "git",

package/patternfly-no-globals.css

@@ -12230,7 +12230,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-compass__message-bar--Width: 450px;
   --pf-v6-c-compass__message-bar--MinWidth: 300px;
   --pf-v6-c-compass__message-bar--MaxWidth: 600px;
-  --pf-v6-c-compass__hero--gradient--angle: 289deg;
+  --pf-v6-c-compass__hero--gradient--angle: 109deg;
   --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
   --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
   --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
@@ -12355,9 +12355,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 .pf-v6-c-compass__panel.pf-m-scrollable {
   overflow: auto;
 }
-.pf-v6-c-compass__panel.pf-m-padding {
-  padding: 0;
-}
 
 .pf-v6-c-compass__hero {
   display: flex;
@@ -12391,21 +12388,24 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 
 /* stylelint-disable */
 @media (max-width: 1200px) {
-  .pf-v6-c-compass {
+  .pf-v6-c-compass * {
     display: none;
   }
-  body {
+  .pf-v6-c-compass {
+    position: relative;
     display: grid;
-    min-height: 100%;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
     place-content: center;
+    gap: 0;
   }
-  body::after {
+  .pf-v6-c-compass::after {
     padding: 1em;
     border-radius: var(--pf-t--global--border--radius--large);
     background: var(--pf-t--global--background--color--primary--default);
     content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
     width: 80%;
-    max-width: 360px;
+    width: 300px;
     border: 1px solid var(--pf-t--global--border--color--default);
     box-shadow: var(--pf-t--global--box-shadow--md);
     white-space: pre-wrap;
@@ -14673,6 +14673,7 @@ ul) {
 }
 
 .pf-v6-c-drawer {
+  --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -14703,6 +14704,7 @@ ul) {
   --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
   --pf-v6-c-drawer__panel--Opacity: 0;
   --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
+  --pf-v6-c-drawer--m-expanded__panel--inset: 0px;
   --pf-v6-c-drawer__panel--FlexBasis: 100%;
   --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
   --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -14718,6 +14720,13 @@ ul) {
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
+  --pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -14834,6 +14843,8 @@ ul) {
 .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
   --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
   --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
+  --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
+  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
 }
 .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
   padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -14857,7 +14868,7 @@ ul) {
   --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
 }
 .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-  transform: translateX(-100%);
+  transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
   visibility: visible;
 }
@@ -14869,7 +14880,7 @@ ul) {
   transform: translateX(0);
 }
 .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-  transform: translate(0, -100%);
+  transform: translate(0, calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
 }
 .pf-v6-c-drawer.pf-m-resizing {
   --pf-v6-c-drawer__panel--TransitionProperty: none;
@@ -14878,6 +14889,21 @@ ul) {
 .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
   pointer-events: auto;
 }
+@media screen and (min-width: 48rem) {
+  .pf-v6-c-drawer.pf-m-pill {
+    --pf-v6-c-drawer__main--Gap: var(--pf-v6-c-drawer--m-pill__main--Gap, revert);
+    --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-pill__panel--BorderColor);
+    --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
+    --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
+    --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
+  }
+  .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+    border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
+    border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
+    border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
+    border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
+  }
+}
 
 .pf-v6-c-drawer__section {
   flex-grow: 0;
@@ -14893,6 +14919,7 @@ ul) {
 .pf-v6-c-drawer__main {
   display: flex;
   flex: 1;
+  gap: var(--pf-v6-c-drawer__main--Gap, 0);
   overflow: hidden;
 }
 
@@ -14931,6 +14958,8 @@ ul) {
   row-gap: var(--pf-v6-c-drawer__panel--RowGap);
   order: 1;
   max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
+  margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
+  margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
   overflow: auto;
   visibility: hidden;
   background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
@@ -14939,6 +14968,7 @@ ul) {
   border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
   border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
   border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
+  border-radius: var(--pf-v6-c-drawer__panel--BorderRadius, revert);
   box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
   opacity: var(--pf-v6-c-drawer__panel--Opacity);
   transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -15126,7 +15156,7 @@ ul) {
     padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
   }
   .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-    transform: translateX(0);
+    transform: translateX(var(--pf-v6-c-drawer--m-expanded__panel--inset));
   }
   .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
     --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
@@ -15138,6 +15168,8 @@ ul) {
     --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
     --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
     --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
+    --pf-v6-c-drawer__panel--MarginBlock: initial;
+    --pf-v6-c-drawer__panel--MarginInline: var(--pf-v6-c-drawer--m-expanded__panel--inset);
     min-width: auto;
     min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
   }

package/patternfly.css

@@ -12370,7 +12370,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-compass__message-bar--Width: 450px;
   --pf-v6-c-compass__message-bar--MinWidth: 300px;
   --pf-v6-c-compass__message-bar--MaxWidth: 600px;
-  --pf-v6-c-compass__hero--gradient--angle: 289deg;
+  --pf-v6-c-compass__hero--gradient--angle: 109deg;
   --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
   --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
   --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
@@ -12495,9 +12495,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 .pf-v6-c-compass__panel.pf-m-scrollable {
   overflow: auto;
 }
-.pf-v6-c-compass__panel.pf-m-padding {
-  padding: 0;
-}
 
 .pf-v6-c-compass__hero {
   display: flex;
@@ -12531,21 +12528,24 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 
 /* stylelint-disable */
 @media (max-width: 1200px) {
-  .pf-v6-c-compass {
+  .pf-v6-c-compass * {
     display: none;
   }
-  body {
+  .pf-v6-c-compass {
+    position: relative;
     display: grid;
-    min-height: 100%;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
     place-content: center;
+    gap: 0;
   }
-  body::after {
+  .pf-v6-c-compass::after {
     padding: 1em;
     border-radius: var(--pf-t--global--border--radius--large);
     background: var(--pf-t--global--background--color--primary--default);
     content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
     width: 80%;
-    max-width: 360px;
+    width: 300px;
     border: 1px solid var(--pf-t--global--border--color--default);
     box-shadow: var(--pf-t--global--box-shadow--md);
     white-space: pre-wrap;
@@ -14813,6 +14813,7 @@ ul) {
 }
 
 .pf-v6-c-drawer {
+  --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -14843,6 +14844,7 @@ ul) {
   --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
   --pf-v6-c-drawer__panel--Opacity: 0;
   --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
+  --pf-v6-c-drawer--m-expanded__panel--inset: 0px;
   --pf-v6-c-drawer__panel--FlexBasis: 100%;
   --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
   --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -14858,6 +14860,13 @@ ul) {
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
+  --pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -14974,6 +14983,8 @@ ul) {
 .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
   --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
   --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
+  --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
+  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
 }
 .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
   padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -14997,7 +15008,7 @@ ul) {
   --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
 }
 .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-  transform: translateX(-100%);
+  transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
   visibility: visible;
 }
@@ -15009,7 +15020,7 @@ ul) {
   transform: translateX(0);
 }
 .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-  transform: translate(0, -100%);
+  transform: translate(0, calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
 }
 .pf-v6-c-drawer.pf-m-resizing {
   --pf-v6-c-drawer__panel--TransitionProperty: none;
@@ -15018,6 +15029,21 @@ ul) {
 .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
   pointer-events: auto;
 }
+@media screen and (min-width: 48rem) {
+  .pf-v6-c-drawer.pf-m-pill {
+    --pf-v6-c-drawer__main--Gap: var(--pf-v6-c-drawer--m-pill__main--Gap, revert);
+    --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-pill__panel--BorderColor);
+    --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
+    --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
+    --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
+  }
+  .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+    border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
+    border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
+    border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
+    border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
+  }
+}
 
 .pf-v6-c-drawer__section {
   flex-grow: 0;
@@ -15033,6 +15059,7 @@ ul) {
 .pf-v6-c-drawer__main {
   display: flex;
   flex: 1;
+  gap: var(--pf-v6-c-drawer__main--Gap, 0);
   overflow: hidden;
 }
 
@@ -15071,6 +15098,8 @@ ul) {
   row-gap: var(--pf-v6-c-drawer__panel--RowGap);
   order: 1;
   max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
+  margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
+  margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
   overflow: auto;
   visibility: hidden;
   background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
@@ -15079,6 +15108,7 @@ ul) {
   border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
   border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
   border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
+  border-radius: var(--pf-v6-c-drawer__panel--BorderRadius, revert);
   box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
   opacity: var(--pf-v6-c-drawer__panel--Opacity);
   transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -15266,7 +15296,7 @@ ul) {
     padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
   }
   .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-    transform: translateX(0);
+    transform: translateX(var(--pf-v6-c-drawer--m-expanded__panel--inset));
   }
   .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
     --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
@@ -15278,6 +15308,8 @@ ul) {
     --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
     --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
     --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
+    --pf-v6-c-drawer__panel--MarginBlock: initial;
+    --pf-v6-c-drawer__panel--MarginInline: var(--pf-v6-c-drawer--m-expanded__panel--inset);
     min-width: auto;
     min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
   }