@patternfly/react-styles 6.0.0-alpha.14 → 6.0.0-alpha.16

package/css/components/Table/table.d.ts

@@ -28,13 +28,13 @@ declare const _default: {
     "favorite": "pf-m-favorite",
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
-    "expanded": "pf-m-expanded",
     "truncate": "pf-m-truncate",
     "wrap": "pf-m-wrap",
     "nowrap": "pf-m-nowrap",
     "fitContent": "pf-m-fit-content",
     "breakWord": "pf-m-break-word",
     "noBorderRows": "pf-m-no-border-rows",
+    "expanded": "pf-m-expanded",
     "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
     "firstCellOffsetReset": "pf-m-first-cell-offset-reset",
@@ -58,6 +58,7 @@ declare const _default: {
     "width_90": "pf-m-width-90",
     "width_100": "pf-m-width-100"
   },
+  "radio": "pf-v6-c-radio",
   "table": "pf-v6-c-table",
   "tableAction": "pf-v6-c-table__action",
   "tableButton": "pf-v6-c-table__button",
@@ -67,7 +68,6 @@ declare const _default: {
   "tableColumnHelp": "pf-v6-c-table__column-help",
   "tableColumnHelpAction": "pf-v6-c-table__column-help-action",
   "tableCompoundExpansionToggle": "pf-v6-c-table__compound-expansion-toggle",
-  "tableControlRow": "pf-v6-c-table__control-row",
   "tableDraggable": "pf-v6-c-table__draggable",
   "tableExpandableRow": "pf-v6-c-table__expandable-row",
   "tableExpandableRowContent": "pf-v6-c-table__expandable-row-content",
@@ -85,7 +85,6 @@ declare const _default: {
   "tableThead": "pf-v6-c-table__thead",
   "tableToggle": "pf-v6-c-table__toggle",
   "tableToggleIcon": "pf-v6-c-table__toggle-icon",
-  "tableTr": "pf-v6-c-table__tr",
-  "themeDark": "pf-v6-theme-dark"
+  "tableTr": "pf-v6-c-table__tr"
 };
 export default _default;

package/css/components/Table/table.js

@@ -30,13 +30,13 @@ exports.default = {
     "favorite": "pf-m-favorite",
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
-    "expanded": "pf-m-expanded",
     "truncate": "pf-m-truncate",
     "wrap": "pf-m-wrap",
     "nowrap": "pf-m-nowrap",
     "fitContent": "pf-m-fit-content",
     "breakWord": "pf-m-break-word",
     "noBorderRows": "pf-m-no-border-rows",
+    "expanded": "pf-m-expanded",
     "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
     "firstCellOffsetReset": "pf-m-first-cell-offset-reset",
@@ -60,6 +60,7 @@ exports.default = {
     "width_90": "pf-m-width-90",
     "width_100": "pf-m-width-100"
   },
+  "radio": "pf-v6-c-radio",
   "table": "pf-v6-c-table",
   "tableAction": "pf-v6-c-table__action",
   "tableButton": "pf-v6-c-table__button",
@@ -69,7 +70,6 @@ exports.default = {
   "tableColumnHelp": "pf-v6-c-table__column-help",
   "tableColumnHelpAction": "pf-v6-c-table__column-help-action",
   "tableCompoundExpansionToggle": "pf-v6-c-table__compound-expansion-toggle",
-  "tableControlRow": "pf-v6-c-table__control-row",
   "tableDraggable": "pf-v6-c-table__draggable",
   "tableExpandableRow": "pf-v6-c-table__expandable-row",
   "tableExpandableRowContent": "pf-v6-c-table__expandable-row-content",
@@ -87,6 +87,5 @@ exports.default = {
   "tableThead": "pf-v6-c-table__thead",
   "tableToggle": "pf-v6-c-table__toggle",
   "tableToggleIcon": "pf-v6-c-table__toggle-icon",
-  "tableTr": "pf-v6-c-table__tr",
-  "themeDark": "pf-v6-theme-dark"
+  "tableTr": "pf-v6-c-table__tr"
 };

package/css/components/Table/table.mjs

@@ -28,13 +28,13 @@ export default {
     "favorite": "pf-m-favorite",
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
-    "expanded": "pf-m-expanded",
     "truncate": "pf-m-truncate",
     "wrap": "pf-m-wrap",
     "nowrap": "pf-m-nowrap",
     "fitContent": "pf-m-fit-content",
     "breakWord": "pf-m-break-word",
     "noBorderRows": "pf-m-no-border-rows",
+    "expanded": "pf-m-expanded",
     "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
     "firstCellOffsetReset": "pf-m-first-cell-offset-reset",
@@ -58,6 +58,7 @@ export default {
     "width_90": "pf-m-width-90",
     "width_100": "pf-m-width-100"
   },
+  "radio": "pf-v6-c-radio",
   "table": "pf-v6-c-table",
   "tableAction": "pf-v6-c-table__action",
   "tableButton": "pf-v6-c-table__button",
@@ -67,7 +68,6 @@ export default {
   "tableColumnHelp": "pf-v6-c-table__column-help",
   "tableColumnHelpAction": "pf-v6-c-table__column-help-action",
   "tableCompoundExpansionToggle": "pf-v6-c-table__compound-expansion-toggle",
-  "tableControlRow": "pf-v6-c-table__control-row",
   "tableDraggable": "pf-v6-c-table__draggable",
   "tableExpandableRow": "pf-v6-c-table__expandable-row",
   "tableExpandableRowContent": "pf-v6-c-table__expandable-row-content",
@@ -85,6 +85,5 @@ export default {
   "tableThead": "pf-v6-c-table__thead",
   "tableToggle": "pf-v6-c-table__toggle",
   "tableToggleIcon": "pf-v6-c-table__toggle-icon",
-  "tableTr": "pf-v6-c-table__tr",
-  "themeDark": "pf-v6-theme-dark"
+  "tableTr": "pf-v6-c-table__tr"
 };

package/css/components/Toolbar/toolbar.css

@@ -73,15 +73,19 @@
   }
 }
 
-:root,
-[data-theme=pf-v6-c-toolbar] {
+:where(:root),
+:where(.pf-v6-c-toolbar) {
   --pf-v6-c-toolbar--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toolbar--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar--PaddingBlock: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar--PaddingInline: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-toolbar--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-toolbar__item--Width: auto;
+  --pf-v6-c-toolbar__item--MinWidth: auto;
   --pf-v6-c-toolbar__item--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toolbar__item--m-overflow-container--MinWidth: 0;
+  --pf-v6-c-toolbar__group--m-overflow-container--MinWidth: 0;
   --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-toolbar--PaddingInline);
@@ -171,8 +175,62 @@
 }
 
 .pf-v6-c-toolbar__item {
+  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
+  --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
   row-gap: var(--pf-v6-c-toolbar__item--RowGap, var(--pf-v6-c-toolbar--RowGap));
   column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
+  width: var(--pf-v6-c-toolbar__item--Width--base);
+  min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
+}
+@media (min-width: 576px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-lg, var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-xl, var(--pf-v6-c-toolbar__item--Width-on-lg, var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-2xl, var(--pf-v6-c-toolbar__item--Width-on-xl, var(--pf-v6-c-toolbar__item--Width-on-lg, var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth));
+  }
+}
+@media (min-width: 768px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-lg, var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-xl, var(--pf-v6-c-toolbar__item--MinWidth-on-lg, var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-2xl, var(--pf-v6-c-toolbar__item--MinWidth-on-xl, var(--pf-v6-c-toolbar__item--MinWidth-on-lg, var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth))))));
+  }
 }
 .pf-v6-c-toolbar__item.pf-m-expand-all.pf-m-expanded {
   --pf-v6-c-toolbar__expand-all-icon--Rotate: var(--pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate);
@@ -186,6 +244,9 @@
 .pf-v6-c-toolbar__item.pf-m-pagination.pf-v6-c-pagination {
   flex-wrap: nowrap;
 }
+.pf-v6-c-toolbar__item.pf-m-overflow-container {
+  min-width: var(--pf-v6-c-toolbar__item--m-overflow-container--MinWidth);
+}
 
 .pf-v6-c-toolbar__group {
   row-gap: var(--pf-v6-c-toolbar__group--RowGap, var(--pf-v6-c-toolbar--RowGap));
@@ -204,6 +265,9 @@
 .pf-v6-c-toolbar__group.pf-m-chip-group {
   flex: 1;
 }
+.pf-v6-c-toolbar__group.pf-m-overflow-container {
+  min-width: var(--pf-v6-c-toolbar__group--m-overflow-container--MinWidth);
+}
 
 .pf-v6-c-toolbar__expandable-content {
   position: absolute;

package/css/components/Toolbar/toolbar.d.ts

@@ -23,9 +23,9 @@ declare const _default: {
     "expandAll": "pf-m-expand-all",
     "expanded": "pf-m-expanded",
     "label": "pf-m-label",
+    "overflowContainer": "pf-m-overflow-container",
     "iconButtonGroup": "pf-m-icon-button-group",
     "filterGroup": "pf-m-filter-group",
-    "overflowContainer": "pf-m-overflow-container",
     "alignStart": "pf-m-align-start",
     "alignCenter": "pf-m-align-center",
     "alignEnd": "pf-m-align-end",

package/css/components/Toolbar/toolbar.js

@@ -25,9 +25,9 @@ exports.default = {
     "expandAll": "pf-m-expand-all",
     "expanded": "pf-m-expanded",
     "label": "pf-m-label",
+    "overflowContainer": "pf-m-overflow-container",
     "iconButtonGroup": "pf-m-icon-button-group",
     "filterGroup": "pf-m-filter-group",
-    "overflowContainer": "pf-m-overflow-container",
     "alignStart": "pf-m-align-start",
     "alignCenter": "pf-m-align-center",
     "alignEnd": "pf-m-align-end",

package/css/components/Toolbar/toolbar.mjs

@@ -23,9 +23,9 @@ export default {
     "expandAll": "pf-m-expand-all",
     "expanded": "pf-m-expanded",
     "label": "pf-m-label",
+    "overflowContainer": "pf-m-overflow-container",
     "iconButtonGroup": "pf-m-icon-button-group",
     "filterGroup": "pf-m-filter-group",
-    "overflowContainer": "pf-m-overflow-container",
     "alignStart": "pf-m-align-start",
     "alignCenter": "pf-m-align-center",
     "alignEnd": "pf-m-align-end",

package/css/docs/components/Brand/examples/Brand.css

@@ -1,12 +1,12 @@
 .show-dark,
-:where(.pf-v5-theme-dark) .show-light {
+:where(.pf-v6-theme-dark) .show-light {
   display: none;
 }
 
-:where(.pf-v5-theme-dark) .show-dark {
+:where(.pf-v6-theme-dark) .show-dark {
   display: revert;
 }
 
-:where(.pf-v5-theme-dark) .show-dark .pf-m-picture {
+:where(.pf-v6-theme-dark) .show-dark .pf-m-picture {
   display: inline-flex;
 }

package/css/docs/components/Brand/examples/Brand.d.ts

@@ -5,6 +5,6 @@ declare const _default: {
   },
   "showDark": "show-dark",
   "showLight": "show-light",
-  "v5ThemeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v6-theme-dark"
 };
 export default _default;

package/css/docs/components/Brand/examples/Brand.js

@@ -7,5 +7,5 @@ exports.default = {
   },
   "showDark": "show-dark",
   "showLight": "show-light",
-  "v5ThemeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v6-theme-dark"
 };

package/css/docs/components/Brand/examples/Brand.mjs

@@ -5,5 +5,5 @@ export default {
   },
   "showDark": "show-dark",
   "showLight": "show-light",
-  "v5ThemeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v6-theme-dark"
 };

package/css/docs/components/Button/examples/Button.css

@@ -1,8 +1,8 @@
-.ws-core-c-button .pf-v5-c-button {
+.ws-core-c-button .pf-v6-c-button {
   margin-inline-end: 6px;
   margin-block-end: 6px;
 }
 
-#ws-core-c-button-plain-with-no-padding .pf-v5-c-button {
+#ws-core-c-button-plain-with-no-padding .pf-v6-c-button {
   margin: 0;
 }

package/css/docs/components/Button/examples/Button.d.ts

@@ -1,6 +1,6 @@
 import './Button.css';
 declare const _default: {
-  "v5CButton": "pf-v5-c-button",
+  "button": "pf-v6-c-button",
   "wsCoreCButton": "ws-core-c-button"
 };
 export default _default;

package/css/docs/components/Button/examples/Button.js

@@ -2,6 +2,6 @@
 exports.__esModule = true;
 require('./Button.css');
 exports.default = {
-  "v5CButton": "pf-v5-c-button",
+  "button": "pf-v6-c-button",
   "wsCoreCButton": "ws-core-c-button"
 };

package/css/docs/components/Button/examples/Button.mjs

@@ -1,5 +1,5 @@
 import './Button.css';
 export default {
-  "v5CButton": "pf-v5-c-button",
+  "button": "pf-v6-c-button",
   "wsCoreCButton": "ws-core-c-button"
 };

package/css/docs/components/DragDrop/examples/DragDrop.css

@@ -1,9 +1,9 @@
-.pf-v5-c-draggable {
+.pf-v6-c-draggable {
   padding: .25em;
 }
 
-.pf-v5-c-draggable.pf-m-dragging {
-  --pf-v5-c-draggable--m-dragging--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+.pf-v6-c-draggable.pf-m-dragging {
+  --pf-v6-c-draggable--m-dragging--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
   position: absolute;
   inset-block-start: 23%;

package/css/docs/components/DragDrop/examples/DragDrop.d.ts

@@ -1,8 +1,8 @@
 import './DragDrop.css';
 declare const _default: {
+  "draggable": "pf-v6-c-draggable",
   "modifiers": {
     "dragging": "pf-m-dragging"
-  },
-  "v5CDraggable": "pf-v5-c-draggable"
+  }
 };
 export default _default;

package/css/docs/components/DragDrop/examples/DragDrop.js

@@ -2,8 +2,8 @@
 exports.__esModule = true;
 require('./DragDrop.css');
 exports.default = {
+  "draggable": "pf-v6-c-draggable",
   "modifiers": {
     "dragging": "pf-m-dragging"
-  },
-  "v5CDraggable": "pf-v5-c-draggable"
+  }
 };

package/css/docs/components/DragDrop/examples/DragDrop.mjs

@@ -1,7 +1,7 @@
 import './DragDrop.css';
 export default {
+  "draggable": "pf-v6-c-draggable",
   "modifiers": {
     "dragging": "pf-m-dragging"
-  },
-  "v5CDraggable": "pf-v5-c-draggable"
+  }
 };

package/css/docs/components/Dropdown/deprecated/Dropdown.css

@@ -51,7 +51,7 @@
   min-height: 210px;
 }
 
-[id^="ws-html-deprecated-c-dropdown-split-button"] .pf-v5-c-dropdown:not(:last-child) {
+[id^="ws-html-deprecated-c-dropdown-split-button"] .pf-v6-c-dropdown:not(:last-child) {
   margin-inline-end: 4px;
 }
 

package/css/docs/components/Dropdown/deprecated/Dropdown.d.ts

@@ -1,6 +1,6 @@
 import './Dropdown.css';
 declare const _default: {
-  "v5CDropdown": "pf-v5-c-dropdown",
+  "dropdown": "pf-v6-c-dropdown",
   "wsPreviewHtml": "ws-preview-html"
 };
 export default _default;

package/css/docs/components/Dropdown/deprecated/Dropdown.js

@@ -2,6 +2,6 @@
 exports.__esModule = true;
 require('./Dropdown.css');
 exports.default = {
-  "v5CDropdown": "pf-v5-c-dropdown",
+  "dropdown": "pf-v6-c-dropdown",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Dropdown/deprecated/Dropdown.mjs

@@ -1,5 +1,5 @@
 import './Dropdown.css';
 export default {
-  "v5CDropdown": "pf-v5-c-dropdown",
+  "dropdown": "pf-v6-c-dropdown",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Label/examples/Label.css

@@ -5,9 +5,9 @@
   margin: -4px;
 }
 
-#ws-core-c-label-filled .pf-v5-c-label,
-#ws-core-c-label-outline .pf-v5-c-label,
-#ws-core-c-label-compact .pf-v5-c-label,
-#ws-core-c-label-overflow .pf-v5-c-label {
+#ws-core-c-label-filled .pf-v6-c-label,
+#ws-core-c-label-outline .pf-v6-c-label,
+#ws-core-c-label-compact .pf-v6-c-label,
+#ws-core-c-label-overflow .pf-v6-c-label {
   margin: 4px;
 }

package/css/docs/components/Label/examples/Label.d.ts

@@ -1,6 +1,6 @@
 import './Label.css';
 declare const _default: {
-  "v5CLabel": "pf-v5-c-label",
+  "label": "pf-v6-c-label",
   "wsPreviewHtml": "ws-preview-html"
 };
 export default _default;

package/css/docs/components/Label/examples/Label.js

@@ -2,6 +2,6 @@
 exports.__esModule = true;
 require('./Label.css');
 exports.default = {
-  "v5CLabel": "pf-v5-c-label",
+  "label": "pf-v6-c-label",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Label/examples/Label.mjs

@@ -1,5 +1,5 @@
 import './Label.css';
 export default {
-  "v5CLabel": "pf-v5-c-label",
+  "label": "pf-v6-c-label",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/LogViewer/examples/LogViewer.css

@@ -2,7 +2,7 @@
   position: relative;
 }
 
-#ws-core-e-log-viewer-with-popover-open .pf-v5-c-popover {
+#ws-core-e-log-viewer-with-popover-open .pf-v6-c-popover {
   display: none;
   position: absolute;
   z-index: 9999;
@@ -11,7 +11,7 @@
 }
 
 @media screen and (min-width: 992px) {
-  #ws-core-e-log-viewer-with-popover-open .pf-v5-c-popover {
+  #ws-core-e-log-viewer-with-popover-open .pf-v6-c-popover {
     display: block;
   }
 }

package/css/docs/components/LogViewer/examples/LogViewer.d.ts

@@ -1,6 +1,6 @@
 import './LogViewer.css';
 declare const _default: {
-  "v5CPopover": "pf-v5-c-popover",
+  "popover": "pf-v6-c-popover",
   "wsPreviewHtml": "ws-preview-html"
 };
 export default _default;

package/css/docs/components/LogViewer/examples/LogViewer.js

@@ -2,6 +2,6 @@
 exports.__esModule = true;
 require('./LogViewer.css');
 exports.default = {
-  "v5CPopover": "pf-v5-c-popover",
+  "popover": "pf-v6-c-popover",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/LogViewer/examples/LogViewer.mjs

@@ -1,5 +1,5 @@
 import './LogViewer.css';
 export default {
-  "v5CPopover": "pf-v5-c-popover",
+  "popover": "pf-v6-c-popover",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Menu/examples/Menu.css

@@ -13,10 +13,10 @@
   position: relative;
 }
 
-:is([id="ws-core-c-menu-drilldown-with-breadcrumbs---level-3"], [id="ws-core-c-menu-drilldown-with-breadcrumbs---level-4"]) .pf-v5-c-breadcrumb__dropdown .pf-v5-c-menu {
+:is([id="ws-core-c-menu-drilldown-with-breadcrumbs---level-3"], [id="ws-core-c-menu-drilldown-with-breadcrumbs---level-4"]) .pf-v6-c-breadcrumb__dropdown .pf-v6-c-menu {
   position: absolute;
 }
 
-.pf-v5-c-menu__breadcrumb .pf-v5-c-menu {
+.pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
   z-index: 1;
 }

package/css/docs/components/Menu/examples/Menu.d.ts

@@ -1,7 +1,7 @@
 import './Menu.css';
 declare const _default: {
-  "v5CBreadcrumbDropdown": "pf-v5-c-breadcrumb__dropdown",
-  "v5CMenu": "pf-v5-c-menu",
-  "v5CMenuBreadcrumb": "pf-v5-c-menu__breadcrumb"
+  "breadcrumbDropdown": "pf-v6-c-breadcrumb__dropdown",
+  "menu": "pf-v6-c-menu",
+  "menuBreadcrumb": "pf-v6-c-menu__breadcrumb"
 };
 export default _default;

package/css/docs/components/Menu/examples/Menu.js

@@ -2,7 +2,7 @@
 exports.__esModule = true;
 require('./Menu.css');
 exports.default = {
-  "v5CBreadcrumbDropdown": "pf-v5-c-breadcrumb__dropdown",
-  "v5CMenu": "pf-v5-c-menu",
-  "v5CMenuBreadcrumb": "pf-v5-c-menu__breadcrumb"
+  "breadcrumbDropdown": "pf-v6-c-breadcrumb__dropdown",
+  "menu": "pf-v6-c-menu",
+  "menuBreadcrumb": "pf-v6-c-menu__breadcrumb"
 };

package/css/docs/components/Menu/examples/Menu.mjs

@@ -1,6 +1,6 @@
 import './Menu.css';
 export default {
-  "v5CBreadcrumbDropdown": "pf-v5-c-breadcrumb__dropdown",
-  "v5CMenu": "pf-v5-c-menu",
-  "v5CMenuBreadcrumb": "pf-v5-c-menu__breadcrumb"
+  "breadcrumbDropdown": "pf-v6-c-breadcrumb__dropdown",
+  "menu": "pf-v6-c-menu",
+  "menuBreadcrumb": "pf-v6-c-menu__breadcrumb"
 };

package/css/docs/components/Nav/examples/Navigation.css

@@ -1,5 +1,5 @@
-#ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header-nav,
-#ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header-nav {
+#ws-core-c-navigation-horizontal-in-masthead .pf-v6-c-page__header-nav,
+#ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v6-c-page__header-nav {
   grid-row: 1;
 }
 
@@ -12,8 +12,25 @@
   position: relative;
 }
 
-#ws-core-c-navigation-nav-with-flyout .pf-v5-c-menu.pf-m-flyout.pf-m-nav {
+#ws-core-c-navigation-nav-with-flyout .pf-v6-c-menu.pf-m-flyout.pf-m-nav {
   position: absolute;
   inset-block-start: 168px;
   inset-inline-start: 256px;
 }
+
+#ws-core-c-navigation-horizontal .ws-preview-html,
+#ws-core-c-navigation-horizontal-overflow .ws-preview-html {
+  padding: var(--pf-t--global--spacer--md);
+}
+
+.ws-core-c-navigation .ws-preview-html {
+  background: var(--pf-v6-c-page__sidebar--BackgroundColor); /* use sidebar background for vertical nav examples */
+}
+
+[id^="ws-core-c-navigation-horizontal"] .ws-preview-html {
+  background: var(--pf-v6-c-masthead--BackgroundColor); /* use masthead background for horizontal nav examples */
+}
+
+[id^="ws-core-c-navigation-horizontal-subnav"] .ws-preview-html {
+  background: transparent; /* reset background for horizontal subnav examples */
+}

package/css/docs/components/Nav/examples/Navigation.d.ts

@@ -1,11 +1,12 @@
 import './Navigation.css';
 declare const _default: {
+  "menu": "pf-v6-c-menu",
   "modifiers": {
     "flyout": "pf-m-flyout",
     "nav": "pf-m-nav"
   },
-  "v5CMenu": "pf-v5-c-menu",
-  "v5CPageHeaderNav": "pf-v5-c-page__header-nav",
+  "pageHeaderNav": "pf-v6-c-page__header-nav",
+  "wsCoreCNavigation": "ws-core-c-navigation",
   "wsPreviewHtml": "ws-preview-html"
 };
 export default _default;

package/css/docs/components/Nav/examples/Navigation.js

@@ -2,11 +2,12 @@
 exports.__esModule = true;
 require('./Navigation.css');
 exports.default = {
+  "menu": "pf-v6-c-menu",
   "modifiers": {
     "flyout": "pf-m-flyout",
     "nav": "pf-m-nav"
   },
-  "v5CMenu": "pf-v5-c-menu",
-  "v5CPageHeaderNav": "pf-v5-c-page__header-nav",
+  "pageHeaderNav": "pf-v6-c-page__header-nav",
+  "wsCoreCNavigation": "ws-core-c-navigation",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Nav/examples/Navigation.mjs

@@ -1,10 +1,11 @@
 import './Navigation.css';
 export default {
+  "menu": "pf-v6-c-menu",
   "modifiers": {
     "flyout": "pf-m-flyout",
     "nav": "pf-m-nav"
   },
-  "v5CMenu": "pf-v5-c-menu",
-  "v5CPageHeaderNav": "pf-v5-c-page__header-nav",
+  "pageHeaderNav": "pf-v6-c-page__header-nav",
+  "wsCoreCNavigation": "ws-core-c-navigation",
   "wsPreviewHtml": "ws-preview-html"
 };