@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/components/Hint/hint.css

@@ -1,33 +1,32 @@
-:root {
+:root,
+.pf-v6-c-hint {
   --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-hint--PaddingTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-hint--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-hint--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-hint--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
   --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
   --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-hint__title--FontFamily: var(--pf-t--global--font--family--heading);
-  --pf-v6-c-hint__title--FontSize: var(--pf-t--global--font--size--heading--xs);
-  --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v6-c-hint__title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-hint__footer--MarginTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-hint__footer--child--MarginRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-hint__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
+  --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
 }
 
 .pf-v6-c-hint {
   display: grid;
   grid-template-columns: 1fr auto;
   grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
-  padding-block-start: var(--pf-v6-c-hint--PaddingTop);
-  padding-block-end: var(--pf-v6-c-hint--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-hint--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-hint--PaddingRight);
+  padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
   color: var(--pf-v6-c-hint--Color);
   background-color: var(--pf-v6-c-hint--BackgroundColor);
   border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
@@ -43,11 +42,15 @@
   grid-row: 1;
   grid-column: 2;
   grid-auto-flow: column;
-  margin-inline-start: var(--pf-v6-c-hint__actions--MarginLeft);
+  align-self: start;
+  margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
+  margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
   text-align: end;
 }
-.pf-v6-c-hint__actions .pf-v6-c-dropdown .pf-v6-c-dropdown__toggle.pf-m-plain {
-  margin-block-start: var(--pf-v6-c-hint__actions--c-dropdown--MarginTop);
+.pf-v6-c-hint__actions.pf-m-no-offset {
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
 }
 .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
   grid-column: 1;
@@ -55,10 +58,7 @@
 
 .pf-v6-c-hint__title {
   align-self: center;
-  font-family: var(--pf-v6-c-hint__title--FontFamily);
-  font-size: var(--pf-v6-c-hint__title--FontSize);
   font-weight: var(--pf-v6-c-hint__title--FontWeight);
-  line-height: var(--pf-v6-c-hint__title--LineHeight);
 }
 
 .pf-v6-c-hint__body {
@@ -68,8 +68,8 @@
 
 .pf-v6-c-hint__footer {
   grid-column: 1/-1;
-  margin-block-start: var(--pf-v6-c-hint__footer--MarginTop);
+  margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
 }
 .pf-v6-c-hint__footer > :not(:last-child) {
-  margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginRight);
+  margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
 }

package/components/Hint/hint.scss

@@ -1,11 +1,11 @@
-// @debug $hint; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+@include pf-root($hint) {
   --#{$hint}--GridRowGap: var(--pf-t--global--spacer--sm);
-  --#{$hint}--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$hint}--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$hint}--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --#{$hint}--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$hint}--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$hint}--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$hint}--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --#{$hint}--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$hint}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$hint}--BorderColor: var(--pf-t--global--border--color--status--info--default);
   --#{$hint}--BorderWidth: var(--pf-t--global--border--width--box--status--default);
@@ -13,31 +13,29 @@
   --#{$hint}--Color: var(--pf-t--global--text--color--regular);
 
   // Hint Title
-  --#{$hint}__title--FontFamily: var(--pf-t--global--font--family--heading);
-  --#{$hint}__title--FontSize: var(--pf-t--global--font--size--heading--xs);
-  --#{$hint}__title--FontWeight: var(--pf-t--global--font--weight--heading);
-  --#{$hint}__title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$hint}__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
   // Hint Body
   --#{$hint}__body--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Hint Footer
-  --#{$hint}__footer--MarginTop: var(--pf-t--global--spacer--sm);
-  --#{$hint}__footer--child--MarginRight: var(--pf-t--global--spacer--md);
+  --#{$hint}__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$hint}__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
 
   // Hint Actions
-  --#{$hint}__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
-  --#{$hint}__actions--c-dropdown--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1); // TODO form element spacer
+  --#{$hint}__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
+  --#{$hint}__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --#{$hint}__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
 }
 
 .#{$hint} {
   display: grid;
   grid-template-columns: 1fr auto;
   grid-row-gap: var(--#{$hint}--GridRowGap);
-  padding-block-start: var(--#{$hint}--PaddingTop);
-  padding-block-end: var(--#{$hint}--PaddingBottom);
-  padding-inline-start: var(--#{$hint}--PaddingLeft);
-  padding-inline-end: var(--#{$hint}--PaddingRight);
+  padding-block-start: var(--#{$hint}--PaddingBlockStart);
+  padding-block-end: var(--#{$hint}--PaddingBlockEnd);
+  padding-inline-start: var(--#{$hint}--PaddingInlineStart);
+  padding-inline-end: var(--#{$hint}--PaddingInlineEnd);
   color: var(--#{$hint}--Color);
   background-color: var(--#{$hint}--BackgroundColor);
   border: var(--#{$hint}--BorderWidth) solid var(--#{$hint}--BorderColor);
@@ -55,12 +53,15 @@
   grid-row: 1;
   grid-column: 2;
   grid-auto-flow: column;
-  margin-inline-start: var(--#{$hint}__actions--MarginLeft);
+  align-self: start;
+  margin-block-start: var(--#{$hint}__actions--c-menu-toggle--MarginBlockStart);
+  margin-block-end: var(--#{$hint}__actions--c-menu-toggle--MarginBlockEnd);
+  margin-inline-start: var(--#{$hint}__actions--MarginInlineStart);
   text-align: end;
 
-  // Only applies to the plain dropdown
-  .#{$dropdown} .#{$dropdown}__toggle.pf-m-plain {
-    margin-block-start: var(--#{$hint}__actions--c-dropdown--MarginTop);
+  &.pf-m-no-offset {
+    --#{$hint}__actions--c-menu-toggle--MarginBlockStart: 0;
+    --#{$hint}__actions--c-menu-toggle--MarginBlockEnd: 0;
   }
 
   + .#{$hint}__body {
@@ -70,10 +71,7 @@
 
 .#{$hint}__title {
   align-self: center;
-  font-family: var(--#{$hint}__title--FontFamily);
-  font-size: var(--#{$hint}__title--FontSize);
   font-weight: var(--#{$hint}__title--FontWeight);
-  line-height: var(--#{$hint}__title--LineHeight);
 }
 
 .#{$hint}__body {
@@ -83,9 +81,9 @@
 
 .#{$hint}__footer {
   grid-column: 1 / -1;
-  margin-block-start: var(--#{$hint}__footer--MarginTop);
+  margin-block-start: var(--#{$hint}__footer--MarginBlockStart);
 
   > :not(:last-child) {
-    margin-inline-end: var(--#{$hint}__footer--child--MarginRight);
+    margin-inline-end: var(--#{$hint}__footer--child--MarginInlineEnd);
   }
 }

package/components/Icon/icon.css

@@ -1,7 +1,7 @@
 :root,
-:where(.pf-v6-c-icon) {
-  --pf-v6-c-icon--Width: 1em;
-  --pf-v6-c-icon--Height: 1em;
+.pf-v6-c-icon {
+  --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
+  --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
   --pf-v6-c-icon--m-sm--Width: var(--pf-t--global--icon--size--sm);
   --pf-v6-c-icon--m-sm--Height: var(--pf-t--global--icon--size--sm);
   --pf-v6-c-icon--m-md--Width: var(--pf-t--global--icon--size--md);
@@ -35,14 +35,14 @@
   --pf-v6-c-icon--m-inline--Width: 1em;
   --pf-v6-c-icon--m-inline--Height: 1em;
   --pf-v6-c-icon__content--svg--VerticalAlign: -.125em;
-  --pf-v6-c-icon__content--Color: initial;
-  --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--color--status--danger--default);
-  --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--color--status--warning--default);
-  --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--color--status--success--default);
-  --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--color--status--info--default);
-  --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--color--status--custom--default);
+  --pf-v6-c-icon__content--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
+  --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
+  --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
   --pf-v6-c-icon--m-inline__content--Color: initial;
-  --pf-v6-c-icon__content--FontSize: 1em;
+  --pf-v6-c-icon__content--FontSize: var(--pf-t--global--icon--size--font--body--default);
   --pf-v6-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
   --pf-v6-c-icon--m-md__content--FontSize: var(--pf-t--global--icon--size--md);
   --pf-v6-c-icon--m-lg__content--FontSize: var(--pf-t--global--icon--size--lg);

package/components/Icon/icon.scss

@@ -1,10 +1,9 @@
-// @debug $icon; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-:where(.#{$icon}) {
+@include pf-root($icon) {
   // Sizes
-  --#{$icon}--Width: 1em;
-  --#{$icon}--Height: 1em;
+  --#{$icon}--Width: var(--pf-t--global--icon--size--font--body--default);
+  --#{$icon}--Height: var(--pf-t--global--icon--size--font--body--default);
 
   // Standalone icon sizes
   --#{$icon}--m-sm--Width: var(--pf-t--global--icon--size--sm);
@@ -50,16 +49,16 @@
   --#{$icon}__content--svg--VerticalAlign: -.125em;
 
   // Content color
-  --#{$icon}__content--Color: initial;
-  --#{$icon}__content--m-danger--Color: var(--pf-t--global--color--status--danger--default);
-  --#{$icon}__content--m-warning--Color: var(--pf-t--global--color--status--warning--default);
-  --#{$icon}__content--m-success--Color: var(--pf-t--global--color--status--success--default);
-  --#{$icon}__content--m-info--Color: var(--pf-t--global--color--status--info--default);
-  --#{$icon}__content--m-custom--Color: var(--pf-t--global--color--status--custom--default);
+  --#{$icon}__content--Color: var(--pf-t--global--icon--color--regular);
+  --#{$icon}__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --#{$icon}__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --#{$icon}__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
+  --#{$icon}__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
+  --#{$icon}__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
   --#{$icon}--m-inline__content--Color: initial;
 
   // Content sizes
-  --#{$icon}__content--FontSize: 1em;
+  --#{$icon}__content--FontSize: var(--pf-t--global--icon--size--font--body--default);;
 
   // Standalone content sizes
   --#{$icon}--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);

package/components/InlineEdit/inline-edit.css

@@ -1,10 +1,10 @@
-:where(:root),
-:where(.pf-v6-c-inline-edit) {
-  --pf-v6-c-inline-edit__group--item--MarginRight: var(--pf-t--global--spacer--sm);
+:root,
+.pf-v6-c-inline-edit {
+  --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
   --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color: var(--pf-t--global--icon--color--brand--hover);
-  --pf-v6-c-inline-edit__action--m-icon-group--item--MarginRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-inline-edit__group--m-footer--MarginTop: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--plain);
+  --pf-v6-c-inline-edit__group--m-footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-inline-edit__label--m-bold--FontWeight: var(--pf-t--global--font--weight--body--bold);
 }
 
@@ -13,20 +13,20 @@
   align-items: baseline;
 }
 .pf-v6-c-inline-edit__group > * {
-  margin-inline-end: var(--pf-v6-c-inline-edit__group--item--MarginRight);
+  margin-inline-end: var(--pf-v6-c-inline-edit__group--item--MarginInlineEnd);
 }
 .pf-v6-c-inline-edit__group.pf-m-icon-group {
-  --pf-v6-c-inline-edit__group--item--MarginRight: var(--pf-v6-c-inline-edit__action--m-icon-group--item--MarginRight);
+  --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd);
 }
 .pf-v6-c-inline-edit__group.pf-m-footer {
-  margin-block-start: var(--pf-v6-c-inline-edit__group--m-footer--MarginTop);
+  margin-block-start: var(--pf-v6-c-inline-edit__group--m-footer--MarginBlockStart);
 }
 .pf-v6-c-inline-edit__group.pf-m-column {
-  --pf-v6-c-inline-edit__group--item--MarginRight: 0;
+  --pf-v6-c-inline-edit__group--item--MarginInlineEnd: 0;
   flex-direction: column;
 }
 .pf-v6-c-inline-edit__group > :last-child {
-  --pf-v6-c-inline-edit__group--item--MarginRight: 0;
+  --pf-v6-c-inline-edit__group--item--MarginInlineEnd: 0;
 }
 
 .pf-v6-c-inline-edit__input {
@@ -70,8 +70,8 @@
 }
 
 .pf-v6-c-inline-edit__label + .pf-v6-c-inline-edit__action.pf-m-enable > .pf-v6-c-button {
-  margin-block-start: calc(var(--pf-v6-c-button--PaddingTop) * -1);
-  margin-block-end: calc(var(--pf-v6-c-button--PaddingBottom) * -1);
+  margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
+  margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
 }
 
 .pf-v6-c-inline-edit__label.pf-m-bold {

package/components/InlineEdit/inline-edit.scss

@@ -1,19 +1,18 @@
-// @debug $inline-edit; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where( .#{$inline-edit}) {
+@include pf-root($inline-edit) {
   // Group
-  --#{$inline-edit}__group--item--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$inline-edit}__group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
 
   // Valid action
   --#{$inline-edit}__action--c-button--m-valid--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
   --#{$inline-edit}__action--c-button--m-valid--m-plain--hover--Color: var(--pf-t--global--icon--color--brand--hover);
 
   // Icon button
-  --#{$inline-edit}__action--m-icon-group--item--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$inline-edit}__action--m-icon-group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--plain);
 
   // Footer group
-  --#{$inline-edit}__group--m-footer--MarginTop: var(--pf-t--global--spacer--xl);
+  --#{$inline-edit}__group--m-footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
 
   // Label
   --#{$inline-edit}__label--m-bold--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -25,27 +24,27 @@
   align-items: baseline;
 
   > * {
-    margin-inline-end: var(--#{$inline-edit}__group--item--MarginRight);
+    margin-inline-end: var(--#{$inline-edit}__group--item--MarginInlineEnd);
   }
 
   &.pf-m-icon-group {
-    --#{$inline-edit}__group--item--MarginRight: var(--#{$inline-edit}__action--m-icon-group--item--MarginRight);
+    --#{$inline-edit}__group--item--MarginInlineEnd: var(--#{$inline-edit}__action--m-icon-group--item--MarginInlineEnd);
   }
 
   // Footer
   &.pf-m-footer {
-    margin-block-start: var(--#{$inline-edit}__group--m-footer--MarginTop);
+    margin-block-start: var(--#{$inline-edit}__group--m-footer--MarginBlockStart);
   }
 
   // Column
   &.pf-m-column {
-    --#{$inline-edit}__group--item--MarginRight: 0;
+    --#{$inline-edit}__group--item--MarginInlineEnd: 0;
 
     flex-direction: column;
   }
 
   > :last-child {
-    --#{$inline-edit}__group--item--MarginRight: 0;
+    --#{$inline-edit}__group--item--MarginInlineEnd: 0;
   }
 }
 
@@ -103,8 +102,8 @@
 
 // offset button by top padding
 .#{$inline-edit}__label + .#{$inline-edit}__action.pf-m-enable > .#{$button} {
-  margin-block-start: calc(var(--#{$button}--PaddingTop) * -1);
-  margin-block-end: calc(var(--#{$button}--PaddingBottom) * -1);
+  margin-block-start: calc(var(--#{$button}--PaddingBlockStart) * -1);
+  margin-block-end: calc(var(--#{$button}--PaddingBlockEnd) * -1);
 }
 
 .#{$inline-edit}__label.pf-m-bold {

package/components/InputGroup/input-group.css

@@ -6,15 +6,15 @@
   --pf-v6-c-input-group__item--BorderColor--base: var(--pf-t--global--border--color--default);
   --pf-v6-c-input-group__item--BackgroundColor: transparent;
   --pf-v6-c-input-group__item--AlignItems: start;
-  --pf-v6-c-input-group__item--m-box--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-input-group__item--m-box--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-input-group__item--m-box--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-input-group__item--m-box--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-input-group__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-input-group__item--m-box--BorderWidth: var(--pf-v6-c-input-group__item--BorderWidth--base);
   --pf-v6-c-input-group__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
-  --pf-v6-c-input-group__item--m-box--BorderTopColor: var(--pf-v6-c-input-group__item--BorderColor--base);
-  --pf-v6-c-input-group__item--m-box--BorderRightColor: var(--pf-v6-c-input-group__item--BorderColor--base);
-  --pf-v6-c-input-group__item--m-box--BorderBottomColor: var(--pf-v6-c-input-group__item--BorderColor--base);
-  --pf-v6-c-input-group__item--m-box--BorderLeftColor: var(--pf-v6-c-input-group__item--BorderColor--base);
+  --pf-v6-c-input-group__item--m-box--BorderBlockStartColor: var(--pf-v6-c-input-group__item--BorderColor--base);
+  --pf-v6-c-input-group__item--m-box--BorderInlineEndColor: var(--pf-v6-c-input-group__item--BorderColor--base);
+  --pf-v6-c-input-group__item--m-box--BorderBlockEndColor: var(--pf-v6-c-input-group__item--BorderColor--base);
+  --pf-v6-c-input-group__item--m-box--BorderInlineStartColor: var(--pf-v6-c-input-group__item--BorderColor--base);
   --pf-v6-c-input-group__item--m-plain--BackgroundColor: transparent;
   --pf-v6-c-input-group__text--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
@@ -35,20 +35,20 @@
   min-width: var(--pf-v6-c-input-group__item--MinWidth, revert);
   max-width: var(--pf-v6-c-input-group__item--MaxWidth, revert);
   background-color: var(--pf-v6-c-input-group__item--BackgroundColor);
-  border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderTopColor);
-  border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBottomColor);
-  border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderLeftColor);
-  border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderRightColor);
+  border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor);
+  border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor);
+  border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor);
+  border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor);
 }
 .pf-v6-c-input-group__item.pf-m-box {
   --pf-v6-c-input-group__item--BackgroundColor: var(--pf-v6-c-input-group__item--m-box--BackgroundColor);
-  padding-inline-start: var(--pf-v6-c-input-group__item--m-box--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-input-group__item--m-box--PaddingRight);
+  padding-inline-start: var(--pf-v6-c-input-group__item--m-box--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-input-group__item--m-box--PaddingInlineEnd);
   border: var(--pf-v6-c-input-group__item--m-box--BorderWidth) solid;
-  border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderTopColor);
-  border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBottomColor);
-  border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderLeftColor);
-  border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderRightColor);
+  border-block-start-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockStartColor);
+  border-block-end-color: var(--pf-v6-c-input-group__item--m-box--BorderBlockEndColor);
+  border-inline-start-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineStartColor);
+  border-inline-end-color: var(--pf-v6-c-input-group__item--m-box--BorderInlineEndColor);
   border-radius: var(--pf-v6-c-input-group__item--m-box--BorderRadius);
 }
 .pf-v6-c-input-group__item.pf-m-plain {

package/components/InputGroup/input-group.scss

@@ -1,7 +1,6 @@
-// @debug $input-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$input-group} {
+@include pf-root($input-group) {
   --#{$input-group}--Gap: var(--pf-t--global--spacer--xs);
 
   // Input group item
@@ -12,15 +11,15 @@
   --#{$input-group}__item--AlignItems: start;
 
   // Input group item, box variant
-  --#{$input-group}__item--m-box--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$input-group}__item--m-box--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$input-group}__item--m-box--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$input-group}__item--m-box--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$input-group}__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$input-group}__item--m-box--BorderWidth: var(--#{$input-group}__item--BorderWidth--base);
   --#{$input-group}__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
-  --#{$input-group}__item--m-box--BorderTopColor: var(--#{$input-group}__item--BorderColor--base);
-  --#{$input-group}__item--m-box--BorderRightColor: var(--#{$input-group}__item--BorderColor--base);
-  --#{$input-group}__item--m-box--BorderBottomColor: var(--#{$input-group}__item--BorderColor--base);
-  --#{$input-group}__item--m-box--BorderLeftColor: var(--#{$input-group}__item--BorderColor--base);
+  --#{$input-group}__item--m-box--BorderBlockStartColor: var(--#{$input-group}__item--BorderColor--base);
+  --#{$input-group}__item--m-box--BorderInlineEndColor: var(--#{$input-group}__item--BorderColor--base);
+  --#{$input-group}__item--m-box--BorderBlockEndColor: var(--#{$input-group}__item--BorderColor--base);
+  --#{$input-group}__item--m-box--BorderInlineStartColor: var(--#{$input-group}__item--BorderColor--base);
 
   // Input group item, plain variant
   --#{$input-group}__item--m-plain--BackgroundColor: transparent;
@@ -47,21 +46,21 @@
   min-width: var(--#{$input-group}__item--MinWidth, revert);
   max-width: var(--#{$input-group}__item--MaxWidth, revert);
   background-color: var(--#{$input-group}__item--BackgroundColor);
-  border-block-start-color: var(--#{$input-group}__item--m-box--BorderTopColor);
-  border-block-end-color: var(--#{$input-group}__item--m-box--BorderBottomColor);
-  border-inline-start-color: var(--#{$input-group}__item--m-box--BorderLeftColor);
-  border-inline-end-color: var(--#{$input-group}__item--m-box--BorderRightColor);
+  border-block-start-color: var(--#{$input-group}__item--m-box--BorderBlockStartColor);
+  border-block-end-color: var(--#{$input-group}__item--m-box--BorderBlockEndColor);
+  border-inline-start-color: var(--#{$input-group}__item--m-box--BorderInlineStartColor);
+  border-inline-end-color: var(--#{$input-group}__item--m-box--BorderInlineEndColor);
 
   &.pf-m-box {
     --#{$input-group}__item--BackgroundColor: var(--#{$input-group}__item--m-box--BackgroundColor);
 
-    padding-inline-start: var(--#{$input-group}__item--m-box--PaddingLeft);
-    padding-inline-end: var(--#{$input-group}__item--m-box--PaddingRight);
+    padding-inline-start: var(--#{$input-group}__item--m-box--PaddingInlineStart);
+    padding-inline-end: var(--#{$input-group}__item--m-box--PaddingInlineEnd);
     border: var(--#{$input-group}__item--m-box--BorderWidth) solid;
-    border-block-start-color: var(--#{$input-group}__item--m-box--BorderTopColor);
-    border-block-end-color: var(--#{$input-group}__item--m-box--BorderBottomColor);
-    border-inline-start-color: var(--#{$input-group}__item--m-box--BorderLeftColor);
-    border-inline-end-color: var(--#{$input-group}__item--m-box--BorderRightColor);
+    border-block-start-color: var(--#{$input-group}__item--m-box--BorderBlockStartColor);
+    border-block-end-color: var(--#{$input-group}__item--m-box--BorderBlockEndColor);
+    border-inline-start-color: var(--#{$input-group}__item--m-box--BorderInlineStartColor);
+    border-inline-end-color: var(--#{$input-group}__item--m-box--BorderInlineEndColor);
     border-radius: var(--#{$input-group}__item--m-box--BorderRadius);
   }