@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

package/docs/utilities/Display/examples/Display.md

@@ -1,6 +1,6 @@
 ---
 id: Display
-section: utilities
+section: utility-classes
 ---import './Display.css'
 
 ## Examples
@@ -80,14 +80,14 @@ section: utilities
 
 ### Usage
 
-| Class                                          | Applied to | Outcome                    |
-| ---------------------------------------------- | ---------- | -------------------------- |
-| `.pf-u-display-inline-block{-on-[breakpoint]}` | `*`        | Sets display: inline-block |
-| `.pf-u-display-block{-on-[breakpoint]}`        | `*`        | Sets display: block        |
-| `.pf-u-display-inline{-on-[breakpoint]}`       | `*`        | Sets display: inline       |
-| `.pf-u-display-flex{-on-[breakpoint]}`         | `*`        | Sets display: flex         |
-| `.pf-u-display-inline-flex{-on-[breakpoint]}`  | `*`        | Sets display: inline-flex  |
-| `.pf-u-display-table{-on-[breakpoint]}`        | `*`        | Sets display: table        |
-| `.pf-u-display-table-row{-on-[breakpoint]}`    | `*`        | Sets display: table-row    |
-| `.pf-u-display-table-cell{-on-[breakpoint]}`   | `*`        | Sets display: table-cell   |
-| `.pf-u-display-none{-on-[breakpoint]}`         | `*`        | Sets display: none         |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-display-inline-block{-on-[breakpoint]}` | `*` |  Sets display: inline-block |
+| `.pf-u-display-block{-on-[breakpoint]}` | `*` |  Sets display: block |
+| `.pf-u-display-inline{-on-[breakpoint]}` | `*` |  Sets display: inline |
+| `.pf-u-display-flex{-on-[breakpoint]}` | `*` |  Sets display: flex |
+| `.pf-u-display-inline-flex{-on-[breakpoint]}` | `*` |  Sets display: inline-flex |
+| `.pf-u-display-table{-on-[breakpoint]}` | `*` |  Sets display: table |
+| `.pf-u-display-table-row{-on-[breakpoint]}` | `*` |  Sets display: table-row |
+| `.pf-u-display-table-cell{-on-[breakpoint]}` | `*` |  Sets display: table-cell |
+| `.pf-u-display-none{-on-[breakpoint]}` | `*` |  Sets display: none |

package/docs/utilities/Flex/examples/Flex.md

@@ -1,6 +1,6 @@
 ---
 id: Flex
-section: utilities
+section: utility-classes
 ---import './Flex.css'
 
 ## Examples
@@ -339,37 +339,37 @@ For these utilities to have effect, the parent element must be set to `display:
 
 ### Usage
 
-| Class                                                   | Applied to | Outcome                             |
-| ------------------------------------------------------- | ---------- | ----------------------------------- |
-| `.pf-u-flex-direction-row{-on-[breakpoint]}`            | `*`        | Sets flex-direction: row            |
-| `.pf-u-flex-direction-row-reverse{-on-[breakpoint]}`    | `*`        | Sets flex-direction: row-reverse    |
-| `.pf-u-flex-direction-column{-on-[breakpoint]}`         | `*`        | Sets flex-direction: column         |
-| `.pf-u-flex-direction-column-reverse{-on-[breakpoint]}` | `*`        | Sets flex-direction: column-reverse |
-| `.pf-u-justify-content-flex-start{-on-[breakpoint]}`    | `*`        | Sets justify-content: flex-start    |
-| `.pf-u-justify-content-flex-end{-on-[breakpoint]}`      | `*`        | Sets justify-content: flex-end      |
-| `.pf-u-justify-content-center{-on-[breakpoint]}`        | `*`        | Sets justify-content: center        |
-| `.pf-u-justify-content-space-around{-on-[breakpoint]}`  | `*`        | Sets justify-content: space-around  |
-| `.pf-u-justify-content-space-between{-on-[breakpoint]}` | `*`        | Sets justify-content: space-between |
-| `.pf-u-align-items-flex-start{-on-[breakpoint]}`        | `*`        | Sets align-items: flex-start        |
-| `.pf-u-align-items-flex-end{-on-[breakpoint]}`          | `*`        | Sets align-items: flex-start        |
-| `.pf-u-align-items-center{-on-[breakpoint]}`            | `*`        | Sets align-items: center            |
-| `.pf-u-align-items-baseline{-on-[breakpoint]}`          | `*`        | Sets align-items: baseline          |
-| `.pf-u-align-items-stretch{-on-[breakpoint]}`           | `*`        | Sets align-items: stretch           |
-| `.pf-u-align-self-flex-start{-on-[breakpoint]}`         | `*`        | Sets align-self: flex-start         |
-| `.pf-u-align-self-flex-end{-on-[breakpoint]}`           | `*`        | Sets align-self: flex-end           |
-| `.pf-u-align-self-center{-on-[breakpoint]}`             | `*`        | Sets align-self: center             |
-| `.pf-u-align-self-baseline{-on-[breakpoint]}`           | `*`        | Sets align-self: baseline           |
-| `.pf-u-align-self-stretch{-on-[breakpoint]}`            | `*`        | Sets align-self: stretch            |
-| `.pf-u-align-content-flex-start{-on-[breakpoint]}`      | `*`        | Sets align-content: flex-start      |
-| `.pf-u-align-content-flex-end{-on-[breakpoint]}`        | `*`        | Sets align-content: flex-end        |
-| `.pf-u-align-content-center{-on-[breakpoint]}`          | `*`        | Sets align-content: center          |
-| `.pf-u-align-content-space-between{-on-[breakpoint]}`   | `*`        | Sets align-content: space-between   |
-| `.pf-u-align-content-space-around{-on-[breakpoint]}`    | `*`        | Sets align-content: space-around    |
-| `.pf-u-align-content-stretch{-on-[breakpoint]}`         | `*`        | Sets align-content: stretch         |
-| `.pf-u-flex-shrink{1 or 0}{-on-[breakpoint]}`           | `*`        | Sets flex-shrink to 1 or 0          |
-| `.pf-u-flex-grow{1 or 0}{-on-[breakpoint]}`             | `*`        | Sets flex-grow to 1 or 0            |
-| `.pf-u-flex-basis{0 or auto}{-on-[breakpoint]}`         | `*`        | Sets flex-basis to 0 auto           |
-| `.pf-u-flex-fill{-on-[breakpoint]}`                     | `*`        | Sets flex to 1 1 auto               |
-| `.pf-u-flex-wrap{-on-[breakpoint]}`                     | `*`        | sets flex-wrap: wrap                |
-| `.pf-u-flex-nowrap{-on-[breakpoint]}`                   | `*`        | sets flex-wrap: nowrap              |
-| `.pf-u-flex-wrap-reverse{-on-[breakpoint]}`             | `*`        | sets flex-wrap: wrap-reverse        |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-flex-direction-row{-on-[breakpoint]}`            | `*` |  Sets flex-direction: row |
+| `.pf-u-flex-direction-row-reverse{-on-[breakpoint]}`    | `*` |  Sets flex-direction: row-reverse |
+| `.pf-u-flex-direction-column{-on-[breakpoint]}`         | `*` |  Sets flex-direction: column |
+| `.pf-u-flex-direction-column-reverse{-on-[breakpoint]}` | `*` |  Sets flex-direction: column-reverse |
+| `.pf-u-justify-content-flex-start{-on-[breakpoint]}`    | `*` |  Sets justify-content: flex-start |
+| `.pf-u-justify-content-flex-end{-on-[breakpoint]}`      | `*` |  Sets justify-content: flex-end |
+| `.pf-u-justify-content-center{-on-[breakpoint]}`        | `*` |  Sets justify-content: center |
+| `.pf-u-justify-content-space-around{-on-[breakpoint]}`  | `*` |  Sets justify-content: space-around |
+| `.pf-u-justify-content-space-between{-on-[breakpoint]}` | `*` |  Sets justify-content: space-between |
+| `.pf-u-align-items-flex-start{-on-[breakpoint]}`        | `*` |  Sets align-items: flex-start |
+| `.pf-u-align-items-flex-end{-on-[breakpoint]}`          | `*` |  Sets align-items: flex-start |
+| `.pf-u-align-items-center{-on-[breakpoint]}`            | `*` |  Sets align-items: center |
+| `.pf-u-align-items-baseline{-on-[breakpoint]}`          | `*` |  Sets align-items: baseline |
+| `.pf-u-align-items-stretch{-on-[breakpoint]}`           | `*` |  Sets align-items: stretch |
+| `.pf-u-align-self-flex-start{-on-[breakpoint]}`         | `*` |  Sets align-self: flex-start |
+| `.pf-u-align-self-flex-end{-on-[breakpoint]}`           | `*` |  Sets align-self: flex-end |
+| `.pf-u-align-self-center{-on-[breakpoint]}`             | `*` |  Sets align-self: center |
+| `.pf-u-align-self-baseline{-on-[breakpoint]}`           | `*` |  Sets align-self: baseline |
+| `.pf-u-align-self-stretch{-on-[breakpoint]}`            | `*` |  Sets align-self: stretch |
+| `.pf-u-align-content-flex-start{-on-[breakpoint]}`      | `*` |  Sets align-content: flex-start |
+| `.pf-u-align-content-flex-end{-on-[breakpoint]}`        | `*` |  Sets align-content: flex-end |
+| `.pf-u-align-content-center{-on-[breakpoint]}`          | `*` |  Sets align-content: center |
+| `.pf-u-align-content-space-between{-on-[breakpoint]}`   | `*` |  Sets align-content: space-between |
+| `.pf-u-align-content-space-around{-on-[breakpoint]}`    | `*` |  Sets align-content: space-around |
+| `.pf-u-align-content-stretch{-on-[breakpoint]}`         | `*` |  Sets align-content: stretch |
+| `.pf-u-flex-shrink{1 or 0}{-on-[breakpoint]}`           | `*` |  Sets flex-shrink to 1 or 0 |
+| `.pf-u-flex-grow{1 or 0}{-on-[breakpoint]}`             | `*` |  Sets flex-grow to 1 or 0 |
+| `.pf-u-flex-basis{0 or auto}{-on-[breakpoint]}`         | `*` |  Sets flex-basis to 0 auto |
+| `.pf-u-flex-fill{-on-[breakpoint]}`                     | `*` |  Sets flex to 1 1 auto |
+| `.pf-u-flex-wrap{-on-[breakpoint]}`                     | `*` |  sets flex-wrap: wrap |
+| `.pf-u-flex-nowrap{-on-[breakpoint]}`                   | `*` |  sets flex-wrap: nowrap |
+| `.pf-u-flex-wrap-reverse{-on-[breakpoint]}`             | `*` |  sets flex-wrap: wrap-reverse |

package/docs/utilities/Float/examples/Float.md

@@ -1,6 +1,6 @@
 ---
 id: Float
-section: utilities
+section: utility-classes
 ---import './Float.css'
 
 ## Examples
@@ -22,7 +22,7 @@ section: utilities
 
 ### Usage
 
-| Class                                 | Applied to | Outcome             |
-| ------------------------------------- | ---------- | ------------------- |
-| `.pf-u-float-left{-on-[breakpoint]}`  | `*`        | Float element left  |
-| `.pf-u-float-right{-on-[breakpoint]}` | `*`        | Float element right |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-float-left{-on-[breakpoint]}` | `*` |  Float element left |
+| `.pf-u-float-right{-on-[breakpoint]}` | `*` |  Float element right |

package/docs/utilities/Sizing/examples/Sizing.md

@@ -1,6 +1,6 @@
 ---
 id: Sizing
-section: utilities
+section: utility-classes
 ---import './Sizing.css'
 
 ## Examples
@@ -22,17 +22,17 @@ section: utilities
 
 [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-u-w-initial-on-lg**
 
-| Class                               | Applied to | Outcome                         |
-| ----------------------------------- | ---------- | ------------------------------- |
-| `.pf-u-w-initial{-on-[breakpoint]}` | `*`        | Sets width: initial (auto)      |
-| `.pf-u-w-inherit{-on-[breakpoint]}` | `*`        | Sets width: inherit             |
-| `.pf-u-w-0{-on-[breakpoint]}`       | `*`        | Sets width: 0%                  |
-| `.pf-u-w-25{-on-[breakpoint]}`      | `*`        | Sets width: 25%                 |
-| `.pf-u-w-33{-on-[breakpoint]}`      | `*`        | Sets width: calc(100% / 3)      |
-| `.pf-u-w-50{-on-[breakpoint]}`      | `*`        | Sets width: 50%                 |
-| `.pf-u-w-66{-on-[breakpoint]}`      | `*`        | Sets width: calc(100% / 3 \* 2) |
-| `.pf-u-w-75{-on-[breakpoint]}`      | `*`        | Sets width: 75%                 |
-| `.pf-u-w-100{-on-[breakpoint]}`     | `*`        | Sets width: 100%                |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-w-initial{-on-[breakpoint]}` | `*` | Sets width: initial (auto) |
+| `.pf-u-w-inherit{-on-[breakpoint]}` | `*` | Sets width: inherit |
+| `.pf-u-w-0{-on-[breakpoint]}`  | `*` | Sets width: 0% |
+| `.pf-u-w-25{-on-[breakpoint]}` | `*` | Sets width: 25% |
+| `.pf-u-w-33{-on-[breakpoint]}` | `*` | Sets width: calc(100% / 3) |
+| `.pf-u-w-50{-on-[breakpoint]}` | `*` | Sets width: 50% |
+| `.pf-u-w-66{-on-[breakpoint]}` | `*` | Sets width: calc(100% / 3 \* 2) |
+| `.pf-u-w-75{-on-[breakpoint]}` | `*` | Sets width: 75% |
+| `.pf-u-w-100{-on-[breakpoint]}` | `*` | Sets width: 100% |
 
 ### Width viewport units
 
@@ -50,14 +50,14 @@ section: utilities
 
 [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-w-25vw-on-lg**
 
-| Class                             | Applied to | Outcome                          |
-| --------------------------------- | ---------- | -------------------------------- |
-| `.pf-u-w-25vw{-on-[breakpoint]}`  | `*`        | Sets width: 25vw                 |
-| `.pf-u-w-33vw{-on-[breakpoint]}`  | `*`        | Sets width: calc(100vw / 3)      |
-| `.pf-u-w-50vw{-on-[breakpoint]}`  | `*`        | Sets width: 50vw                 |
-| `.pf-u-w-66vw{-on-[breakpoint]}`  | `*`        | Sets width: calc(100vw / 3 \* 2) |
-| `.pf-u-w-75vw{-on-[breakpoint]}`  | `*`        | Sets width: 75vw                 |
-| `.pf-u-w-100vw{-on-[breakpoint]}` | `*`        | Sets width: 100vw                |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-w-25vw{-on-[breakpoint]}` | `*` | Sets width: 25vw |
+| `.pf-u-w-33vw{-on-[breakpoint]}` | `*` | Sets width: calc(100vw / 3) |
+| `.pf-u-w-50vw{-on-[breakpoint]}` | `*` | Sets width: 50vw |
+| `.pf-u-w-66vw{-on-[breakpoint]}` | `*` | Sets width: calc(100vw / 3 \* 2) |
+| `.pf-u-w-75vw{-on-[breakpoint]}` | `*` | Sets width: 75vw |
+| `.pf-u-w-100vw{-on-[breakpoint]}` | `*` | Sets width: 100vw |
 
 ### Height base and percentage units
 
@@ -90,17 +90,17 @@ section: utilities
 
 [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-h-initial-on-lg**
 
-| Class                               | Applied to | Outcome                          |
-| ----------------------------------- | ---------- | -------------------------------- |
-| `.pf-u-h-initial{-on-[breakpoint]}` | `*`        | Sets height: initial (auto)      |
-| `.pf-u-h-inherit{-on-[breakpoint]}` | `*`        | Sets height: inherit             |
-| `.pf-u-h-0{-on-[breakpoint]}`       | `*`        | Sets height: 0%                  |
-| `.pf-u-h-25{-on-[breakpoint]}`      | `*`        | Sets height: 25%                 |
-| `.pf-u-h-33{-on-[breakpoint]}`      | `*`        | Sets height: calc(100% / 3)      |
-| `.pf-u-h-50{-on-[breakpoint]}`      | `*`        | Sets height: 50%                 |
-| `.pf-u-h-66{-on-[breakpoint]}`      | `*`        | Sets height: calc(100% / 3 \* 2) |
-| `.pf-u-h-75{-on-[breakpoint]}`      | `*`        | Sets height: 75%                 |
-| `.pf-u-h-100{-on-[breakpoint]}`     | `*`        | Sets height: 100%                |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-h-initial{-on-[breakpoint]}` | `*` | Sets height: initial (auto) |
+| `.pf-u-h-inherit{-on-[breakpoint]}` | `*` | Sets height: inherit |
+| `.pf-u-h-0{-on-[breakpoint]}` | `*` | Sets height: 0% |
+| `.pf-u-h-25{-on-[breakpoint]}`| `*` | Sets height: 25% |
+| `.pf-u-h-33{-on-[breakpoint]}`| `*` | Sets height: calc(100% / 3) |
+| `.pf-u-h-50{-on-[breakpoint]}`| `*` | Sets height: 50% |
+| `.pf-u-h-66{-on-[breakpoint]}`| `*` | Sets height: calc(100% / 3 \* 2) |
+| `.pf-u-h-75{-on-[breakpoint]}`| `*` | Sets height: 75% |
+| `.pf-u-h-100{-on-[breakpoint]}` | `*` | Sets height: 100% |
 
 ### Height viewport units
 
@@ -130,14 +130,14 @@ section: utilities
 
 [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example .pf-u-h-25vh-on-lg**
 
-| Class                             | Applied to | Outcome                           |
-| --------------------------------- | ---------- | --------------------------------- |
-| `.pf-u-h-25vh{-on-[breakpoint]}`  | `*`        | Sets height: 25vh                 |
-| `.pf-u-h-33vh{-on-[breakpoint]}`  | `*`        | Sets height: calc(100vh / 3)      |
-| `.pf-u-h-50vh{-on-[breakpoint]}`  | `*`        | Sets height: 50vh                 |
-| `.pf-u-h-66vh{-on-[breakpoint]}`  | `*`        | Sets height: calc(100vh / 3 \* 2) |
-| `.pf-u-h-75vh{-on-[breakpoint]}`  | `*`        | Sets height: 75vh                 |
-| `.pf-u-h-100vh{-on-[breakpoint]}` | `*`        | Sets height: 100vh                |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-h-25vh{-on-[breakpoint]}` | `*` | Sets height: 25vh |
+| `.pf-u-h-33vh{-on-[breakpoint]}` | `*` | Sets height: calc(100vh / 3) |
+| `.pf-u-h-50vh{-on-[breakpoint]}` | `*` | Sets height: 50vh |
+| `.pf-u-h-66vh{-on-[breakpoint]}` | `*` | Sets height: calc(100vh / 3 \* 2) |
+| `.pf-u-h-75vh{-on-[breakpoint]}` | `*` | Sets height: 75vh |
+| `.pf-u-h-100vh{-on-[breakpoint]}` | `*` | Sets height: 100vh |
 
 ### Min width
 
@@ -181,15 +181,15 @@ section: utilities
 
 ### Usage
 
-| Class             | Applied to | Outcome                                                              |
-| ----------------- | ---------- | -------------------------------------------------------------------- |
-| `.pf-u-min-width` | `*`        | Sets min-width: `var(--pf-u-min-width--MinWidth{-on-[breakpoint]})`. |
-| `.pf-u-max-width` | `*`        | Sets min-width: `var(--pf-u-max-width--MaxWidth{-on-[breakpoint]})`. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-min-width` | `*` | Sets min-width: `var(--pf-u-min-width--MinWidth{-on-[breakpoint]})`. |
+| `.pf-u-max-width` | `*` | Sets min-width: `var(--pf-u-max-width--MaxWidth{-on-[breakpoint]})`. |
 
 [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-u-min-width--MinWidth-on-lg**
 
-| Custom property                                         | Applied to        | Outcome                                 |
-| ------------------------------------------------------- | ----------------- | --------------------------------------- |
+| Custom property | Applied to | Outcome |
+| -- | -- | -- |
 | `--pf-u-min-width--MinWidth{-on-[breakpoint]}: {width}` | `.pf-u-min-width` | Modifies the min width custom property. |
 | `--pf-u-max-width--MaxWidth{-on-[breakpoint]}: {width}` | `.pf-u-max-width` | Modifies the max width custom property. |
 
@@ -235,14 +235,14 @@ section: utilities
 
 ### Usage
 
-| Class              | Applied to | Outcome                                                                 |
-| ------------------ | ---------- | ----------------------------------------------------------------------- |
-| `.pf-u-min-height` | `*`        | Sets min-height: `var(--pf-u-min-height--MinHeight{-on-[breakpoint]})`. |
-| `.pf-u-max-height` | `*`        | Sets max-height: `var(--pf-u-max-height--MaxHeight{-on-[breakpoint]})`. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-min-height` | `*` | Sets min-height: `var(--pf-u-min-height--MinHeight{-on-[breakpoint]})`. |
+| `.pf-u-max-height` | `*` | Sets max-height: `var(--pf-u-max-height--MaxHeight{-on-[breakpoint]})`. |
 
 [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, -on-xl. **Example --pf-u-min-height--MinHeight-on-lg**
 
-| Custom property                                            | Applied to         | Outcome                                  |
-| ---------------------------------------------------------- | ------------------ | ---------------------------------------- |
+| Custom property | Applied to | Outcome |
+| -- | -- | -- |
 | `--pf-u-min-height--MinHeight{-on-[breakpoint]}: {height}` | `.pf-u-min-height` | Modifies the min height custom property. |
 | `--pf-u-max-height--MaxHeight{-on-[breakpoint]}: {height}` | `.pf-u-max-height` | Modifies the max height custom property. |

package/docs/utilities/Spacing/examples/Spacing.md

@@ -1,6 +1,6 @@
 ---
 id: Spacing
-section: utilities
+section: utility-classes
 ---import './Spacing.css'
 
 ## Examples
@@ -101,46 +101,46 @@ section: utilities
 
 ### Margin properties
 
-| Abbreviation | Property                   |
-| ------------ | -------------------------- |
-| `m`          | margin                     |
-| `mt`         | margin-top                 |
-| `mr`         | margin-right               |
-| `mb`         | margin-bottom              |
-| `ml`         | margin-left                |
-| `mx`         | margin-left & margin-right |
-| `my`         | margin-top & margin-bottom |
+| Abbreviation | Property |
+| -- | -- |
+| `m` |  margin |
+| `mt` | margin-top |
+| `mr` | margin-right |
+| `mb` | margin-bottom |
+| `ml` | margin-left |
+| `mx` | margin-left & margin-right |
+| `my` | margin-top & margin-bottom |
 
 ### Padding properties
 
-| Abbreviation | Property                     |
-| ------------ | ---------------------------- |
-| `p`          | padding                      |
-| `pt`         | padding-top                  |
-| `pr`         | padding-right                |
-| `pb`         | padding-bottom               |
-| `pl`         | padding-left                 |
-| `px`         | padding-left & padding-right |
-| `py`         | padding-top & padding-bottom |
+| Abbreviation | Property |
+| -- | -- |
+| `p` |  padding |
+| `pt` | padding-top |
+| `pr` | padding-right |
+| `pb` | padding-bottom |
+| `pl` | padding-left |
+| `px` | padding-left & padding-right |
+| `py` | padding-top & padding-bottom |
 
 ### Size values
 
-| Abbreviation | Property                      |
-| ------------ | ----------------------------- |
-| `auto`       | auto                          |
-| `0`          | 0                             |
-| `xs`         | var(--pf-global--spacer--xs)  |
-| `sm`         | var(--pf-global--spacer--sm)  |
-| `md`         | var(--pf-global--spacer--md)  |
-| `lg`         | var(--pf-global--spacer--lg)  |
-| `xl`         | var(--pf-global--spacer--xl)  |
-| `2xl`        | var(--pf-global--spacer--2xl) |
-| `3xl`        | var(--pf-global--spacer--3xl) |
-| `4xl`        | var(--pf-global--spacer--4xl) |
+| Abbreviation | Property |
+| -- | -- |
+| `auto` |  auto |
+| `0` | 0 |
+| `xs` | var(--pf-global--spacer--xs) |
+| `sm` | var(--pf-global--spacer--sm) |
+| `md` | var(--pf-global--spacer--md) |
+| `lg` | var(--pf-global--spacer--lg) |
+| `xl` | var(--pf-global--spacer--xl) |
+| `2xl` | var(--pf-global--spacer--2xl) |
+| `3xl` | var(--pf-global--spacer--3xl) |
+| `4xl` | var(--pf-global--spacer--4xl) |
 
 ### Usage
 
-| Class                                                        | Applied to | Outcome                                                                                           |
-| ------------------------------------------------------------ | ---------- | ------------------------------------------------------------------------------------------------- |
-| `.pf-u-{m, mt, mr, mb, ml, mx, my}-{size}{-on-[breakpoint]}` | `*`        | Sets margin top, right, bottom, left, margin-left & right, margin-top & bottom to spacer value    |
-| `.pf-u-{p, pt, pr, pb, pl, px, py}-{size}{-on-[breakpoint]}` | `*`        | Sets padding top, right, bottom, left, padding-left & right, padding-top & bottom to spacer value |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-u-{m, mt, mr, mb, ml, mx, my}-{size}{-on-[breakpoint]}`  | `*` |  Sets margin top, right, bottom, left, margin-left & right, margin-top & bottom to spacer value |
+| `.pf-u-{p, pt, pr, pb, pl, px, py}-{size}{-on-[breakpoint]}`  | `*` |  Sets padding top, right, bottom, left, padding-left & right, padding-top & bottom to spacer value |

package/docs/utilities/Text/examples/Text.md

@@ -1,6 +1,6 @@
 ---
 id: Text
-section: utilities
+section: utility-classes
 ---import './Text.css'
 
 ## Examples
@@ -87,9 +87,9 @@ These colors are best used with the ["inverse" background colors](/utilities/bac
 ### Status and state text colors
 
 ```html
-<div class="pf-u-default-color-100">Font color default 100</div>
-<div class="pf-u-default-color-200">Font color default 200</div>
-<div class="pf-u-default-color-300">Font color default 300</div>
+<div class="pf-u-custom-color-100">Font color custom 100</div>
+<div class="pf-u-custom-color-200">Font color custom 200</div>
+<div class="pf-u-custom-color-300">Font color custom 300</div>
 <div class="pf-u-success-color-100">Font color success 100</div>
 <div class="pf-u-success-color-200">Font color success 200</div>
 <div class="pf-u-info-color-100">Font color info 100</div>
@@ -169,30 +169,30 @@ Care should be taken especially when applying text colors, as this can have a ne
 
 ### Usage
 
-| Class                                                                                                                                 | Applied to | Outcome                                                                                                                                |
-| ------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}`                                                               | `*`        | Sets font-size to xs, sm, md, lg, xl, 2xl, 3xl, or 4xl                                                                                 |
-| `.pf-u-font-family-{sans-serif, heading-sans-serif, monospace, redhatVF-sans-serif, redhatVF-heading-sans-serif, redhatVF-monospace}` | `*`        | Sets font-family to sans-serif, heading-sans-serif, or monospace; or Red Hat virtual font sans-serif, heading sans-serif, or monospace |
-| `.pf-u-font-weight-{light, normal, bold}{-on-[breakpoint]}`                                                                           | `*`        | Sets font-size to light, normal, or bold                                                                                               |
-| `.pf-u-color-{100, 200, 300, 400}{-on-[breakpoint]}`                                                                                  | `*`        | Sets font-color to color 100, 200, 300, or 400                                                                                         |
-| `.pf-u-active-color-{100, 400}{-on-[breakpoint]}`                                                                                     | `*`        | Sets font-color to active color 100 or 400                                                                                             |
-| `.pf-u-primary-color-100{-on-[breakpoint]}`                                                                                           | `*`        | Sets font-color to primary color 100                                                                                                   |
-| `.pf-u-color-light-{100, 200}{-on-[breakpoint]}`                                                                                      | `*`        | Sets font-color to light color 100 or 200                                                                                              |
-| `.pf-u-link-color{-on-[breakpoint]}`                                                                                                  | `*`        | Sets font-color to link color                                                                                                          |
-| `.pf-u-link-color-hover{-on-[breakpoint]}`                                                                                            | `*`        | Sets font-color to hover link color                                                                                                    |
-| `.pf-u-link-color-light{-on-[breakpoint]}`                                                                                            | `*`        | Sets font-color to light link color                                                                                                    |
-| `.pf-u-link-color-light-hover{-on-[breakpoint]}`                                                                                      | `*`        | Sets font-color to light hover link color                                                                                              |
-| `.pf-u-link-color-dark{-on-[breakpoint]}`                                                                                             | `*`        | Sets font-color to dark link color                                                                                                     |
-| `.pf-u-link-color-dark-hover{-on-[breakpoint]}`                                                                                       | `*`        | Sets font-color to dark hover link color                                                                                               |
-| `.pf-u-link-color-visited{-on-[breakpoint]}`                                                                                          | `*`        | Sets font-color to visited link color                                                                                                  |
-| `.pf-u-default-color-{100, 200, 300}{-on-[breakpoint]}`                                                                               | `*`        | Sets font-color to default color 100, 200, or 300                                                                                      |
-| `.pf-u-success-color-{100, 200}{-on-[breakpoint]}`                                                                                    | `*`        | Sets font-color to success color 100 or 200                                                                                            |
-| `.pf-u-info-color-{100, 200}{-on-[breakpoint]}`                                                                                       | `*`        | Sets font-color to info color 100 or 200                                                                                               |
-| `.pf-u-warning-color-{100, 200}{-on-[breakpoint]}`                                                                                    | `*`        | Sets font-color to warning color 100 or 200                                                                                            |
-| `.pf-u-danger-color-{100, 200, 300}{-on-[breakpoint]}`                                                                                | `*`        | Sets font-color to danger color 100, 200, or 300                                                                                       |
-| `.pf-u-disabled-color-{100, 200}{-on-[breakpoint]}`                                                                                   | `*`        | Sets font-color to disabled color 100 or 200                                                                                           |
-| `.pf-u-icon-color-{light, dark}{-on-[breakpoint]}`                                                                                    | `*`        | Sets font-color to light or dark icon color                                                                                            |
-| `.pf-u-text-break-word{-on-[breakpoint]}`                                                                                             | `*`        | Sets word-break to break-word                                                                                                          |
-| `.pf-u-text-nowrap{-on-[breakpoint]}`                                                                                                 | `*`        | Sets white-space to nowrap                                                                                                             |
-| `.pf-u-text-wrap{-on-[breakpoint]}`                                                                                                   | `*`        | Sets white-space to normal                                                                                                             |
-| `.pf-u-text-truncate`                                                                                                                 | `*`        | Truncates text field                                                                                                                   |
+| Class                                                                  | Applied to | Outcome                                             |
+| ---------------------------------------------------------------------- | ---------- | --------------------------------------------------- |
+| `.pf-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}`| `*`        | Sets font-size to xs, sm, md, lg, xl, 2xl, 3xl, or 4xl |
+| `.pf-u-font-family-{sans-serif, heading-sans-serif, monospace, redhatVF-sans-serif, redhatVF-heading-sans-serif, redhatVF-monospace}`            | `*`        | Sets font-family to sans-serif, heading-sans-serif, or monospace; or Red Hat virtual font sans-serif, heading sans-serif, or monospace            |
+| `.pf-u-font-weight-{light, normal, bold}{-on-[breakpoint]}`            | `*`        | Sets font-size to light, normal, or bold            |
+| `.pf-u-color-{100, 200, 300, 400}{-on-[breakpoint]}`                   | `*`        | Sets font-color to color 100, 200, 300, or 400      |
+| `.pf-u-active-color-{100, 400}{-on-[breakpoint]}`                      | `*`        | Sets font-color to active color 100 or 400          |
+| `.pf-u-primary-color-100{-on-[breakpoint]}`                            | `*`        | Sets font-color to primary color 100                |
+| `.pf-u-color-light-{100, 200}{-on-[breakpoint]}`                       | `*`        | Sets font-color to light color 100 or 200           |
+| `.pf-u-link-color{-on-[breakpoint]}`                                   | `*`        | Sets font-color to link color                       |
+| `.pf-u-link-color-hover{-on-[breakpoint]}`                             | `*`        | Sets font-color to hover link color                 |
+| `.pf-u-link-color-light{-on-[breakpoint]}`                             | `*`        | Sets font-color to light link color                 |
+| `.pf-u-link-color-light-hover{-on-[breakpoint]}`                       | `*`        | Sets font-color to light hover link color           |
+| `.pf-u-link-color-dark{-on-[breakpoint]}`                              | `*`        | Sets font-color to dark link color                  |
+| `.pf-u-link-color-dark-hover{-on-[breakpoint]}`                        | `*`        | Sets font-color to dark hover link color            |
+| `.pf-u-link-color-visited{-on-[breakpoint]}`                           | `*`        | Sets font-color to visited link color               |
+| `.pf-u-custom-color-{100, 200, 300}{-on-[breakpoint]}`                 | `*`        | Sets font-color to custom color 100, 200, or 300   |
+| `.pf-u-success-color-{100, 200}{-on-[breakpoint]}`                     | `*`        | Sets font-color to success color 100 or 200         |
+| `.pf-u-info-color-{100, 200}{-on-[breakpoint]}`                        | `*`        | Sets font-color to info color 100 or 200            |
+| `.pf-u-warning-color-{100, 200}{-on-[breakpoint]}`                     | `*`        | Sets font-color to warning color 100 or 200         |
+| `.pf-u-danger-color-{100, 200, 300}{-on-[breakpoint]}`                 | `*`        | Sets font-color to danger color 100, 200, or 300    |
+| `.pf-u-disabled-color-{100, 200}{-on-[breakpoint]}`                    | `*`        | Sets font-color to disabled color 100 or 200        |
+| `.pf-u-icon-color-{light, dark}{-on-[breakpoint]}`                     | `*`        | Sets font-color to light or dark icon color         |
+| `.pf-u-text-break-word{-on-[breakpoint]}`                              | `*`        | Sets word-break to break-word                       |
+| `.pf-u-text-nowrap{-on-[breakpoint]}`                                  | `*`        | Sets white-space to nowrap                          |
+| `.pf-u-text-wrap{-on-[breakpoint]}`                                    | `*`        | Sets white-space to normal                          |
+| `.pf-u-text-truncate`                                                  | `*`        | Truncates text field                                |

package/icons/{pf-icons.json → pf-icons.mjs}

@@ -1,4 +1,4 @@
-{
+export const pfIcons = {
   "add-circle-o": { "width": 1024, "height": 1024, "svgPathData": "M576,303 C576,294.715729 569.284271,288 561,288 L463,288 C454.715729,288 448,294.715729 448,303 L448,448 L303,448 C294.715729,448 288,454.715729 288,463 L288,561 C288,569.284271 294.715729,576 303,576 L448,576 L448,720.9 C447.983373,729.207373 454.6927,735.961429 463,736 L561,736 C569.3073,735.961429 576.016627,729.207373 576,720.9 L576,576 L721,576 C724.969024,576.026638 728.784638,574.468589 731.600595,571.671405 C734.416553,568.87422 736.000031,565.069113 736.000031,561.1 L736.000031,463.1 C736.016627,454.792627 729.3073,448.038571 721,448 L576,448 L576,303 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z" },
   "ansible-tower": { "width": 1024, "height": 1024, "svgPathData": "M512,0 C229.26,0 0,229.26 0,512 C0,794.74 229.26,1024 512,1024 C794.74,1024 1024,794.74 1024,512 C1024,229.26 794.74,0 512,0 Z M759.09,730.29 C759.09,751.77 741.71,766.86 721.83,766.86 C711.54,766.86 704,762.97 693.49,754.29 L429,541 L340.57,762.74 L264.23,762.74 L487.77,224.74 C493.49,210.79 506.06,203.25 520.23,203.25 C534.4,203.25 546.06,210.56 551.77,224.74 L755.89,715.2 C758.4,721.14 759.31,726.63 759.09,730.29 Z M520.69,312.69 L653.26,640 L453.26,482.51 L520.69,312.69 Z" },
   "applications": { "width": 1024, "height": 1024, "svgPathData": "M951.9,320 L832,320 L832,135 C832,94.9 800.7,64 760.5,64 L71.1,64 C30.9,64.1 0,94.9 0,135 L0,696.9 C0,737.1 30.9,768 71.1,768 L192,768 L192,952.2 C192,992.5 223.4,1024 263.7,1024 L952,1024 C992.3,1024 1024,992.5 1024,952.2 L1024,391 C1023.9,350.9 992.1,320 951.9,320 Z M832,384 L896,384 L896,448 L832,448 L832,384 Z M640,128 L704,128 L704,192 L640,192 L640,128 Z M64,704 L64,256 L768,256 L768,704 L64,704 Z M960,960 L256,960 L256,768 L760.5,768 C800.8,768 832,736.5 832,696.3 L832,576 L960,576 L960,960 Z" },
@@ -21,6 +21,7 @@
   "container-node": { "width": 1024, "height": 1024, "svgPathData": "M22.3,576.00143 L1001.8,576.00143 C1013.2,576.00143 1020.3,570.90143 1023.1,560.50143 C1025.6,550.20143 1022.9,537.30143 1014.4,522.10143 C1014.4,522.10143 874.3,232.50143 863.8,211.00143 C856,191.90143 841.4,192.000713 841.4,192.000713 L185.6,192.000713 C185.6,192.000713 169,191.60143 161.8,209.70143 C151.3,232.30143 9.7,522.00143 9.7,522.00143 C1.2,537.10143 -1.7,550.00143 1,560.40143 C3.7,570.80143 10.8,576.00143 22.3,576.00143 Z M1013.1,650.90143 C1005.8,643.60143 997.2,640.00143 987.4,640.00143 L36.6,640.00143 C26.6,640.00143 18.2,643.60143 10.9,650.90143 C3.6,658.20143 0,666.80143 0,676.60143 L0,795.50143 C0,805.50143 3.6,813.90143 10.7,821.20143 C18,828.40143 26.4,832.00143 36.4,832.00143 L987.4,832.00143 C997.4,832.00143 1005.8,828.40143 1013.1,821.10143 C1020.4,813.80143 1024,805.40143 1024,795.40143 L1024,676.60143 C1024,666.60143 1020.4,658.20143 1013.1,650.90143 Z M128,768.00143 L64,768.00143 L64,704.00143 L128,704.00143 L128,768.00143 Z M256,768.00143 L192,768.00143 L192,704.00143 L256,704.00143 L256,768.00143 Z M384,768.00143 L320,768.00143 L320,704.00143 L384,704.00143 L384,768.00143 Z M512,768.00143 L448,768.00143 L448,704.00143 L512,704.00143 L512,768.00143 Z M960,768.00143 L896,768.00143 L896,704.00143 L960,704.00143 L960,768.00143 Z" },
   "cpu": { "width": 832, "height": 1024, "svgPathData": "M16,704 L112,704 C120.836556,704 128,711.163444 128,720 L128,752 C128,760.836556 120.836556,768 112,768 L16,768 C7.163444,768 0,760.836556 0,752 L0,720 C0,711.163444 7.163444,704 16,704 M16,576 L112,576 C120.836556,576 128,583.163444 128,592 L128,624 C128,632.836556 120.836556,640 112,640 L16,640 C7.163444,640 0,632.836556 0,624 L0,592 C0,583.163444 7.163444,576 16,576 M16,448 L112,448 C120.836556,448 128,455.163444 128,464 L128,496 C128,504.836556 120.836556,512 112,512 L16,512 C7.163444,512 0,504.836556 0,496 L0,464 C0,455.163444 7.163444,448 16,448 M16,320 L112,320 C120.836556,320 128,327.163444 128,336 L128,368 C128,376.836556 120.836556,384 112,384 L16,384 C7.163444,384 0,376.836556 0,368 L0,336 C0,327.163444 7.163444,320 16,320 M720,704 L816,704 C824.836556,704 832,711.163444 832,720 L832,752 C832,760.836556 824.836556,768 816,768 L720,768 C711.163444,768 704,760.836556 704,752 L704,720 C704,711.163444 711.163444,704 720,704 M720,576 L816,576 C824.836556,576 832,583.163444 832,592 L832,624 C832,632.836556 824.836556,640 816,640 L720,640 C711.163444,640 704,632.836556 704,624 L704,592 C704,583.163444 711.163444,576 720,576 M720,448 L816,448 C824.836556,448 832,455.163444 832,464 L832,496 C832,504.836556 824.836556,512 816,512 L720,512 C711.163444,512 704,504.836556 704,496 L704,464 C704,455.163444 711.163444,448 720,448 M720,320 L816,320 C824.836556,320 832,327.163444 832,336 L832,368 C832,376.836556 824.836556,384 816,384 L720,384 C711.163444,384 704,376.836556 704,368 L704,336 C704,327.163444 711.163444,320 720,320 M592,832 L624,832 C632.836556,832 640,839.163444 640,848 L640,944 C640,952.836556 632.836556,960 624,960 L592,960 C583.163444,960 576,952.836556 576,944 L576,848 C576,839.163444 583.163444,832 592,832 M464,832 L496,832 C504.836556,832 512,839.163444 512,848 L512,944 C512,952.836556 504.836556,960 496,960 L464,960 C455.163444,960 448,952.836556 448,944 L448,848 C448,839.163444 455.163444,832 464,832 M336,832 L368,832 C376.836556,832 384,839.163444 384,848 L384,944 C384,952.836556 376.836556,960 368,960 L336,960 C327.163444,960 320,952.836556 320,944 L320,848 C320,839.163444 327.163444,832 336,832 M208,832 L240,832 C248.836556,832 256,839.163444 256,848 L256,944 C256,952.836556 248.836556,960 240,960 L208,960 C199.163444,960 192,952.836556 192,944 L192,848 C192,839.163444 199.163444,832 208,832 M592,128 L624,128 C632.836556,128 640,135.163444 640,144 L640,240 C640,248.836556 632.836556,256 624,256 L592,256 C583.163444,256 576,248.836556 576,240 L576,144 C576,135.163444 583.163444,128 592,128 M464,128 L496,128 C504.836556,128 512,135.163444 512,144 L512,240 C512,248.836556 504.836556,256 496,256 L464,256 C455.163444,256 448,248.836556 448,240 L448,144 C448,135.163444 455.163444,128 464,128 M336,128 L368,128 C376.836556,128 384,135.163444 384,144 L384,240 C384,248.836556 376.836556,256 368,256 L336,256 C327.163444,256 320,248.836556 320,240 L320,144 C320,135.163444 327.163444,128 336,128 M192,240 L192,144 C192,135.163444 199.163444,128 208,128 L240,128 C248.836556,128 256,135.163444 256,144 L256,240 C256,248.836556 248.836556,256 240,256 L208,256 C199.163444,256 192,248.836556 192,240 M639.9,332.4 L640,754.4 C640,761.248331 634.448331,766.8 627.6,766.8 L204.5,768.000017 C197.630809,768.011149 192.044024,762.469059 192,755.6 L192,332.4 C192,329.111316 193.306425,325.957327 195.631876,323.631876 C197.957327,321.306425 201.111316,319.999742 204.4,319.999742 L627.4,319.999742 C630.704365,319.978711 633.880989,321.275093 636.226941,323.602277 C638.572893,325.929461 639.894747,329.095571 639.9,332.4" },
   "critical-risk": { "width": 925, "height": 1024, "svgPathData": "M897.86597,252.24865 L491.105712,7.96742801 C473.40731,-2.65897781 451.300057,-2.65597516 433.611654,7.97743687 L27.1213875,252.245648 C10.3059556,262.353595 0.0163032058,280.549701 0.0163032058,300.182078 L0.0163032058,967.971163 C-1.04266102,1010.81008 49.7156241,1038.89994 85.4314175,1015.41816 C85.4304175,1015.42016 432.807682,798.630273 432.807682,798.630273 C450.891071,787.348287 473.816296,787.342282 491.906685,798.624268 L839.584939,1015.4612 C875.297732,1039.03406 926.031018,1010.73602 924.984054,968.003192 C924.985054,968.005193 924.985054,300.192087 924.985054,300.192087 C924.985054,280.552703 914.688401,262.353595 897.86597,252.24865" },
+  "data-processor": { "width": 1024, "height": 1024, "svgPathData": "M879.0474,64.5 L1024.3914,224.5 L879.0474,384.5 L832.4324,341.094 L909.276499,256.5 L180.1341,256.5 C148.0811,257.327 118.0301,271.052 95.4831,295.334 C72.8821,319.674 60.4361,351.806 60.4361,385.811 L60.4361,386.471 C60.4361,420.381 72.7991,452.159 95.2501,475.95 C117.7211,499.761 147.6961,512.5 179.6531,512.5 L323.373499,512.5 L512.4992,367.3227 L701.624499,512.5 L845.5586,512.5 C892.8806,512.5 937.36031,531.51296 970.971417,566.572676 L971.9866,567.64 C1005.8506,603.526 1024.4996,651.43 1024.4996,702.529 L1024.4996,703.189 C1024.4996,754.188 1005.8886,802.318 972.0946,838.711 C938.5136,874.875 893.7406,895.395 846.0236,896.492 L845.6746,896.5 L31.2476,896.5 C14.7556,896.466 0.4686,881.3 0.499549646,863.652 C0.5316,846.026 14.7836,832.5 31.2476,832.5 L845.0776,832.5 C877.1296,831.673 907.1816,817.948 929.7276,793.666 C952.3286,769.326 964.7756,737.194 964.7756,703.189 L964.7756,702.529 C964.7756,668.619 952.4116,636.841 929.9606,613.05 C907.4896,589.239 877.5156,576.5 845.5586,576.5 L703.333499,576.5 L512.4992,720.9647 L321.665499,576.5 L179.6531,576.5 C132.33011,576.5 87.8513702,557.48704 54.240283,522.427324 L53.2251,521.36 C19.3611,485.474 0.7111,437.57 0.7111,386.471 L0.7111,385.811 C0.7111,334.812 19.3221,286.682 53.1161,250.289 C86.6971,214.125 131.4701,193.605 179.1871,192.508 L179.5371,192.5 L909.276499,192.5 L832.4324,107.906 L879.0474,64.5 Z M512.4992,450.3267 L389.4332,544.7967 L512.4992,637.9607 L635.5662,544.7967 L512.4992,450.3267 Z" },
   "data-sink": { "width": 896, "height": 1024, "svgPathData": "M430.605,63 L576,223 L430.605,383 L384,339.574 L460.854,255 L179.538,255 C147.415,255.821 117.345,269.54 94.84,293.692 C72.297,317.884 59.882,349.916 59.882,383.888 L59.882,384.548 C59.882,418.481 72.245,450.28 94.695,474.088 C117.168,497.922 147.148,511 179.11,511 L717.06,511 C815.347,511 895.619,597.063 895.999359,702.789 C896.182,754.034 877.68,802.261 843.9,838.586 C810.069,874.964 765.02,895 717.061,895 L0,895 L0,831 L717.024,831 C717.033,831 717.043,831.023 717.053,831.023 C749.033,831.023 779.056,817.672 801.602,793.428 C824.092,769.244 836.41,737.142 836.288,703.035 C836.035,632.45 782.549,575 717.06,575 L179.11,575 C131.314,575 86.417,555.327 52.69,519.559 C18.822,483.642 0.171,435.694 0.171,384.548 L0.171,383.888 C0.171,332.847 18.785,284.761 52.584,248.489 C86.102,212.518 130.841,192.105 178.562,191 L460.854,191 L384,106.426 L430.605,63 Z M756,79 C833.196,79 896,141.804 896,219 C896,296.196 833.196,359 756,359 C678.804,359 616,296.196 616,219 C616,141.804 678.804,79 756,79 Z M756,143.013 C714.086,143.013 679.987,177.101 679.987,219 C679.987,260.9 714.086,294.987 756,294.987 C797.914,294.987 832.013,260.9 832.013,219 C832.013,177.101 797.914,143.013 756,143.013 Z" },
   "data-source": { "width": 896, "height": 1024, "svgPathData": "M750.6252,63 L896.0002,223 L750.6252,383 L704.0002,339.594 L780.807,255.06 L179.0074,254.909 L178.9774,254.909 C147.0174,254.909 117.0004,268.239 94.4554,292.446 C71.9454,316.615 59.6154,348.704 59.7374,382.802 C59.9914,453.334 113.4824,511 178.9784,511 L717.0204,511 C764.8314,511 809.7404,530.399 843.4754,566.14 C877.3464,602.026 896.0004,649.93 896.0004,701.029 L896.0004,701.689 C896.0004,752.688 877.3844,800.818 843.5834,837.211 C809.9954,873.375 765.2134,893.895 717.4864,894.992 L717.1364,895 L276.310151,895.001486 C261.798404,956.828303 206.189494,1003 140,1003 C62.804,1003 0,940.196 0,863 C0,785.804 62.804,723 140,723 C206.189852,723 261.799004,769.172196 276.310386,830.999515 L716.5394,831 C748.5984,830.173 778.6564,816.448 801.2074,792.166 C823.8134,767.826 836.2624,735.694 836.2624,701.689 L836.2624,701.029 C836.2624,667.119 823.8964,635.341 801.4404,611.55 C778.9654,587.739 748.9844,575 717.0204,575 L178.9784,575 C80.6694,575 0.0014,489 0.0014,383.047 C0.0014,332 18.3334,283.634 52.1394,247.337 C85.9744,211.008 131.0224,191 178.9774,191 L179.0224,191 L781.009,191.162 L704.0002,106.406 L750.6252,63 Z M140,787 C98.093,787 64,821.094 64,863 C64,904.906 98.093,939 140,939 C181.907,939 216,904.906 216,863 C216,821.094 181.907,787 140,787 Z" },
   "degraded": { "width": 1024, "height": 1024, "svgPathData": "M671.7,0 C703.8,0 734.6,1.1 763.9,4 C793.2,6.9 821.3,10.6 848.2,16.1 C872.57072,21.0125373 896.669847,27.1875213 920.4,34.6 C941.9,41.9 960.6,49.7 976.5,58.8 C991.9,67.9 1003.9,77.5 1011.6,87.4 C1019.3,97.3 1024,107.4 1024,117.5 L1024,265.4 C1024,276.2 1020.2,286.3 1012.5,296.4 C1004.8,306.3 992.8,315.9 977.4,325 C959.337595,334.451236 940.502821,342.346452 921.1,348.6 C897.436848,356.377909 873.326481,362.722743 848.9,367.6 C820.897405,372.974437 792.621855,376.813503 764.2,379.1 C759.8,379.5 755.4,379.8 750.9,380.1 C748.408787,375.948151 745.635606,371.972146 742.6,368.2 C730,351.9 712.6,337.4 689.6,323.8 L688.8,323.4 C670.3,312.7 648.2,303.2 621.4,294.1 L620.2,293.7 C594.308252,285.580645 568.004767,278.837874 541.4,273.5 C515,268.1 486.1,263.9 450.6,260.4 C420.6,257.4 388.3,256 351.9,256 C341.1,256 330.6,256.1 320.3,256.4 C320.042814,256.229635 319.807695,256.028104 319.6,255.8 L319.6,117.6 C319.6,107.5 323.7,97.4 331.7,87.5 C339.5,77.6 351.5,67.9 367.2,58.9 C382.6,49.9 401.2,41.7 422.6,34.7 C446.276709,27.1007865 470.38634,20.9231111 494.8,16.2 C521.9,10.9 550.5,6.9 580,4.1 C609.5,1.3 640,0 671.7,0 M1024,376.8 L1024,586.7 C1024,597.5 1020.2,607.6 1012.5,617.7 C1004.8,627.6 992.8,637.2 977.4,646.3 C959.337595,655.751236 940.502821,663.646452 921.1,669.9 C897.436848,677.677909 873.326481,684.022743 848.9,688.9 C822.14275,694.015209 795.140551,697.753462 768,700.1 L767.7,476.1 C794.940661,473.760163 822.043072,470.0219 848.9,464.9 C875.6,459.4 902.3,452.4 921.1,445.9 C939.9,439.4 961.5,430.7 977.3,422.3 C992.7,413.2 1004.7,403.6 1012.4,393.7 C1016.447,388.568447 1019.59184,382.786011 1021.7,376.6 C1022,375.5 1023.9,375.8 1024,376.8 M232.2,520.597935 C230.685589,520.579154 229.184592,520.886176 227.8,521.5 C226.72,522 225.7,522.57 224.7,523.15 L224.1,523.5 L223.4,523.9 L171.4,576.3 C170.030083,577.250162 168.955681,578.567171 168.3,580.1 C167.646697,581.718369 167.340097,583.455771 167.4,585.2 C167.379154,586.714411 167.686176,588.215408 168.3,589.6 C168.957066,590.956585 169.794664,592.218027 170.79,593.35 L171.1,593.7 L171.4,594 L282.4,704.4 L169.1,817.5 C167.730083,818.450162 166.655681,819.767171 166,821.3 C165.346697,822.918369 165.040097,824.655771 165.1,826.4 C165.079154,827.914411 165.386176,829.415408 166,830.8 C166.657066,832.156585 167.494664,833.418027 168.49,834.55 L168.8,834.9 L169.1,835.2 L221.1,887.4 C222.35498,888.705142 223.848625,889.757483 225.5,890.5 C227.118369,891.153303 228.855771,891.459903 230.6,891.4 C232.114411,891.420846 233.615408,891.113824 235,890.5 C236.347415,889.990824 237.52525,889.114377 238.4,887.97 L238.6,887.7 L238.8,887.4 L352.1,774.8 L465.3,887 C466.250162,888.369917 467.567171,889.444319 469.1,890.1 C470.478689,890.732085 471.983848,891.039958 473.5,891 C475.244839,891.068745 476.984084,890.76182 478.6,890.1 C479.956585,889.442934 481.218027,888.605336 482.35,887.61 L482.7,887.3 L483,887 L535,835.3 C536.305142,834.04502 537.357483,832.551375 538.1,830.9 C538.756858,829.636812 539.06739,828.222169 539,826.8 C539.068745,825.055161 538.76182,823.315916 538.1,821.7 C537.590824,820.352585 536.714377,819.17475 535.57,818.3 L535.3,818.1 L535,817.9 L421.8,704.8 L532.8,594.7 C534.105142,593.44502 535.157483,591.951375 535.9,590.3 C536.532085,588.921311 536.839958,587.416152 536.8,585.9 C536.868745,584.155161 536.56182,582.415916 535.9,580.8 C535.390824,579.452585 534.514377,578.27475 533.37,577.4 L533.1,577.2 L532.8,577 L481.4,524.4 C480.00074,523.482177 478.529234,522.679537 477,522 C475.381631,521.346697 473.644229,521.040097 471.9,521.1 C470.405861,521.103166 468.921356,521.339337 467.5,521.8 C466.140714,522.100301 464.928143,522.863903 464.07,523.96 L463.9,524.2 L463.7,524.4 L352.6,635.3 L241.1,523.9 C240.092509,522.704814 238.778981,521.806084 237.3,521.3 C235.645389,520.809136 233.925677,520.573098 232.2,520.597935 M351.9,320 C383.9,320 414.9,321.1 444.17,324 C473.44,326.9 501.56,330.6 528.45,336.1 C552.814192,341.012298 576.906673,347.18729 600.63,354.6 C622.12,361.9 640.82,369.7 656.71,378.8 C672.11,387.9 684.11,397.5 691.8,407.4 C699.26,416.92 703.74,426.64 703.99,436.4 L703.99,581.1 C702.99,589.9 698.79,598.2 692.39,606.6 C684.7,616.5 672.7,626.1 657.3,635.2 C639.238153,644.652423 620.403276,652.547682 601,658.8 C594.19,661.13 586.94,663.38 579.34,665.54 L577.71,666 L575.91,666.4 L575.91,764.4 C584.6,762 593,759.4 601,756.7 C620.389618,750.428205 639.21623,742.533606 657.28,733.1 C672.68,724 684.68,714.4 692.37,704.5 C696.417004,699.368447 699.561838,693.586011 701.67,687.4 C701.96,686.4 703.73,686.59 703.95,687.49 L703.95,687.6 L703.95,906.7 C703.95,917.5 700.15,927.6 692.45,937.7 C684.76,947.6 672.76,957.2 657.36,966.3 C639.304584,975.751378 620.476439,983.64662 601.08,989.9 C577.42368,997.678088 553.319957,1004.02293 528.9,1008.9 C500.904237,1014.27511 472.635307,1018.11419 444.22,1020.4 C415.13,1022.9 384.44,1024 352.22,1024 C320.53,1024 290.14,1022.8 260.65,1020.4 C232.214864,1018.40725 203.932689,1014.63318 175.97,1009.1 C148.88,1003.8 124.29,997.6 102.89,990.1 C81.63,983 63.1966667,975.133333 47.59,966.5 C32.09,957.4 20.39,947.8 12.2,937.9 C4.44,928.38 0.35,918.47 0.11,908.08 L0.11,687.8 C0.21,686.8 1.91,686.6 2.31,687.6 C12.31,712.25 43.76,739.84 123.64,762.71 L126.07,763.4 L127.87,763.9 L127.87,666.9 C119.18,664.5 110.78,661.9 102.87,659.1 C81.5833333,652 63.1233333,644.133333 47.49,635.5 C31.99,626.4 20.29,616.8 12.1,606.9 C4.34,597.38 0.25,587.47 0,577.08 L0,437.6 C0,427.5 4.1,417.4 12.1,407.5 C19.89,397.6 31.89,387.9 47.59,378.9 C62.98,369.9 81.59,361.7 102.97,354.7 C126.640248,347.101877 150.743158,340.924212 175.15,336.2 C202.24,330.9 230.83,326.9 260.33,324.1 C289.83,321.3 320.21,320 351.9,320" },

package/layouts/Gallery/gallery.css

@@ -7,8 +7,8 @@
   --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
   --pf-l-gallery--GridTemplateRows: auto;
   display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
   grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
   --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
   --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
 }

package/layouts/Gallery/gallery.scss

@@ -10,8 +10,8 @@ $pf-l-gallery--breakpoint-map: build-breakpoint-map();
   --pf-l-gallery--GridTemplateRows: auto;
 
   display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
   grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
 
   &.pf-m-gutter {
     grid-gap: var(--pf-l-gallery--m-gutter--GridGap);

package/layouts/Grid/grid.css

@@ -8,39 +8,39 @@
 }
 .pf-l-grid > *,
 .pf-l-grid .pf-l-grid__item {
-  min-width: 0;
-  min-height: 0;
   grid-column-start: var(--pf-l-grid__item--GridColumnStart);
   grid-column-end: var(--pf-l-grid__item--GridColumnEnd);
+  min-width: 0;
+  min-height: 0;
   order: var(--pf-l-grid--item--Order);
 }
 @media (min-width: 576px) {
   .pf-l-grid > *,
-.pf-l-grid .pf-l-grid__item {
+  .pf-l-grid .pf-l-grid__item {
     order: var(--pf-l-grid--item--Order-on-sm, var(--pf-l-grid--item--Order));
   }
 }
 @media (min-width: 768px) {
   .pf-l-grid > *,
-.pf-l-grid .pf-l-grid__item {
+  .pf-l-grid .pf-l-grid__item {
     order: var(--pf-l-grid--item--Order-on-md, var(--pf-l-grid--item--Order-on-sm, var(--pf-l-grid--item--Order)));
   }
 }
 @media (min-width: 992px) {
   .pf-l-grid > *,
-.pf-l-grid .pf-l-grid__item {
+  .pf-l-grid .pf-l-grid__item {
     order: var(--pf-l-grid--item--Order-on-lg, var(--pf-l-grid--item--Order-on-md, var(--pf-l-grid--item--Order-on-sm, var(--pf-l-grid--item--Order))));
   }
 }
 @media (min-width: 1200px) {
   .pf-l-grid > *,
-.pf-l-grid .pf-l-grid__item {
+  .pf-l-grid .pf-l-grid__item {
     order: var(--pf-l-grid--item--Order-on-xl, var(--pf-l-grid--item--Order-on-lg, var(--pf-l-grid--item--Order-on-md, var(--pf-l-grid--item--Order-on-sm, var(--pf-l-grid--item--Order)))));
   }
 }
 @media (min-width: 1450px) {
   .pf-l-grid > *,
-.pf-l-grid .pf-l-grid__item {
+  .pf-l-grid .pf-l-grid__item {
     order: var(--pf-l-grid--item--Order-on-2xl, var(--pf-l-grid--item--Order-on-xl, var(--pf-l-grid--item--Order-on-lg, var(--pf-l-grid--item--Order-on-md, var(--pf-l-grid--item--Order-on-sm, var(--pf-l-grid--item--Order))))));
   }
 }