@patternfly/patternfly 4.163.0 → 4.164.0

package/docs/components/Truncate/examples/Truncate.md

@@ -0,0 +1,71 @@
+---
+id: 'Truncate'
+beta: true
+section: components
+cssPrefix: pf-c-truncate
+---## Examples
+
+### Notes
+
+The truncate component contains two child elements, `.pf-c-truncate__start` and `.pf-c-truncate__end`. If both `start` and `end` are present within `.pf-c-truncate`, trucation will occur in the middle of the string. If only `.pf-c-truncate__start` is present, truncation will occur at the end of the string. If only `.pf-c-truncate__end` is present, truncation will occur at the beginning of the string. A `.pf-c-popover` will be automatically applied to the PatternFly React implementation. `‎` must be included at the end of string to denote the ending punctuation mark. Otherwise it will occur and the beggining of truncation for a `pf-c-truncate__end` element.
+
+### Default
+
+```html
+<div style="width: 220px; resize: horizontal; overflow: auto;">
+  <span class="pf-c-truncate">
+    <span class="pf-c-truncate__start">
+      <span
+        class="pf-c-truncate__text"
+      >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.</span>
+    </span>
+  </span>
+</div>
+
+```
+
+### Middle
+
+```html
+<div style="width: 226px; resize: horizontal; overflow: auto;">
+  <span class="pf-c-truncate">
+    <span class="pf-c-truncate__start">
+      <span class="pf-c-truncate__text">redhat_logo_black_and_white_reversed_</span>
+    </span>
+    <span class="pf-c-truncate__end">
+      <span
+        class="pf-c-truncate__text"
+        style="--pf-c-truncate--FontSize: 1rem"
+      >simple_with_fedora_container.zip</span>
+    </span>
+  </span>
+</div>
+
+```
+
+### Start
+
+```html
+<div style="width: 220px; resize: horizontal; overflow: auto;">
+  <span class="pf-c-truncate">
+    <span class="pf-c-truncate__end">
+      <span
+        class="pf-c-truncate__text"
+        style="--pf-c-truncate--FontSize: 1rem"
+      >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.&lrm;</span>
+    </span>
+  </span>
+</div>
+
+```
+
+## Documentation
+
+### Usage
+
+| Class                   | Applied  | Outcome                                       |
+| ----------------------- | -------- | --------------------------------------------- |
+| `.pf-c-truncate`        | `<span>` | Initiates the truncate component.             |
+| `.pf-c-truncate__start` | `<span>` | Defines the truncate component starting text. |
+| `.pf-c-truncate__end`   | `<span>` | Defines the truncate component ending text.   |
+| `.pf-c-truncate__text`  | `<span>` | Defines the truncate component text.          |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.163.0",
+  "version": "4.164.0",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-reset.css

@@ -13205,7 +13205,7 @@ label.pf-c-check, .pf-c-check__label,
 .pf-c-form.pf-m-horizontal.pf-m-align-right .pf-c-form__label {
   text-align: right;
 }
-@media (min-width: 768px) {
+@media screen and (min-width: 768px) {
   .pf-c-form.pf-m-horizontal {
     --pf-c-form__group-label--PaddingBottom: 0;
   }
@@ -13225,6 +13225,126 @@ label.pf-c-check, .pf-c-check__label,
     grid-column: 2;
   }
 }
+@media screen and (min-width: 0) {
+  .pf-c-form.pf-m-horizontal-on-xs {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-form.pf-m-horizontal-on-sm {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-form.pf-m-horizontal-on-md {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-form.pf-m-horizontal-on-lg {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-form.pf-m-horizontal-on-xl {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-form.pf-m-horizontal-on-2xl {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
 .pf-c-form.pf-m-limit-width {
   max-width: var(--pf-c-form--m-limit-width--MaxWidth);
 }
@@ -16862,6 +16982,187 @@ ul.pf-c-list {
   }
 }
 
+.pf-c-multiple-file-upload {
+  --pf-c-multiple-file-upload--GridTemplateColumns: 1fr;
+  --pf-c-multiple-file-upload--Gap: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--TextAlign: center;
+  --pf-c-multiple-file-upload__main--GridTemplateColumns: auto;
+  --pf-c-multiple-file-upload__main--GridTemplateRows: auto;
+  --pf-c-multiple-file-upload__main--GridTemplateAreas:
+    "title"
+    "upload"
+    "info";
+  --pf-c-multiple-file-upload__main--Gap: var(--pf-global--spacer--md);
+  --pf-c-multiple-file-upload__main--PaddingTop: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-global--spacer--xl);
+  --pf-c-multiple-file-upload__main--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-multiple-file-upload__main--BorderStyle: dashed;
+  --pf-c-multiple-file-upload__main--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-multiple-file-upload__title--Display: grid;
+  --pf-c-multiple-file-upload__title--GridTemplateColumns: auto;
+  --pf-c-multiple-file-upload__title--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__title-icon--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__title-text-separator--Display: block;
+  --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__info--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-multiple-file-upload__info--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__info--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
+  --pf-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-global--palette--blue-50);
+  --pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
+  --pf-c-multiple-file-upload--m-horizontal__main--TextAlign: left;
+  --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
+  --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
+    "title upload"
+    "info upload";
+  --pf-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--2xl);
+  --pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
+  --pf-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-global--spacer--xs);
+  --pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
+  --pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
+  --pf-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
+  --pf-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
+  --pf-c-multiple-file-upload__status-progress--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__status-progress-icon--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
+  --pf-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
+  --pf-c-multiple-file-upload__status-item--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__status-item--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-multiple-file-upload__status-item--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-multiple-file-upload__status-item-icon--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+  --pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
+  --pf-c-multiple-file-upload__status-item-progress--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-global--primary-color--100);
+  --pf-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-global--Color--200);
+  display: grid;
+  gap: var(--pf-c-multiple-file-upload--Gap);
+  grid-template-columns: var(--pf-c-multiple-file-upload--GridTemplateColumns);
+}
+.pf-c-multiple-file-upload.pf-m-horizontal {
+  --pf-c-multiple-file-upload--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
+  --pf-c-multiple-file-upload__main--TextAlign: var(--pf-c-multiple-file-upload--m-horizontal__main--TextAlign);
+  --pf-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
+  --pf-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
+  --pf-c-multiple-file-upload__main--Gap: var(--pf-c-multiple-file-upload--m-horizontal__main--Gap);
+  --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
+  --pf-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
+  --pf-c-multiple-file-upload__title--Gap: var(--pf-c-multiple-file-upload--m-horizontal__title--Gap);
+  --pf-c-multiple-file-upload__title-text-separator--Display: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
+  --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
+  --pf-c-multiple-file-upload__info--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__info--MarginTop);
+}
+.pf-c-multiple-file-upload.pf-m-drag-over {
+  --pf-c-multiple-file-upload__main--BorderStyle: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderStyle);
+  --pf-c-multiple-file-upload__main--BorderColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderColor);
+  --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
+  --pf-c-multiple-file-upload__title-icon--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
+  --pf-c-multiple-file-upload__title-text--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-text--Color);
+  --pf-c-multiple-file-upload__info--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__info--Color);
+}
+
+.pf-c-multiple-file-upload__main {
+  display: grid;
+  padding: var(--pf-c-multiple-file-upload__main--PaddingTop) var(--pf-c-multiple-file-upload__main--PaddingRight) var(--pf-c-multiple-file-upload__main--PaddingBottom) var(--pf-c-multiple-file-upload__main--PaddingLeft);
+  text-align: var(--pf-c-multiple-file-upload__main--TextAlign);
+  background-color: var(--pf-c-multiple-file-upload__main--BackgroundColor);
+  border: var(--pf-c-multiple-file-upload__main--BorderWidth) var(--pf-c-multiple-file-upload__main--BorderStyle) var(--pf-c-multiple-file-upload__main--BorderColor);
+  grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
+  grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
+  grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
+  gap: var(--pf-c-multiple-file-upload__main--Gap);
+}
+
+.pf-c-multiple-file-upload__title {
+  display: var(--pf-c-multiple-file-upload__title--Display);
+  grid-template-columns: var(--pf-c-multiple-file-upload__title--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__title--Gap);
+  grid-area: title;
+}
+
+.pf-c-multiple-file-upload__title-icon {
+  color: var(--pf-c-multiple-file-upload__title-icon--Color);
+}
+
+.pf-c-multiple-file-upload__title-text {
+  color: var(--pf-c-multiple-file-upload__title-text--Color, inherit);
+}
+
+.pf-c-multiple-file-upload__title-text-separator {
+  display: var(--pf-c-multiple-file-upload__title-text-separator--Display);
+  margin-top: var(--pf-c-multiple-file-upload__title-text-separator--MarginTop);
+}
+
+.pf-c-multiple-file-upload__upload {
+  grid-area: upload;
+}
+
+.pf-c-multiple-file-upload__info {
+  grid-area: info;
+  margin-top: var(--pf-c-multiple-file-upload__info--MarginTop);
+  font-size: var(--pf-c-multiple-file-upload__info--FontSize);
+  color: var(--pf-c-multiple-file-upload__info--Color);
+}
+
+.pf-c-multiple-file-upload__status,
+.pf-c-multiple-file-upload__status-item-main {
+  min-width: 0;
+}
+
+.pf-c-multiple-file-upload__status-progress {
+  display: grid;
+  grid-template-columns: var(--pf-c-multiple-file-upload__status-progress--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__status-progress--Gap);
+}
+
+.pf-c-multiple-file-upload__status-progress-icon {
+  color: var(--pf-c-multiple-file-upload__status-progress-icon--Color);
+}
+
+.pf-c-multiple-file-upload__status-item {
+  display: grid;
+  grid-template-columns: var(--pf-c-multiple-file-upload__status-item--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__status-item--Gap);
+  padding-top: var(--pf-c-multiple-file-upload__status-item--PaddingTop);
+  padding-bottom: var(--pf-c-multiple-file-upload__status-item--PaddingBottom);
+  border-bottom: var(--pf-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-c-multiple-file-upload__status-item--BorderColor);
+}
+.pf-c-multiple-file-upload__status-item:first-child {
+  --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-c-multiple-file-upload__status-item--first-child--PaddingTop);
+}
+
+.pf-c-multiple-file-upload__status-item-icon {
+  color: var(--pf-c-multiple-file-upload__status-item-icon--Color);
+}
+
+.pf-c-multiple-file-upload__status-item-close {
+  margin-top: var(--pf-c-multiple-file-upload__status-item-close--MarginTop);
+}
+
+.pf-c-multiple-file-upload__status-item-progress {
+  display: grid;
+  grid-template-columns: var(--pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__status-item-progress--Gap);
+}
+
+.pf-c-multiple-file-upload__status-item-progress-text {
+  color: var(--pf-c-multiple-file-upload__status-item-progress-text--Color);
+}
+
+.pf-c-multiple-file-upload__status-item-progress-size {
+  color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
+}
+
 .pf-c-nav {
   --pf-c-nav--Transition: var(--pf-global--Transition);
   --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -26774,6 +27075,52 @@ svg.pf-c-spinner.pf-m-xl {
   background-color: var(--pf-c-tooltip__content--BackgroundColor);
 }
 
+.pf-c-truncate {
+  --pf-c-truncate--FontSize: var(--pf-c-truncate--FontSize, 1rem);
+  display: inline-flex;
+  flex-wrap: nowrap;
+  max-width: 100%;
+}
+
+.pf-c-truncate__start,
+.pf-c-truncate__end {
+  flex-shrink: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-c-truncate__end {
+  direction: rtl;
+  text-align: left;
+}
+
+@supports (text-overflow: "") {
+  .pf-c-truncate__start + .pf-c-truncate__end {
+    text-overflow: "";
+  }
+}
+@supports not (text-overflow: "") {
+  .pf-c-truncate__start + .pf-c-truncate__end {
+    font-size: 0;
+  }
+  .pf-c-truncate__start + .pf-c-truncate__end .pf-c-truncate__text {
+    font-size: var(--pf-c-truncate--FontSize);
+  }
+}
+@supports (-webkit-hyphens: none) {
+  .pf-c-truncate {
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .pf-c-truncate__end {
+    direction: ltr;
+  }
+}
 .pf-c-number-input {
   --pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);