@patternfly/react-styles 5.0.0-alpha.9 → 5.0.0-prerelease.1

package/css/components/Icon/icon.css

@@ -1,119 +1,120 @@
-.pf-c-icon {
-  --pf-c-icon--Width: var(--pf-global--icon--FontSize--md);
-  --pf-c-icon--Height: var(--pf-global--icon--FontSize--md);
-  --pf-c-icon--m-inline--Width: 1em;
-  --pf-c-icon--m-inline--Height: 1em;
-  --pf-c-icon--m-sm--Width: var(--pf-global--icon--FontSize--sm);
-  --pf-c-icon--m-md--Width: var(--pf-global--icon--FontSize--md);
-  --pf-c-icon--m-lg--Width: var(--pf-global--icon--FontSize--lg);
-  --pf-c-icon--m-xl--Width: var(--pf-global--icon--FontSize--xl);
-  --pf-c-icon--m-sm--Height: var(--pf-global--icon--FontSize--sm);
-  --pf-c-icon--m-md--Height: var(--pf-global--icon--FontSize--md);
-  --pf-c-icon--m-lg--Height: var(--pf-global--icon--FontSize--lg);
-  --pf-c-icon--m-xl--Height: var(--pf-global--icon--FontSize--xl);
-  --pf-c-icon__content--Color: var(--pf-global--icon--Color--dark);
-  --pf-c-icon__content--m-danger--Color: var(--pf-global--danger-color--100);
-  --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
-  --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
-  --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
-  --pf-c-icon__content--m-custom--Color: var(--pf-global--custom-color--100);
-  --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
-  --pf-c-icon--m-inline__content--FontSize: 1em;
-  --pf-c-icon__content--svg--VerticalAlign: -.125em;
-  --pf-c-icon--m-sm--content--FontSize: var(--pf-global--icon--FontSize--sm);
-  --pf-c-icon--m-md--content--FontSize: var(--pf-global--icon--FontSize--md);
-  --pf-c-icon--m-lg--content--FontSize: var(--pf-global--icon--FontSize--lg);
-  --pf-c-icon--m-xl--content--FontSize: var(--pf-global--icon--FontSize--xl);
+.pf-v5-c-icon {
+  --pf-v5-c-icon--Width: 1em;
+  --pf-v5-c-icon--Height: 1em;
+  --pf-v5-c-icon--m-sm--Width: var(--pf-v5-global--icon--FontSize--sm);
+  --pf-v5-c-icon--m-sm--Height: var(--pf-v5-global--icon--FontSize--sm);
+  --pf-v5-c-icon--m-md--Width: var(--pf-v5-global--icon--FontSize--md);
+  --pf-v5-c-icon--m-md--Height: var(--pf-v5-global--icon--FontSize--md);
+  --pf-v5-c-icon--m-lg--Width: var(--pf-v5-global--icon--FontSize--lg);
+  --pf-v5-c-icon--m-lg--Height: var(--pf-v5-global--icon--FontSize--lg);
+  --pf-v5-c-icon--m-xl--Width: var(--pf-v5-global--icon--FontSize--xl);
+  --pf-v5-c-icon--m-xl--Height: var(--pf-v5-global--icon--FontSize--xl);
+  --pf-v5-c-icon--m-inline--Width: 1em;
+  --pf-v5-c-icon--m-inline--Height: 1em;
+  --pf-v5-c-icon__content--svg--VerticalAlign: -.125em;
+  --pf-v5-c-icon__content--Color: initial;
+  --pf-v5-c-icon__content--m-danger--Color: var(--pf-v5-global--danger-color--100);
+  --pf-v5-c-icon__content--m-warning--Color: var(--pf-v5-global--warning-color--100);
+  --pf-v5-c-icon__content--m-success--Color: var(--pf-v5-global--success-color--100);
+  --pf-v5-c-icon__content--m-info--Color: var(--pf-v5-global--info-color--100);
+  --pf-v5-c-icon__content--m-custom--Color: var(--pf-v5-global--custom-color--100);
+  --pf-v5-c-icon--m-inline__content--Color: initial;
+  --pf-v5-c-icon__content--FontSize: 1em;
+  --pf-v5-c-icon--m-sm__content--FontSize: var(--pf-v5-global--icon--FontSize--sm);
+  --pf-v5-c-icon--m-md__content--FontSize: var(--pf-v5-global--icon--FontSize--md);
+  --pf-v5-c-icon--m-lg__content--FontSize: var(--pf-v5-global--icon--FontSize--lg);
+  --pf-v5-c-icon--m-xl__content--FontSize: var(--pf-v5-global--icon--FontSize--xl);
+  --pf-v5-c-icon--m-inline__content--FontSize: 1em;
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--pf-c-icon--Width);
-  height: var(--pf-c-icon--Height);
-}
-.pf-c-icon.pf-m-inline {
-  --pf-c-icon--Width: var(--pf-c-icon--m-inline--Width);
-  --pf-c-icon--Height: var(--pf-c-icon--m-inline--Height);
-  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-inline__content--FontSize);
-  --pf-c-icon__content--Color: currentcolor;
+  width: var(--pf-v5-c-icon--Width);
+  height: var(--pf-v5-c-icon--Height);
+}
+.pf-v5-c-icon.pf-m-inline {
+  --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-inline--Width);
+  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-inline--Height);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-inline__content--FontSize);
+  --pf-v5-c-icon__content--Color: var(--pf-v5-c-icon--m-inline__content--Color);
   line-height: 1;
 }
-.pf-c-icon.pf-m-inline .pf-c-spinner {
-  --pf-c-spinner--diameter: 1em;
+.pf-v5-c-icon.pf-m-inline .pf-v5-c-spinner {
+  --pf-v5-c-spinner--diameter: 1em;
 }
-.pf-c-icon.pf-m-sm {
-  --pf-c-icon--Width: var(--pf-c-icon--m-sm--Width);
-  --pf-c-icon--Height: var(--pf-c-icon--m-sm--Height);
-  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
+.pf-v5-c-icon.pf-m-sm {
+  --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-sm--Width);
+  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-sm--Height);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm__content--FontSize);
 }
-.pf-c-icon.pf-m-md {
-  --pf-c-icon--Width: var(--pf-c-icon--m-md--Width);
-  --pf-c-icon--Height: var(--pf-c-icon--m-md--Height);
-  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
+.pf-v5-c-icon.pf-m-md {
+  --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-md--Width);
+  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-md--Height);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md__content--FontSize);
 }
-.pf-c-icon.pf-m-lg {
-  --pf-c-icon--Width: var(--pf-c-icon--m-lg--Width);
-  --pf-c-icon--Height: var(--pf-c-icon--m-lg--Height);
-  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
+.pf-v5-c-icon.pf-m-lg {
+  --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-lg--Width);
+  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-lg--Height);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg__content--FontSize);
 }
-.pf-c-icon.pf-m-xl {
-  --pf-c-icon--Width: var(--pf-c-icon--m-xl--Width);
-  --pf-c-icon--Height: var(--pf-c-icon--m-xl--Height);
-  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
+.pf-v5-c-icon.pf-m-xl {
+  --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-xl--Width);
+  --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-xl--Height);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl__content--FontSize);
 }
-.pf-c-icon.pf-m-in-progress {
-  --pf-c-icon__content--Opacity: 0;
-  --pf-c-icon__progress--Opacity: 1;
+.pf-v5-c-icon.pf-m-in-progress {
+  --pf-v5-c-icon__content--Opacity: 0;
+  --pf-v5-c-icon__progress--Opacity: 1;
 }
 
-.pf-c-icon__content,
-.pf-c-icon__progress {
-  font-size: var(--pf-c-icon__content--FontSize);
+.pf-v5-c-icon__content,
+.pf-v5-c-icon__progress {
+  font-size: var(--pf-v5-c-icon__content--FontSize);
 }
-.pf-c-icon__content svg,
-.pf-c-icon__progress svg {
-  vertical-align: var(--pf-c-icon__content--svg--VerticalAlign);
+.pf-v5-c-icon__content svg,
+.pf-v5-c-icon__progress svg {
+  vertical-align: var(--pf-v5-c-icon__content--svg--VerticalAlign);
 }
-.pf-c-icon__content.pf-m-sm,
-.pf-c-icon__progress.pf-m-sm {
-  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-sm--content--FontSize);
+.pf-v5-c-icon__content.pf-m-sm,
+.pf-v5-c-icon__progress.pf-m-sm {
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm__content--FontSize);
 }
-.pf-c-icon__content.pf-m-md,
-.pf-c-icon__progress.pf-m-md {
-  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-md--content--FontSize);
+.pf-v5-c-icon__content.pf-m-md,
+.pf-v5-c-icon__progress.pf-m-md {
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md__content--FontSize);
 }
-.pf-c-icon__content.pf-m-lg,
-.pf-c-icon__progress.pf-m-lg {
-  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-lg--content--FontSize);
+.pf-v5-c-icon__content.pf-m-lg,
+.pf-v5-c-icon__progress.pf-m-lg {
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg__content--FontSize);
 }
-.pf-c-icon__content.pf-m-xl,
-.pf-c-icon__progress.pf-m-xl {
-  --pf-c-icon__content--FontSize: var(--pf-c-icon--m-xl--content--FontSize);
+.pf-v5-c-icon__content.pf-m-xl,
+.pf-v5-c-icon__progress.pf-m-xl {
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl__content--FontSize);
 }
 
-.pf-c-icon__content {
-  color: var(--pf-c-icon__content--Color);
-  opacity: var(--pf-c-icon__content--Opacity, 1);
+.pf-v5-c-icon__content {
+  color: var(--pf-v5-c-icon__content--Color, inherit);
+  opacity: var(--pf-v5-c-icon__content--Opacity, 1);
 }
-.pf-c-icon__content.pf-m-danger {
-  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-danger--Color);
+.pf-v5-c-icon__content.pf-m-danger {
+  --pf-v5-c-icon__content--Color: var(--pf-v5-c-icon__content--m-danger--Color);
 }
-.pf-c-icon__content.pf-m-warning {
-  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-warning--Color);
+.pf-v5-c-icon__content.pf-m-warning {
+  --pf-v5-c-icon__content--Color: var(--pf-v5-c-icon__content--m-warning--Color);
 }
-.pf-c-icon__content.pf-m-success {
-  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-success--Color);
+.pf-v5-c-icon__content.pf-m-success {
+  --pf-v5-c-icon__content--Color: var(--pf-v5-c-icon__content--m-success--Color);
 }
-.pf-c-icon__content.pf-m-info {
-  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
+.pf-v5-c-icon__content.pf-m-info {
+  --pf-v5-c-icon__content--Color: var(--pf-v5-c-icon__content--m-info--Color);
 }
-.pf-c-icon__content.pf-m-custom {
-  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-custom--Color);
+.pf-v5-c-icon__content.pf-m-custom {
+  --pf-v5-c-icon__content--Color: var(--pf-v5-c-icon__content--m-custom--Color);
 }
 
-.pf-c-icon__progress {
+.pf-v5-c-icon__progress {
   position: absolute;
-  top: calc(50% + 0.5 * var(--pf-c-icon__content--svg--VerticalAlign));
-  opacity: var(--pf-c-icon__progress--Opacity, 0);
-  transform: translateY(calc(-50% - 0.5 * var(--pf-c-icon__content--svg--VerticalAlign)));
+  top: calc(50% + 0.5 * var(--pf-v5-c-icon__content--svg--VerticalAlign));
+  opacity: var(--pf-v5-c-icon__progress--Opacity, 0);
+  transform: translateY(calc(-50% - 0.5 * var(--pf-v5-c-icon__content--svg--VerticalAlign)));
 }

package/css/components/Icon/icon.d.ts

@@ -1,8 +1,8 @@
 import './icon.css';
 declare const _default: {
-  "icon": "pf-c-icon",
-  "iconContent": "pf-c-icon__content",
-  "iconProgress": "pf-c-icon__progress",
+  "icon": "pf-v5-c-icon",
+  "iconContent": "pf-v5-c-icon__content",
+  "iconProgress": "pf-v5-c-icon__progress",
   "modifiers": {
     "inline": "pf-m-inline",
     "sm": "pf-m-sm",
@@ -16,6 +16,6 @@ declare const _default: {
     "info": "pf-m-info",
     "custom": "pf-m-custom"
   },
-  "spinner": "pf-c-spinner"
+  "spinner": "pf-v5-c-spinner"
 };
 export default _default;

package/css/components/Icon/icon.js

@@ -2,9 +2,9 @@
 exports.__esModule = true;
 require('./icon.css');
 exports.default = {
-  "icon": "pf-c-icon",
-  "iconContent": "pf-c-icon__content",
-  "iconProgress": "pf-c-icon__progress",
+  "icon": "pf-v5-c-icon",
+  "iconContent": "pf-v5-c-icon__content",
+  "iconProgress": "pf-v5-c-icon__progress",
   "modifiers": {
     "inline": "pf-m-inline",
     "sm": "pf-m-sm",
@@ -18,5 +18,5 @@ exports.default = {
     "info": "pf-m-info",
     "custom": "pf-m-custom"
   },
-  "spinner": "pf-c-spinner"
+  "spinner": "pf-v5-c-spinner"
 };

package/css/components/Icon/icon.mjs

@@ -1,8 +1,8 @@
 import './icon.css';
 export default {
-  "icon": "pf-c-icon",
-  "iconContent": "pf-c-icon__content",
-  "iconProgress": "pf-c-icon__progress",
+  "icon": "pf-v5-c-icon",
+  "iconContent": "pf-v5-c-icon__content",
+  "iconProgress": "pf-v5-c-icon__progress",
   "modifiers": {
     "inline": "pf-m-inline",
     "sm": "pf-m-sm",
@@ -16,5 +16,5 @@ export default {
     "info": "pf-m-info",
     "custom": "pf-m-custom"
   },
-  "spinner": "pf-c-spinner"
+  "spinner": "pf-v5-c-spinner"
 };

package/css/components/InlineEdit/inline-edit.css

@@ -1,82 +1,82 @@
-.pf-c-inline-edit {
-  --pf-c-inline-edit__group--item--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-inline-edit__action--c-button--m-valid--m-plain--Color: var(--pf-global--link--Color);
-  --pf-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color: var(--pf-global--link--Color--hover);
-  --pf-c-inline-edit__action--m-icon-group--item--MarginRight: 0;
-  --pf-c-inline-edit__group--m-footer--MarginTop: var(--pf-global--spacer--xl);
-  --pf-c-inline-edit__label--m-bold--FontWeight: var(--pf-global--FontWeight--bold);
+.pf-v5-c-inline-edit {
+  --pf-v5-c-inline-edit__group--item--MarginRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-inline-edit__action--c-button--m-valid--m-plain--Color: var(--pf-v5-global--link--Color);
+  --pf-v5-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color: var(--pf-v5-global--link--Color--hover);
+  --pf-v5-c-inline-edit__action--m-icon-group--item--MarginRight: 0;
+  --pf-v5-c-inline-edit__group--m-footer--MarginTop: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-inline-edit__label--m-bold--FontWeight: var(--pf-v5-global--FontWeight--bold);
 }
 
-.pf-c-inline-edit__group {
+.pf-v5-c-inline-edit__group {
   display: flex;
   align-items: baseline;
 }
-.pf-c-inline-edit__group > * {
-  margin-right: var(--pf-c-inline-edit__group--item--MarginRight);
+.pf-v5-c-inline-edit__group > * {
+  margin-right: var(--pf-v5-c-inline-edit__group--item--MarginRight);
 }
-.pf-c-inline-edit__group.pf-m-icon-group {
-  --pf-c-inline-edit__group--item--MarginRight: var(--pf-c-inline-edit__action--m-icon-group--item--MarginRight);
+.pf-v5-c-inline-edit__group.pf-m-icon-group {
+  --pf-v5-c-inline-edit__group--item--MarginRight: var(--pf-v5-c-inline-edit__action--m-icon-group--item--MarginRight);
 }
-.pf-c-inline-edit__group.pf-m-footer {
-  margin-top: var(--pf-c-inline-edit__group--m-footer--MarginTop);
+.pf-v5-c-inline-edit__group.pf-m-footer {
+  margin-top: var(--pf-v5-c-inline-edit__group--m-footer--MarginTop);
 }
-.pf-c-inline-edit__group.pf-m-column {
-  --pf-c-inline-edit__group--item--MarginRight: 0;
+.pf-v5-c-inline-edit__group.pf-m-column {
+  --pf-v5-c-inline-edit__group--item--MarginRight: 0;
   flex-direction: column;
 }
-.pf-c-inline-edit__group > :last-child {
-  --pf-c-inline-edit__group--item--MarginRight: 0;
+.pf-v5-c-inline-edit__group > :last-child {
+  --pf-v5-c-inline-edit__group--item--MarginRight: 0;
 }
 
-.pf-c-inline-edit__input {
+.pf-v5-c-inline-edit__input {
   flex: 1;
 }
 
-.pf-c-inline-edit__action.pf-m-valid .pf-c-button.pf-m-plain {
-  --pf-c-button--m-plain--Color: var(--pf-c-inline-edit__action--c-button--m-valid--m-plain--Color);
+.pf-v5-c-inline-edit__action.pf-m-valid .pf-v5-c-button.pf-m-plain {
+  --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-inline-edit__action--c-button--m-valid--m-plain--Color);
 }
-.pf-c-inline-edit__action.pf-m-valid .pf-c-button.pf-m-plain:hover {
-  --pf-c-button--m-plain--Color: var(--pf-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color);
+.pf-v5-c-inline-edit__action.pf-m-valid .pf-v5-c-button.pf-m-plain:hover {
+  --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color);
 }
 
-.pf-c-inline-edit__input,
-.pf-c-inline-edit__action,
-.pf-c-inline-edit__group.pf-m-action-group {
+.pf-v5-c-inline-edit__input,
+.pf-v5-c-inline-edit__action,
+.pf-v5-c-inline-edit__group.pf-m-action-group {
   display: none;
 }
 
-.pf-c-inline-edit__action.pf-m-enable-editable {
+.pf-v5-c-inline-edit__action.pf-m-enable-editable {
   display: inline-block;
 }
 
-.pf-c-inline-edit.pf-m-inline-editable .pf-c-inline-edit__input,
-.pf-c-inline-edit .pf-m-inline-editable .pf-c-inline-edit__input {
+.pf-v5-c-inline-edit.pf-m-inline-editable .pf-v5-c-inline-edit__input,
+.pf-v5-c-inline-edit .pf-m-inline-editable .pf-v5-c-inline-edit__input {
   display: block;
 }
-.pf-c-inline-edit.pf-m-inline-editable .pf-c-inline-edit__action,
-.pf-c-inline-edit .pf-m-inline-editable .pf-c-inline-edit__action {
+.pf-v5-c-inline-edit.pf-m-inline-editable .pf-v5-c-inline-edit__action,
+.pf-v5-c-inline-edit .pf-m-inline-editable .pf-v5-c-inline-edit__action {
   display: inline-block;
 }
-.pf-c-inline-edit.pf-m-inline-editable .pf-c-inline-edit__group.pf-m-action-group,
-.pf-c-inline-edit .pf-m-inline-editable .pf-c-inline-edit__group.pf-m-action-group {
+.pf-v5-c-inline-edit.pf-m-inline-editable .pf-v5-c-inline-edit__group.pf-m-action-group,
+.pf-v5-c-inline-edit .pf-m-inline-editable .pf-v5-c-inline-edit__group.pf-m-action-group {
   display: inline-flex;
 }
-.pf-c-inline-edit.pf-m-inline-editable .pf-c-inline-edit__value,
-.pf-c-inline-edit.pf-m-inline-editable .pf-c-inline-edit__action.pf-m-enable-editable,
-.pf-c-inline-edit .pf-m-inline-editable .pf-c-inline-edit__value,
-.pf-c-inline-edit .pf-m-inline-editable .pf-c-inline-edit__action.pf-m-enable-editable {
+.pf-v5-c-inline-edit.pf-m-inline-editable .pf-v5-c-inline-edit__value,
+.pf-v5-c-inline-edit.pf-m-inline-editable .pf-v5-c-inline-edit__action.pf-m-enable-editable,
+.pf-v5-c-inline-edit .pf-m-inline-editable .pf-v5-c-inline-edit__value,
+.pf-v5-c-inline-edit .pf-m-inline-editable .pf-v5-c-inline-edit__action.pf-m-enable-editable {
   display: none;
 }
 
-.pf-c-inline-edit__label + .pf-c-inline-edit__action.pf-m-enable > .pf-c-button {
-  margin-top: calc(var(--pf-c-button--PaddingTop) * -1);
-  margin-bottom: calc(var(--pf-c-button--PaddingBottom) * -1);
+.pf-v5-c-inline-edit__label + .pf-v5-c-inline-edit__action.pf-m-enable > .pf-v5-c-button {
+  margin-top: calc(var(--pf-v5-c-button--PaddingTop) * -1);
+  margin-bottom: calc(var(--pf-v5-c-button--PaddingBottom) * -1);
 }
 
-.pf-c-inline-edit__label.pf-m-bold {
-  font-weight: var(--pf-c-inline-edit__label--m-bold--FontWeight);
+.pf-v5-c-inline-edit__label.pf-m-bold {
+  font-weight: var(--pf-v5-c-inline-edit__label--m-bold--FontWeight);
 }
 
-.pf-c-inline-edit__editable-text br {
+.pf-v5-c-inline-edit__editable-text br {
   display: none;
 }

package/css/components/InlineEdit/inline-edit.d.ts

@@ -1,13 +1,13 @@
 import './inline-edit.css';
 declare const _default: {
-  "button": "pf-c-button",
-  "inlineEdit": "pf-c-inline-edit",
-  "inlineEditAction": "pf-c-inline-edit__action",
-  "inlineEditEditableText": "pf-c-inline-edit__editable-text",
-  "inlineEditGroup": "pf-c-inline-edit__group",
-  "inlineEditInput": "pf-c-inline-edit__input",
-  "inlineEditLabel": "pf-c-inline-edit__label",
-  "inlineEditValue": "pf-c-inline-edit__value",
+  "button": "pf-v5-c-button",
+  "inlineEdit": "pf-v5-c-inline-edit",
+  "inlineEditAction": "pf-v5-c-inline-edit__action",
+  "inlineEditEditableText": "pf-v5-c-inline-edit__editable-text",
+  "inlineEditGroup": "pf-v5-c-inline-edit__group",
+  "inlineEditInput": "pf-v5-c-inline-edit__input",
+  "inlineEditLabel": "pf-v5-c-inline-edit__label",
+  "inlineEditValue": "pf-v5-c-inline-edit__value",
   "modifiers": {
     "iconGroup": "pf-m-icon-group",
     "footer": "pf-m-footer",

package/css/components/InlineEdit/inline-edit.js

@@ -2,14 +2,14 @@
 exports.__esModule = true;
 require('./inline-edit.css');
 exports.default = {
-  "button": "pf-c-button",
-  "inlineEdit": "pf-c-inline-edit",
-  "inlineEditAction": "pf-c-inline-edit__action",
-  "inlineEditEditableText": "pf-c-inline-edit__editable-text",
-  "inlineEditGroup": "pf-c-inline-edit__group",
-  "inlineEditInput": "pf-c-inline-edit__input",
-  "inlineEditLabel": "pf-c-inline-edit__label",
-  "inlineEditValue": "pf-c-inline-edit__value",
+  "button": "pf-v5-c-button",
+  "inlineEdit": "pf-v5-c-inline-edit",
+  "inlineEditAction": "pf-v5-c-inline-edit__action",
+  "inlineEditEditableText": "pf-v5-c-inline-edit__editable-text",
+  "inlineEditGroup": "pf-v5-c-inline-edit__group",
+  "inlineEditInput": "pf-v5-c-inline-edit__input",
+  "inlineEditLabel": "pf-v5-c-inline-edit__label",
+  "inlineEditValue": "pf-v5-c-inline-edit__value",
   "modifiers": {
     "iconGroup": "pf-m-icon-group",
     "footer": "pf-m-footer",

package/css/components/InlineEdit/inline-edit.mjs

@@ -1,13 +1,13 @@
 import './inline-edit.css';
 export default {
-  "button": "pf-c-button",
-  "inlineEdit": "pf-c-inline-edit",
-  "inlineEditAction": "pf-c-inline-edit__action",
-  "inlineEditEditableText": "pf-c-inline-edit__editable-text",
-  "inlineEditGroup": "pf-c-inline-edit__group",
-  "inlineEditInput": "pf-c-inline-edit__input",
-  "inlineEditLabel": "pf-c-inline-edit__label",
-  "inlineEditValue": "pf-c-inline-edit__value",
+  "button": "pf-v5-c-button",
+  "inlineEdit": "pf-v5-c-inline-edit",
+  "inlineEditAction": "pf-v5-c-inline-edit__action",
+  "inlineEditEditableText": "pf-v5-c-inline-edit__editable-text",
+  "inlineEditGroup": "pf-v5-c-inline-edit__group",
+  "inlineEditInput": "pf-v5-c-inline-edit__input",
+  "inlineEditLabel": "pf-v5-c-inline-edit__label",
+  "inlineEditValue": "pf-v5-c-inline-edit__value",
   "modifiers": {
     "iconGroup": "pf-m-icon-group",
     "footer": "pf-m-footer",

package/css/components/InputGroup/input-group.css

@@ -1,85 +1,83 @@
-.pf-c-input-group {
-  --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
-  --pf-c-input-group__item--offset: var(--pf-global--BorderWidth--sm);
-  --pf-c-input-group__item--MarginLeft: calc(var(--pf-c-input-group__item--offset) * -1);
-  --pf-c-input-group__item--BorderWidth--base: var(--pf-c-input-group__item--offset);
-  --pf-c-input-group__item--BorderColor--base: var(--pf-global--BorderColor--300);
-  --pf-c-input-group__item--BorderColor--accent: var(--pf-global--BorderColor--200);
-  --pf-c-input-group__item--BackgroundColor: transparent;
-  --pf-c-input-group__item--m-box--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-input-group__item--m-box--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-input-group__item--m-box--BorderWidth: var(--pf-c-input-group__item--offset);
-  --pf-c-input-group__item--m-box--BorderTopColor: var(--pf-c-input-group__item--BorderColor--base);
-  --pf-c-input-group__item--m-box--BorderRightColor: var(--pf-c-input-group__item--BorderColor--base);
-  --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--BorderColor--accent);
-  --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderColor--base);
-  --pf-c-input-group__item--m-plain--BackgroundColor: transparent;
-  --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
-  --pf-c-input-group__item--m-disabled__text--Color: var(--pf-global--disabled-color--100);
-  --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
-  --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
-  --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
-  --pf-c-input-group--c-form-control--MarginRight: 0;
+.pf-v5-c-input-group {
+  --pf-v5-c-input-group--child--ZIndex: var(--pf-v5-global--ZIndex--xs);
+  --pf-v5-c-input-group__item--offset: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-input-group__item--MarginLeft: calc(var(--pf-v5-c-input-group__item--offset) * -1);
+  --pf-v5-c-input-group__item--BorderWidth--base: var(--pf-v5-c-input-group__item--offset);
+  --pf-v5-c-input-group__item--BorderColor--base: var(--pf-v5-global--BorderColor--300);
+  --pf-v5-c-input-group__item--BorderColor--accent: var(--pf-v5-global--BorderColor--200);
+  --pf-v5-c-input-group__item--BackgroundColor: transparent;
+  --pf-v5-c-input-group__item--m-box--PaddingRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-input-group__item--m-box--PaddingLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-input-group__item--m-box--BorderWidth: var(--pf-v5-c-input-group__item--offset);
+  --pf-v5-c-input-group__item--m-box--BorderTopColor: var(--pf-v5-c-input-group__item--BorderColor--base);
+  --pf-v5-c-input-group__item--m-box--BorderRightColor: var(--pf-v5-c-input-group__item--BorderColor--base);
+  --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--BorderColor--accent);
+  --pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderColor--base);
+  --pf-v5-c-input-group__item--m-plain--BackgroundColor: transparent;
+  --pf-v5-c-input-group__text--FontSize: var(--pf-v5-global--FontSize--md);
+  --pf-v5-c-input-group__text--Color: var(--pf-v5-global--Color--dark-200);
+  --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--100);
+  --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
+  --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
   display: flex;
   width: 100%;
 }
 
-.pf-c-input-group__item {
+.pf-v5-c-input-group__item {
   position: relative;
   display: flex;
-  min-width: var(--pf-c-input-group__item--MinWidth, revert);
-  max-width: var(--pf-c-input-group__item--MaxWidth, revert);
-  background-color: var(--pf-c-input-group__item--BackgroundColor);
-  border-color: var(--pf-c-input-group__item--m-box--BorderTopColor) var(--pf-c-input-group__item--m-box--BorderRightColor) var(--pf-c-input-group__item--m-box--BorderBottomColor) var(--pf-c-input-group__item--m-box--BorderLeftColor);
+  min-width: var(--pf-v5-c-input-group__item--MinWidth, revert);
+  max-width: var(--pf-v5-c-input-group__item--MaxWidth, revert);
+  background-color: var(--pf-v5-c-input-group__item--BackgroundColor);
+  border-color: var(--pf-v5-c-input-group__item--m-box--BorderTopColor) var(--pf-v5-c-input-group__item--m-box--BorderRightColor) var(--pf-v5-c-input-group__item--m-box--BorderBottomColor) var(--pf-v5-c-input-group__item--m-box--BorderLeftColor);
 }
-.pf-c-input-group__item:where(:not(:first-child)) {
-  margin-left: var(--pf-c-input-group__item--MarginLeft);
+.pf-v5-c-input-group__item:where(:not(:first-child)) {
+  margin-left: var(--pf-v5-c-input-group__item--MarginLeft);
 }
-.pf-c-input-group__item.pf-m-box {
-  --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-box--BackgroundColor);
-  padding-right: var(--pf-c-input-group__item--m-box--PaddingRight);
-  padding-left: var(--pf-c-input-group__item--m-box--PaddingLeft);
-  border: var(--pf-c-input-group__item--m-box--BorderWidth) solid;
-  border-color: var(--pf-c-input-group__item--m-box--BorderTopColor) var(--pf-c-input-group__item--m-box--BorderRightColor) var(--pf-c-input-group__item--m-box--BorderBottomColor) var(--pf-c-input-group__item--m-box--BorderLeftColor);
+.pf-v5-c-input-group__item.pf-m-box {
+  --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-box--BackgroundColor);
+  padding-right: var(--pf-v5-c-input-group__item--m-box--PaddingRight);
+  padding-left: var(--pf-v5-c-input-group__item--m-box--PaddingLeft);
+  border: var(--pf-v5-c-input-group__item--m-box--BorderWidth) solid;
+  border-color: var(--pf-v5-c-input-group__item--m-box--BorderTopColor) var(--pf-v5-c-input-group__item--m-box--BorderRightColor) var(--pf-v5-c-input-group__item--m-box--BorderBottomColor) var(--pf-v5-c-input-group__item--m-box--BorderLeftColor);
 }
-.pf-c-input-group__item.pf-m-plain {
-  --pf-c-input-group__item--MarginLeft: 0;
-  --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-plain--BackgroundColor);
+.pf-v5-c-input-group__item.pf-m-plain {
+  --pf-v5-c-input-group__item--MarginLeft: 0;
+  --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-plain--BackgroundColor);
   border: none;
 }
-.pf-c-input-group__item.pf-m-disabled {
-  --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-disabled--BackgroundColor);
-  --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--m-disabled--BorderBottomColor);
-  --pf-c-input-group__text--Color: var(--pf-c-input-group__item--m-disabled__text--Color);
+.pf-v5-c-input-group__item.pf-m-disabled {
+  --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-disabled--BackgroundColor);
+  --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--m-disabled--BorderBottomColor);
+  --pf-v5-c-input-group__text--Color: var(--pf-v5-c-input-group__item--m-disabled__text--Color);
 }
-.pf-c-input-group__item.pf-m-fill {
+.pf-v5-c-input-group__item.pf-m-fill {
   flex-grow: 1;
 }
 
-.pf-c-input-group__text {
+.pf-v5-c-input-group__text {
   align-self: center;
-  font-size: var(--pf-c-input-group__text--FontSize);
-  color: var(--pf-c-input-group__text--Color);
+  font-size: var(--pf-v5-c-input-group__text--FontSize);
+  color: var(--pf-v5-c-input-group__text--Color);
 }
-label.pf-c-input-group__text {
+label.pf-v5-c-input-group__text {
   cursor: pointer;
 }
 
-:where(.pf-theme-dark) .pf-c-input-group {
-  --pf-c-input-group__item--BorderLeftWidth: var(--pf-c-input-group__item--BorderWidth--base);
-  --pf-c-input-group__item--BorderLeftColor: var(--pf-global--palette--black-700);
-  --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--400);
-  --pf-c-input-group__item--m-box--BorderTopColor: transparent;
-  --pf-c-input-group__item--m-box--BorderRightColor: transparent;
-  --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-global--BorderColor--400);
-  --pf-c-input-group__item--m-box--BorderLeftColor: transparent;
-  --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
-  --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
-  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
+:where(.pf-v5-theme-dark) .pf-v5-c-input-group {
+  --pf-v5-c-input-group__item--BorderLeftWidth: var(--pf-v5-c-input-group__item--BorderWidth--base);
+  --pf-v5-c-input-group__item--BorderLeftColor: var(--pf-v5-global--palette--black-700);
+  --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
+  --pf-v5-c-input-group__item--m-box--BorderTopColor: transparent;
+  --pf-v5-c-input-group__item--m-box--BorderRightColor: transparent;
+  --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
+  --pf-v5-c-input-group__item--m-box--BorderLeftColor: transparent;
+  --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
+  --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--300);
 }
-:where(.pf-theme-dark) .pf-c-input-group > * + * {
-  --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderLeftColor);
-  border-left: var(--pf-c-input-group__item--BorderLeftWidth) solid var(--pf-c-input-group__item--BorderLeftColor);
+:where(.pf-v5-theme-dark) .pf-v5-c-input-group > * + * {
+  --pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderLeftColor);
+  border-left: var(--pf-v5-c-input-group__item--BorderLeftWidth) solid var(--pf-v5-c-input-group__item--BorderLeftColor);
 }