@patternfly/patternfly 6.1.0-prerelease.1 → 6.1.0-prerelease.3

package/components/_index.css

@@ -2805,9 +2805,22 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-code-editor__tab-icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
 }
 
+.pf-v6-c-code-editor {
+  display: flex;
+  flex-direction: column;
+}
 .pf-v6-c-code-editor.pf-m-read-only {
   --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
 }
+.pf-v6-c-code-editor.pf-m-full-height {
+  height: 100%;
+}
+
+.pf-v6-c-code-editor__container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
 
 .pf-v6-c-code-editor__header {
   position: relative;
@@ -2874,6 +2887,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 
 .pf-v6-c-code-editor__main {
   position: relative;
+  flex-grow: 1;
   color: var(--pf-v6-c-code-editor__main--Color, inherit);
   background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
   border: var(--pf-v6-c-code-editor__main--BorderWidth) solid;
@@ -2895,6 +2909,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 
 .pf-v6-c-code-editor__code {
   position: relative;
+  height: 100%;
   padding-block-start: var(--pf-v6-c-code-editor__code--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-code-editor__code--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-code-editor__code--PaddingInlineStart);
@@ -2967,6 +2982,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
   --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-content--heading--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
   --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -3066,6 +3082,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):last-child {
   margin-block-end: 0;
 }
+:is(.pf-v6-c-content--h1,
+.pf-v6-c-content--h2,
+.pf-v6-c-content--h3,
+.pf-v6-c-content--h4,
+.pf-v6-c-content--h5,
+.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6).pf-m-page-title {
+  font-weight: var(--pf-v6-c-content--heading--m-page-title--FontWeight);
+}
 
 :is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
   margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);
@@ -7836,6 +7860,7 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--MaxWidth: 100%;
+  --pf-v6-c-label--MinWidth: 3em;
   --pf-v6-c-label--BorderWidth: 0;
   --pf-v6-c-label--BorderColor: transparent;
   --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -8025,6 +8050,7 @@ label.pf-v6-c-input-group__text {
 
 .pf-v6-c-label {
   position: relative;
+  min-width: var(--pf-v6-c-label--MinWidth);
   max-width: var(--pf-v6-c-label--MaxWidth);
   padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
@@ -8327,16 +8353,22 @@ input.pf-v6-c-label__content {
 .pf-v6-c-label-group {
   --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-label-group--MaxWidth: 100%;
   --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-label-group__main--MaxWidth: 100%;
+  --pf-v6-c-label-group__main--MinWidth: 0;
   --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-label-group__list--MaxWidth: 100%;
+  --pf-v6-c-label-group__list--MinWidth: 0;
   --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-label-group__list-item--MaxWidth: 100%;
   --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
@@ -8363,6 +8395,7 @@ input.pf-v6-c-label__content {
   row-gap: var(--pf-v6-c-label-group--RowGap);
   column-gap: var(--pf-v6-c-label-group--ColumnGap);
   align-items: center;
+  max-width: var(--pf-v6-c-label-group--MaxWidth);
 }
 .pf-v6-c-label-group.pf-m-category {
   padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
@@ -8388,9 +8421,11 @@ input.pf-v6-c-label__content {
 .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
   flex-direction: column;
   align-items: flex-start;
+  max-width: var(--pf-v6-c-label-group__list--MaxWidth);
 }
 .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
   flex-direction: column;
+  min-width: var(--pf-v6-c-label-group__main--MinWidth);
 }
 .pf-v6-c-label-group.pf-m-editable,
 .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
@@ -8411,6 +8446,7 @@ input.pf-v6-c-label__content {
   row-gap: var(--pf-v6-c-label-group__main--RowGap);
   column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
   align-items: baseline;
+  min-width: var(--pf-v6-c-label-group__main--MinWidth);
 }
 
 .pf-v6-c-label-group__list {
@@ -8418,10 +8454,12 @@ input.pf-v6-c-label__content {
   flex-wrap: wrap;
   row-gap: var(--pf-v6-c-label-group__list--RowGap);
   column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
+  min-width: var(--pf-v6-c-label-group__list--MinWidth);
 }
 
 .pf-v6-c-label-group__list-item {
   display: inline-flex;
+  max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
 }
 
 .pf-v6-c-label-group__label {
@@ -10283,13 +10321,6 @@ ul.pf-v6-c-list {
   flex-wrap: nowrap;
 }
 
-.pf-v6-c-menu-toggle__controls,
-.pf-v6-c-menu-toggle__toggle-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .pf-v6-c-menu-toggle__icon {
   flex-shrink: 0;
 }
@@ -10301,7 +10332,10 @@ ul.pf-v6-c-list {
 }
 
 .pf-v6-c-menu-toggle__controls {
+  display: flex;
   gap: var(--pf-v6-c-menu-toggle__controls--Gap);
+  align-items: center;
+  justify-content: center;
   margin-inline-start: auto;
 }
 
@@ -14927,7 +14961,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-table--cell--Width: auto;
 }
 
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: calc(48rem - 1px)) {
   .pf-m-grid-md.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -15197,14 +15231,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
     text-align: end;
   }
 }
-@media screen and (max-width: 48rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(48rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: calc(48rem - 1px)) {
   .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -15230,7 +15264,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   }
 }
 
-@media screen and (max-width: 62rem) {
+@media screen and (max-width: calc(62rem - 1px)) {
   .pf-m-grid-lg.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -15500,14 +15534,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
     text-align: end;
   }
 }
-@media screen and (max-width: 62rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(62rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 62rem) {
+@media screen and (max-width: calc(62rem - 1px)) {
   .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -15533,7 +15567,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   }
 }
 
-@media screen and (max-width: 75rem) {
+@media screen and (max-width: calc(75rem - 1px)) {
   .pf-m-grid-xl.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -15803,14 +15837,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
     text-align: end;
   }
 }
-@media screen and (max-width: 75rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(75rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 75rem) {
+@media screen and (max-width: calc(75rem - 1px)) {
   .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -15836,7 +15870,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   }
 }
 
-@media screen and (max-width: 90.625rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) {
   .pf-m-grid-2xl.pf-v6-c-table {
     --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
     --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -16106,14 +16140,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
     text-align: end;
   }
 }
-@media screen and (max-width: 90.625rem) and (max-width: 36rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) and (max-width: 36rem) {
   .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 90.625rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) {
   .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__inline-edit-action {
     grid-column: 2;
     grid-row: 2;
@@ -16667,6 +16701,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 .pf-v6-c-table .pf-v6-c-table__draggable {
   --pf-v6-c-table--cell--MinWidth: 0;
   --pf-v6-c-table--cell--Width: 1%;
+  max-width: none;
 }
 
 .pf-v6-c-table .pf-v6-c-table__favorite {
@@ -17315,7 +17350,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--pf-v6-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-v6-c-table__tree-view-main--indent--base));
 }
 
-@media screen and (max-width: 48rem) {
+@media screen and (max-width: calc(48rem - 1px)) {
   .pf-m-tree-view-grid-md.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -17458,7 +17493,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   }
 }
 
-@media screen and (max-width: 62rem) {
+@media screen and (max-width: calc(62rem - 1px)) {
   .pf-m-tree-view-grid-lg.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -17601,7 +17636,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   }
 }
 
-@media screen and (max-width: 75rem) {
+@media screen and (max-width: calc(75rem - 1px)) {
   .pf-m-tree-view-grid-xl.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -17744,7 +17779,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   }
 }
 
-@media screen and (max-width: 90.625rem) {
+@media screen and (max-width: calc(90.625rem - 1px)) {
   .pf-m-tree-view-grid-2xl.pf-v6-c-table {
     --pf-v6-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
     --pf-v6-c-table--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -19072,6 +19107,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-title--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
   --pf-v6-c-title--m-h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-title--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
 }
 
 .pf-v6-c-title {
@@ -19138,6 +19174,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   font-weight: var(--pf-v6-c-title--m-h6--FontWeight);
   line-height: var(--pf-v6-c-title--m-h6--LineHeight);
 }
+.pf-v6-c-title.pf-m-page-title {
+  font-weight: var(--pf-v6-c-title--m-page-title--FontWeight);
+}
 
 .pf-v6-c-toggle-group {
   --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -21909,7 +21948,7 @@ label.pf-v6-c-tree-view__node-text {
   --pf-v6-c-wizard__toggle-separator--Color: var(--pf-t--global--border--color--default);
   --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
-  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--xs);
+  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-wizard__nav--Width: 100%;

package/docs/components/CodeEditor/examples/CodeEditor.css

@@ -0,0 +1,3 @@
+#ws-core-c-code-editor-with-full-height-modifier .ws-preview-html {
+  height: 400px;
+}

package/docs/components/CodeEditor/examples/CodeEditor.md

@@ -2,7 +2,9 @@
 id: Code editor
 section: components
 cssPrefix: pf-v6-c-code-editor
----## Examples
+---import './CodeEditor.css';
+
+## Examples
 
 ### Default
 
@@ -49,11 +51,11 @@ cssPrefix: pf-v6-c-code-editor
     </div>
   </div>
   <div class="pf-v6-c-code-editor__main">
-    <code dir="ltr" class="pf-v6-c-code-editor__code">
+    <div dir="ltr" class="pf-v6-c-code-editor__code">
       <pre class="pf-v6-c-code-editor__code-pre">
                 code goes here
       </pre>
-    </code>
+    </div>
   </div>
 </div>
 
@@ -104,11 +106,11 @@ cssPrefix: pf-v6-c-code-editor
     </div>
   </div>
   <div class="pf-v6-c-code-editor__main">
-    <code dir="ltr" class="pf-v6-c-code-editor__code">
+    <div dir="ltr" class="pf-v6-c-code-editor__code">
       <pre class="pf-v6-c-code-editor__code-pre">
                 code goes here
       </pre>
-    </code>
+    </div>
   </div>
 </div>
 
@@ -267,11 +269,158 @@ cssPrefix: pf-v6-c-code-editor
     </div>
   </div>
   <div class="pf-v6-c-code-editor__main">
-    <code dir="ltr" class="pf-v6-c-code-editor__code">
+    <div dir="ltr" class="pf-v6-c-code-editor__code">
       <pre class="pf-v6-c-code-editor__code-pre">
                 code goes here
       </pre>
-    </code>
+    </div>
+  </div>
+</div>
+
+```
+
+### With optional code editor container
+
+This is an extra container used in React to prevent event propagation if upload is enabled or there is a provided empty state.
+
+```html
+<div class="pf-v6-c-code-editor">
+  <div role="presentation" tabindex="0" class="pf-v6-c-code-editor__container">
+    <div class="pf-v6-c-code-editor__header">
+      <div class="pf-v6-c-code-editor__header-content">
+        <div class="pf-v6-c-code-editor__controls">
+          <button
+            class="pf-v6-c-button pf-m-plain"
+            type="button"
+            aria-label="Copy to clipboard"
+          >
+            <span class="pf-v6-c-button__icon">
+              <i class="fas fa-copy" aria-hidden="true"></i>
+            </span>
+          </button>
+          <button
+            class="pf-v6-c-button pf-m-plain"
+            type="button"
+            aria-label="Download code"
+          >
+            <span class="pf-v6-c-button__icon">
+              <i class="fas fa-download" aria-hidden="true"></i>
+            </span>
+          </button>
+          <button
+            class="pf-v6-c-button pf-m-plain"
+            type="button"
+            aria-label="Upload code"
+          >
+            <span class="pf-v6-c-button__icon">
+              <i class="fas fa-upload" aria-hidden="true"></i>
+            </span>
+          </button>
+        </div>
+      </div>
+      <div class="pf-v6-c-code-editor__tab">
+        <span class="pf-v6-c-code-editor__tab-icon">
+          <i class="fas fa-code"></i>
+        </span>
+        <span class="pf-v6-c-code-editor__tab-text">HTML</span>
+      </div>
+    </div>
+    <div class="pf-v6-c-code-editor__main">
+      <div class="pf-v6-c-code-editor__upload">
+        <div class="pf-v6-c-empty-state">
+          <div class="pf-v6-c-empty-state__content">
+            <div class="pf-v6-c-empty-state__header">
+              <div class="pf-v6-c-empty-state__icon">
+                <i class="fas fa- fa-code" aria-hidden="true"></i>
+              </div>
+              <div class="pf-v6-c-empty-state__title">
+                <h1 class="pf-v6-c-empty-state__title-text">Start editing</h1>
+              </div>
+            </div>
+
+            <div
+              class="pf-v6-c-empty-state__body"
+            >Drag a file here or browse to upload.</div>
+
+            <div class="pf-v6-c-empty-state__footer">
+              <div class="pf-v6-c-empty-state__actions">
+                <button class="pf-v6-c-button pf-m-primary" type="button">
+                  <span class="pf-v6-c-button__text">Browse</span>
+                </button>
+              </div>
+              <div class="pf-v6-c-empty-state__actions">
+                <button class="pf-v6-c-button pf-m-link" type="button">
+                  <span class="pf-v6-c-button__text">Start from scratch</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
+### With full height modifier
+
+```html
+<div class="pf-v6-c-code-editor pf-m-full-height">
+  <div class="pf-v6-c-code-editor__header">
+    <div class="pf-v6-c-code-editor__header-content">
+      <div class="pf-v6-c-code-editor__controls">
+        <button
+          class="pf-v6-c-button pf-m-plain"
+          type="button"
+          aria-label="Copy to clipboard"
+        >
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-copy" aria-hidden="true"></i>
+          </span>
+        </button>
+        <button
+          class="pf-v6-c-button pf-m-plain"
+          type="button"
+          aria-label="Download code"
+        >
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-download" aria-hidden="true"></i>
+          </span>
+        </button>
+        <button
+          class="pf-v6-c-button pf-m-plain"
+          type="button"
+          aria-label="Upload code"
+        >
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-upload" aria-hidden="true"></i>
+          </span>
+        </button>
+      </div>
+      <div class="pf-v6-c-code-editor__header-main">Header main content</div>
+      <div class="pf-v6-c-code-editor__keyboard-shortcuts">
+        <button class="pf-v6-c-button pf-m-link" type="button">
+          <span class="pf-v6-c-button__icon pf-m-start">
+            <i class="fas fa-question-circle" aria-hidden="true"></i>
+          </span>
+          <span class="pf-v6-c-button__text">View shortcuts</span>
+        </button>
+      </div>
+    </div>
+    <div class="pf-v6-c-code-editor__tab">
+      <span class="pf-v6-c-code-editor__tab-icon">
+        <i class="fas fa-code"></i>
+      </span>
+      <span class="pf-v6-c-code-editor__tab-text">HTML</span>
+    </div>
+  </div>
+  <div class="pf-v6-c-code-editor__main">
+    <div dir="ltr" class="pf-v6-c-code-editor__code">
+      <pre class="pf-v6-c-code-editor__code-pre">
+                code goes here
+      </pre>
+    </div>
   </div>
 </div>
 
@@ -295,3 +444,5 @@ cssPrefix: pf-v6-c-code-editor
 | `.pf-v6-c-code-editor__tab-text`           | `<span>`   | Initiates the code editor tab text.                                                           |
 | `.pf-v6-c-code-editor__tab-icon`           | `<span>`   | Initiates the code editor tab icon.                                                           |
 | `.pf-v6-c-code-editor__upload`             | `<div>`    | Initiates the code editor upload border.                                                      |
+| `.pf-v6-c-code-editor__container`             | `<div>`    | Initiates the container used inside `.pf-v6-c-code-editor` in PatternFly React. This is used in PatternFly React to prevent event propagation if upload is enabled or there is a provided empty state.                                                      |
+| `.pf-m-full-height`             | `.pf-v6-c-code-editor`    | Modifies for full-height style.                                                   |

package/docs/components/Content/examples/Content.md

@@ -7,7 +7,7 @@ cssPrefix: pf-v6-c-content
 ### Basic
 
 ```html
-<h1 class="pf-v6-c-content--h1">Hello world</h1>
+<h1 class="pf-v6-c-content--h1 pf-m-page-title">Hello world</h1>
 <p
   class="pf-v6-c-content--p"
 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
@@ -179,7 +179,7 @@ cssPrefix: pf-v6-c-content
 
 ```html
 <div class="pf-v6-c-content">
-  <h1>Hello world</h1>
+  <h1 class="pf-m-page-title">Hello world</h1>
   <p
     class
   >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
@@ -329,7 +329,7 @@ cssPrefix: pf-v6-c-content
 ### Long-form/editorial content
 
 ```html
-<h1 class="pf-v6-c-content--h1 pf-m-editorial">Hello world</h1>
+<h1 class="pf-v6-c-content--h1 pf-m-page-title pf-m-editorial">Hello world</h1>
 <p
   class="pf-v6-c-content--p pf-m-editorial"
 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
@@ -425,7 +425,7 @@ cssPrefix: pf-v6-c-content
 </p>
 <hr class="pf-v6-c-content--hr pf-m-editorial" />
 <h3 class="pf-v6-c-content--h3 pf-m-editorial">Plain list example</h3>
-<ol class="pf-v6-c-content--ol pf-m-editorial pf-m-plain">
+<ol class="pf-v6-c-content--ol pf-m-plain pf-m-editorial">
   <li
     class="pf-v6-c-content--li pf-m-editorial"
   >Donec blandit a lorem id convallis.</li>
@@ -446,7 +446,7 @@ cssPrefix: pf-v6-c-content
       >Cras gravida arcu at diam gravida gravida.</li>
       <li class="pf-v6-c-content--li pf-m-editorial">
         Integer in volutpat libero.
-        <ol class="pf-v6-c-content--ol pf-m-editorial pf-m-plain">
+        <ol class="pf-v6-c-content--ol pf-m-plain pf-m-editorial">
           <li class="pf-v6-c-content--li pf-m-editorial">Nested plain list</li>
           <li
             class="pf-v6-c-content--li pf-m-editorial"
@@ -469,7 +469,7 @@ cssPrefix: pf-v6-c-content
 <hr class="pf-v6-c-content--hr pf-m-editorial" />
 <h3 class="pf-v6-c-content--h3 pf-m-editorial">Visited link example</h3>
 <p class="pf-v6-c-content--p pf-m-editorial">
-  <a class="pf-v6-c-content--a pf-m-editorial pf-m-plain" href>Visited link</a>
+  <a class="pf-v6-c-content--a pf-m-plain pf-m-editorial" href>Visited link</a>
 </p>
 <hr class="pf-v6-c-content--hr pf-m-editorial" />
 <p class="pf-v6-c-content--p pf-m-editorial">
@@ -533,7 +533,7 @@ cssPrefix: pf-v6-c-content
 
 ```html
 <div class="pf-v6-c-content pf-m-editorial">
-  <h1>Hello world</h1>
+  <h1 class="pf-m-page-title">Hello world</h1>
   <p
     class
   >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
@@ -704,3 +704,4 @@ This component is an exception to the variable system since we style type select
 | `.pf-m-visited` | `.pf-v6-c-content`, `<a>` | Modifies all links in a content block to include visited styles. Can also be applied to a single link in a content block. |
 | `.pf-m-plain` | `<ul>`, `<ol>` | Removes the list marker and indentation. |
 | `.pf-m-editorial` | `.pf-v6-c-content*` | Applies long-form, editorial content styles to a block of content or individual content elements. |
+| `.pf-m-page-title` | `.pf-v6-c-content--[h1, h2, h3, h4, h5, h6]`, `.pf-v6-c-content [h1, h2, h3, h4, h5, h6]` | Applies page title styles. **Note:** `.pf-m-page-title` should only apply to the heading that serves as the title for the current page. |

package/docs/components/InlineEdit/examples/InlineEdit.md

@@ -470,12 +470,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
     <caption class="pf-v6-c-table__caption">This is the table caption</caption>
 
     <thead class="pf-v6-c-table__thead">
-      <tr
-        class="pf-v6-c-table__tr"
-        role&#x26;#x3D;&#x26;quot;row&#x26;quot;
-        [object
-        Object]
-      >
+      <tr class="pf-v6-c-table__tr" role="row">
         <th class="pf-v6-c-table__th" role="columnheader">Text input</th>
 
         <th class="pf-v6-c-table__th" role="columnheader">Disabled text input</th>
@@ -505,12 +500,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
     </thead>
 
     <tbody class="pf-v6-c-table__tbody" role="rowgroup">
-      <tr
-        class="pf-v6-c-table__tr pf-m-inline-editable"
-        role&#x26;#x3D;&#x26;quot;row&#x26;quot;
-        [object
-        Object]
-      >
+      <tr class="pf-v6-c-table__tr pf-m-inline-editable" role="row">
         <th
           class="pf-v6-c-table__th"
           role="columnheader"
@@ -699,12 +689,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
         </td>
       </tr>
 
-      <tr
-        class="pf-v6-c-table__tr"
-        role&#x26;#x3D;&#x26;quot;row&#x26;quot;
-        [object
-        Object]
-      >
+      <tr class="pf-v6-c-table__tr" role="row">
         <th
           class="pf-v6-c-table__th"
           role="columnheader"

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

@@ -11,3 +11,15 @@
 #ws-core-c-label-overflow .pf-v6-c-label {
   margin: 4px;
 }
+
+#ws-core-c-label-labels-with-truncation .ws-preview-html { 
+  max-width: 320px;
+}
+
+.pf-v6-c-label-truncate--example {
+  max-width: 100%;
+  padding: var(--pf-t--global--spacer--sm);
+  overflow: auto;
+  resize: horizontal;
+  border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
+}