@patternfly/react-styles 6.0.0-alpha.2 → 6.0.0-alpha.4

package/css/components/Table/table.mjs

@@ -1,6 +1,7 @@
 import './table.css';
 export default {
   "button": "pf-v5-c-button",
+  "check": "pf-v5-c-check",
   "checkInput": "pf-v5-c-check__input",
   "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
@@ -39,6 +40,7 @@ export default {
     "selected": "pf-m-selected",
     "firstCellOffsetReset": "pf-m-first-cell-offset-reset",
     "dragOver": "pf-m-drag-over",
+    "standalone": "pf-m-standalone",
     "favorited": "pf-m-favorited",
     "noPadding": "pf-m-no-padding",
     "compact": "pf-m-compact",

package/css/components/Title/title.css

@@ -1,23 +1,44 @@
+:root {
+  --pf-v5-c-title--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v5-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);
+  --pf-v5-c-title--m-4xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-3xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-3xl--FontSize: var(--pf-t--global--font--size--heading--xl);
+  --pf-v5-c-title--m-3xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-2xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-2xl--FontSize: var(--pf-t--global--font--size--heading--lg);
+  --pf-v5-c-title--m-2xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-xl--FontSize: var(--pf-t--global--font--size--heading--md);
+  --pf-v5-c-title--m-xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-lg--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-lg--FontSize: var(--pf-t--global--font--size--heading--sm);
+  --pf-v5-c-title--m-lg--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-md--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-md--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-title--m-md--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-h1--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-h1--FontSize: var(--pf-t--global--font--size--heading--h1);
+  --pf-v5-c-title--m-h1--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-h2--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-h2--FontSize: var(--pf-t--global--font--size--heading--h2);
+  --pf-v5-c-title--m-h2--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-h3--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-h3--FontSize: var(--pf-t--global--font--size--heading--h3);
+  --pf-v5-c-title--m-h3--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-h4--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-h4--FontSize: var(--pf-t--global--font--size--heading--h4);
+  --pf-v5-c-title--m-h4--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-h5--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-h5--FontSize: var(--pf-t--global--font--size--heading--h5);
+  --pf-v5-c-title--m-h5--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
+  --pf-v5-c-title--m-h6--FontWeight: var(--pf-t--global--font--weight--heading);
+}
+
 .pf-v5-c-title {
-  --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading);
-  --pf-v5-c-title--m-4xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-title--m-4xl--FontSize: var(--pf-v5-global--FontSize--4xl);
-  --pf-v5-c-title--m-4xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-title--m-3xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-title--m-3xl--FontSize: var(--pf-v5-global--FontSize--3xl);
-  --pf-v5-c-title--m-3xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-title--m-2xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-title--m-2xl--FontSize: var(--pf-v5-global--FontSize--2xl);
-  --pf-v5-c-title--m-2xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-title--m-xl--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-title--m-xl--FontSize: var(--pf-v5-global--FontSize--xl);
-  --pf-v5-c-title--m-xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-title--m-lg--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-title--m-lg--FontSize: var(--pf-v5-global--FontSize--lg);
-  --pf-v5-c-title--m-lg--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-title--m-md--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-title--m-md--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-title--m-md--FontWeight: var(--pf-v5-global--FontWeight--normal);
   font-family: var(--pf-v5-c-title--FontFamily);
   word-break: break-word;
 }
@@ -50,4 +71,34 @@
   font-size: var(--pf-v5-c-title--m-md--FontSize);
   font-weight: var(--pf-v5-c-title--m-md--FontWeight);
   line-height: var(--pf-v5-c-title--m-md--LineHeight);
+}
+.pf-v5-c-title.pf-m-h1 {
+  font-size: var(--pf-v5-c-title--m-h1--FontSize);
+  font-weight: var(--pf-v5-c-title--m-h1--FontWeight);
+  line-height: var(--pf-v5-c-title--m-h1--LineHeight);
+}
+.pf-v5-c-title.pf-m-h2 {
+  font-size: var(--pf-v5-c-title--m-h2--FontSize);
+  font-weight: var(--pf-v5-c-title--m-h2--FontWeight);
+  line-height: var(--pf-v5-c-title--m-h2--LineHeight);
+}
+.pf-v5-c-title.pf-m-h3 {
+  font-size: var(--pf-v5-c-title--m-h3--FontSize);
+  font-weight: var(--pf-v5-c-title--m-h3--FontWeight);
+  line-height: var(--pf-v5-c-title--m-h3--LineHeight);
+}
+.pf-v5-c-title.pf-m-h4 {
+  font-size: var(--pf-v5-c-title--m-h4--FontSize);
+  font-weight: var(--pf-v5-c-title--m-h4--FontWeight);
+  line-height: var(--pf-v5-c-title--m-h4--LineHeight);
+}
+.pf-v5-c-title.pf-m-h5 {
+  font-size: var(--pf-v5-c-title--m-h5--FontSize);
+  font-weight: var(--pf-v5-c-title--m-h5--FontWeight);
+  line-height: var(--pf-v5-c-title--m-h5--LineHeight);
+}
+.pf-v5-c-title.pf-m-h6 {
+  font-size: var(--pf-v5-c-title--m-h6--FontSize);
+  font-weight: var(--pf-v5-c-title--m-h6--FontWeight);
+  line-height: var(--pf-v5-c-title--m-h6--LineHeight);
 }

package/css/components/Title/title.d.ts

@@ -6,7 +6,13 @@ declare const _default: {
     "2xl": "pf-m-2xl",
     "xl": "pf-m-xl",
     "lg": "pf-m-lg",
-    "md": "pf-m-md"
+    "md": "pf-m-md",
+    "h1": "pf-m-h1",
+    "h2": "pf-m-h2",
+    "h3": "pf-m-h3",
+    "h4": "pf-m-h4",
+    "h5": "pf-m-h5",
+    "h6": "pf-m-h6"
   },
   "title": "pf-v5-c-title"
 };

package/css/components/Title/title.js

@@ -8,7 +8,13 @@ exports.default = {
     "2xl": "pf-m-2xl",
     "xl": "pf-m-xl",
     "lg": "pf-m-lg",
-    "md": "pf-m-md"
+    "md": "pf-m-md",
+    "h1": "pf-m-h1",
+    "h2": "pf-m-h2",
+    "h3": "pf-m-h3",
+    "h4": "pf-m-h4",
+    "h5": "pf-m-h5",
+    "h6": "pf-m-h6"
   },
   "title": "pf-v5-c-title"
 };

package/css/components/Title/title.mjs

@@ -6,7 +6,13 @@ export default {
     "2xl": "pf-m-2xl",
     "xl": "pf-m-xl",
     "lg": "pf-m-lg",
-    "md": "pf-m-md"
+    "md": "pf-m-md",
+    "h1": "pf-m-h1",
+    "h2": "pf-m-h2",
+    "h3": "pf-m-h3",
+    "h4": "pf-m-h4",
+    "h5": "pf-m-h5",
+    "h6": "pf-m-h6"
   },
   "title": "pf-v5-c-title"
 };

package/css/components/Toolbar/toolbar.css

@@ -114,6 +114,9 @@
   --pf-v5-c-toolbar__item--m-label--spacer: var(--pf-v5-c-toolbar__item--spacer);
   --pf-v5-c-toolbar__item--m-label--TranslateY: var(--pf-v5-global--spacer--form-element);
   --pf-v5-c-toolbar__item--m-label--FontWeight: var(--pf-v5-global--FontWeight--bold);
+  --pf-v5-c-toolbar__item--m-form-element--spacer: var(--pf-v5-c-toolbar__item--spacer);
+  --pf-v5-c-toolbar__item--m-form-element--TranslateY: var(--pf-v5-global--spacer--form-element);
+  --pf-v5-c-toolbar__item--m-form-element--FontWeight: var(--pf-v5-global--FontWeight--bold);
   --pf-v5-c-toolbar__item--m-form-control--TranslateY: var(--pf-v5-global--spacer--form-element);
   --pf-v5-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-v5-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-v5-global--spacer--sm));
   --pf-v5-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-v5-global--FontSize--sm);
@@ -363,7 +366,12 @@
 .pf-v5-c-toolbar__item.pf-m-label {
   --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--m-label--spacer);
   font-weight: var(--pf-v5-c-toolbar__item--m-label--FontWeight);
-  transform: translateY(var(--pf-v5-global--spacer--form-element));
+  transform: translateY(var(--pf-v5-c-toolbar__item--m-label--TranslateY));
+}
+.pf-v5-c-toolbar__item.pf-m-form-element {
+  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--m-form-element--spacer);
+  font-weight: var(--pf-v5-c-toolbar__item--m-form-element--FontWeight);
+  transform: translateY(var(--pf-v5-c-toolbar__item--m-form-element--TranslateY));
 }
 .pf-v5-c-toolbar__item.pf-m-pagination {
   margin-inline-start: auto;

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

@@ -37,6 +37,7 @@ declare const _default: {
     "searchFilter": "pf-m-search-filter",
     "chipGroup": "pf-m-chip-group",
     "label": "pf-m-label",
+    "formElement": "pf-m-form-element",
     "pagination": "pf-m-pagination",
     "overflowContainer": "pf-m-overflow-container",
     "chipContainer": "pf-m-chip-container",

package/css/components/Toolbar/toolbar.js

@@ -39,6 +39,7 @@ exports.default = {
     "searchFilter": "pf-m-search-filter",
     "chipGroup": "pf-m-chip-group",
     "label": "pf-m-label",
+    "formElement": "pf-m-form-element",
     "pagination": "pf-m-pagination",
     "overflowContainer": "pf-m-overflow-container",
     "chipContainer": "pf-m-chip-container",

package/css/components/Toolbar/toolbar.mjs

@@ -37,6 +37,7 @@ export default {
     "searchFilter": "pf-m-search-filter",
     "chipGroup": "pf-m-chip-group",
     "label": "pf-m-label",
+    "formElement": "pf-m-form-element",
     "pagination": "pf-m-pagination",
     "overflowContainer": "pf-m-overflow-container",
     "chipContainer": "pf-m-chip-container",

package/css/components/Tooltip/tooltip.css

@@ -1,17 +1,18 @@
-.pf-v5-c-tooltip {
+:root {
   --pf-v5-c-tooltip--MaxWidth: 18.75rem;
-  --pf-v5-c-tooltip--BoxShadow: var(--pf-v5-global--BoxShadow--md);
-  --pf-v5-c-tooltip__content--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
-  --pf-v5-c-tooltip__content--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v5-c-tooltip__content--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tooltip__content--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tooltip__content--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tooltip__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
+  --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
+  --pf-v5-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v5-c-tooltip__arrow--Width: 0.9375rem;
   --pf-v5-c-tooltip__arrow--Height: 0.9375rem;
-  --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
-  --pf-v5-c-tooltip__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--md);
+  --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
+  --pf-v5-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v5-c-tooltip__arrow--m-top--TranslateX: -50%;
   --pf-v5-c-tooltip__arrow--m-top--TranslateY: 50%;
   --pf-v5-c-tooltip__arrow--m-top--Rotate: 45deg;
@@ -24,6 +25,9 @@
   --pf-v5-c-tooltip__arrow--m-left--TranslateX: 50%;
   --pf-v5-c-tooltip__arrow--m-left--TranslateY: -50%;
   --pf-v5-c-tooltip__arrow--m-left--Rotate: 45deg;
+}
+
+.pf-v5-c-tooltip {
   position: relative;
   max-width: var(--pf-v5-c-tooltip--MaxWidth);
   box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
@@ -96,6 +100,7 @@
   text-align: center;
   word-break: break-word;
   background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
+  border-radius: var(--pf-v5-c-tooltip__content--BorderRadius);
 }
 .pf-v5-c-tooltip__content.pf-m-text-align-left {
   text-align: start;
@@ -103,21 +108,14 @@
 
 .pf-v5-c-tooltip__arrow {
   position: absolute;
-  /* stylelint-disable liberty/use-logical-spec */
   top: var(--pf-v5-c-tooltip__arrow--Top, auto);
   right: var(--pf-v5-c-tooltip__arrow--Right, auto);
   bottom: var(--pf-v5-c-tooltip__arrow--Bottom, auto);
   left: var(--pf-v5-c-tooltip__arrow--Left, auto);
-  /* stylelint-enable */
   width: var(--pf-v5-c-tooltip__arrow--Width);
   height: var(--pf-v5-c-tooltip__arrow--Height);
   pointer-events: none;
   background-color: var(--pf-v5-c-tooltip__arrow--BackgroundColor);
   box-shadow: var(--pf-v5-c-tooltip__arrow--BoxShadow);
   transform: translateX(var(--pf-v5-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-tooltip__arrow--Rotate, 0));
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-tooltip {
-  --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/css/components/Tooltip/tooltip.d.ts

@@ -15,7 +15,6 @@ declare const _default: {
     "rightBottom": "pf-m-right-bottom",
     "textAlignLeft": "pf-m-text-align-left"
   },
-  "themeDark": "pf-v5-theme-dark",
   "tooltip": "pf-v5-c-tooltip",
   "tooltipArrow": "pf-v5-c-tooltip__arrow",
   "tooltipContent": "pf-v5-c-tooltip__content"

package/css/components/Tooltip/tooltip.js

@@ -17,7 +17,6 @@ exports.default = {
     "rightBottom": "pf-m-right-bottom",
     "textAlignLeft": "pf-m-text-align-left"
   },
-  "themeDark": "pf-v5-theme-dark",
   "tooltip": "pf-v5-c-tooltip",
   "tooltipArrow": "pf-v5-c-tooltip__arrow",
   "tooltipContent": "pf-v5-c-tooltip__content"

package/css/components/Tooltip/tooltip.mjs

@@ -15,7 +15,6 @@ export default {
     "rightBottom": "pf-m-right-bottom",
     "textAlignLeft": "pf-m-text-align-left"
   },
-  "themeDark": "pf-v5-theme-dark",
   "tooltip": "pf-v5-c-tooltip",
   "tooltipArrow": "pf-v5-c-tooltip__arrow",
   "tooltipContent": "pf-v5-c-tooltip__content"

package/css/components/Truncate/truncate.css

@@ -1,6 +1,10 @@
+:root,
 .pf-v5-c-truncate {
   --pf-v5-c-truncate--MinWidth: 12ch;
   --pf-v5-c-truncate__start--MinWidth: 6ch;
+}
+
+.pf-v5-c-truncate {
   display: inline-grid;
   grid-auto-flow: column;
   align-items: baseline;

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

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

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

@@ -0,0 +1,10 @@
+import './Brand.css';
+declare const _default: {
+  "modifiers": {
+    "picture": "pf-m-picture"
+  },
+  "showDark": "show-dark",
+  "showLight": "show-light",
+  "themeDark": "pf-v5-theme-dark"
+};
+export default _default;

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

@@ -0,0 +1,11 @@
+"use strict";
+exports.__esModule = true;
+require('./Brand.css');
+exports.default = {
+  "modifiers": {
+    "picture": "pf-m-picture"
+  },
+  "showDark": "show-dark",
+  "showLight": "show-light",
+  "themeDark": "pf-v5-theme-dark"
+};

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

@@ -0,0 +1,9 @@
+import './Brand.css';
+export default {
+  "modifiers": {
+    "picture": "pf-m-picture"
+  },
+  "showDark": "show-dark",
+  "showLight": "show-light",
+  "themeDark": "pf-v5-theme-dark"
+};

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

@@ -1,6 +1,22 @@
-.ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .pf-v5-c-nav {
+#ws-core-c-navigation-default,
+#ws-core-c-navigation-basic,
+#ws-core-c-navigation-grouped,
+#ws-core-c-navigation-grouped-nav,
+#ws-core-c-navigation-grouped-nav-no-titles,
+#ws-core-c-navigation-expanded,
+#ws-core-c-navigation-expanded-with-subnav-titles,
+#ws-core-c-navigation-mixed,
+#ws-core-c-navigation-horizontal,
+#ws-core-c-navigation-horizontal-overflow,
+#ws-core-c-navigation-horizontal-subnav,
+#ws-core-c-navigation-horizontal-subnav-overflow,
+#ws-core-c-navigation-drilldown,
+#ws-core-c-navigation-nav-with-drilldown-menu .pf-v5-c-nav,
+#ws-core-c-navigation-level-2-drilldown,
+#ws-core-c-navigation-level-3-drilldown,
+#ws-core-c-navigation-nav-with-flyout .pf-v5-c-nav,
+#ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
   padding: 0;
-  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
 }
 
 #ws-core-c-navigation-horizontal-in-masthead,

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

@@ -8,7 +8,6 @@ declare const _default: {
   "nav": "pf-v5-c-nav",
   "pageHeader": "pf-v5-c-page__header",
   "pageHeaderNav": "pf-v5-c-page__header-nav",
-  "wsCoreCNavigation": "ws-core-c-navigation",
   "wsPreviewHtml": "ws-preview-html"
 };
 export default _default;

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

@@ -10,6 +10,5 @@ exports.default = {
   "nav": "pf-v5-c-nav",
   "pageHeader": "pf-v5-c-page__header",
   "pageHeaderNav": "pf-v5-c-page__header-nav",
-  "wsCoreCNavigation": "ws-core-c-navigation",
   "wsPreviewHtml": "ws-preview-html"
 };

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

@@ -8,6 +8,5 @@ export default {
   "nav": "pf-v5-c-nav",
   "pageHeader": "pf-v5-c-page__header",
   "pageHeaderNav": "pf-v5-c-page__header-nav",
-  "wsCoreCNavigation": "ws-core-c-navigation",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Truncate/examples/Truncate.css

@@ -4,6 +4,6 @@
   overflow: auto;
   min-width: 161px;
   max-width: 100%;
-  padding: var(--pf-v5-global--spacer--md);
-  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
 }

package/css/docs/demos/Toolbar/examples/Toolbar.css

@@ -13,3 +13,13 @@
 #ws-html-demos-c-toolbar-toolbar-attribute-value-search-filter-on-mobile {
   min-height: 175px;
 }
+
+.pf-v5-c-menu-toggle + .pf-v5-c-panel {
+  position: absolute;
+  top: calc(100% + 2px);
+  z-index: var(--pf-v5-global--ZIndex--sm);
+}
+
+.ws-html-demos-c-toolbar .pf-v5-c-toolbar__item {
+  position: relative;
+}

package/css/docs/demos/Toolbar/examples/Toolbar.d.ts

@@ -1,3 +1,8 @@
 import './Toolbar.css';
-declare const _default: {};
+declare const _default: {
+  "menuToggle": "pf-v5-c-menu-toggle",
+  "panel": "pf-v5-c-panel",
+  "toolbarItem": "pf-v5-c-toolbar__item",
+  "wsHtmlDemosCToolbar": "ws-html-demos-c-toolbar"
+};
 export default _default;

package/css/docs/demos/Toolbar/examples/Toolbar.js

@@ -1,4 +1,9 @@
 "use strict";
 exports.__esModule = true;
 require('./Toolbar.css');
-exports.default = {};
+exports.default = {
+  "menuToggle": "pf-v5-c-menu-toggle",
+  "panel": "pf-v5-c-panel",
+  "toolbarItem": "pf-v5-c-toolbar__item",
+  "wsHtmlDemosCToolbar": "ws-html-demos-c-toolbar"
+};

package/css/docs/demos/Toolbar/examples/Toolbar.mjs

@@ -1,2 +1,7 @@
 import './Toolbar.css';
-export default {};
+export default {
+  "menuToggle": "pf-v5-c-menu-toggle",
+  "panel": "pf-v5-c-panel",
+  "toolbarItem": "pf-v5-c-toolbar__item",
+  "wsHtmlDemosCToolbar": "ws-html-demos-c-toolbar"
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "6.0.0-alpha.2",
+  "version": "6.0.0-alpha.4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.12",
+    "@patternfly/patternfly": "6.0.0-alpha.38",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
@@ -29,5 +29,5 @@
     "typescript": "^4.7.4"
   },
   "license": "MIT",
-  "gitHead": "e097336a87fa3cd2ab41654bec28d120beed10bc"
+  "gitHead": "0213323de9e62364f8cd3f401bec86f1f34ee4fe"
 }

package/css/docs/components/Avatar/examples/Avatar.css

@@ -1,3 +0,0 @@
-#ws-core-c-avatar-bordered---dark {
-  background: var(--pf-v5-global--BackgroundColor--dark-100);
-}

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

@@ -1,3 +0,0 @@
-import './Avatar.css';
-declare const _default: {};
-export default _default;

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

@@ -1,4 +0,0 @@
-"use strict";
-exports.__esModule = true;
-require('./Avatar.css');
-exports.default = {};

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

@@ -1,2 +0,0 @@
-import './Avatar.css';
-export default {};