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

package/components/ActionList/action-list.scss

@@ -1,12 +1,14 @@
-:where(:root) {
-  --#{$action-list}--RowGap: var(--pf-t--global--spacer--sm);
-  --#{$action-list}--ColumnGap: var(--pf-t--global--spacer--2xl);
+@use '../../sass-utilities' as *;
+
+@include pf-root($action-list) {
+  --#{$action-list}--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+  --#{$action-list}--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal);
 
   // * Action list group
-  --#{$action-list}__group--ColumnGap: var(--pf-t--global--spacer--md);
+  --#{$action-list}__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
 
   // * Action list icons
-  --#{$action-list}--m-icons--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$action-list}--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
 }
 
 // - Action list - Action list group

package/components/Alert/alert-group.css

@@ -1,15 +1,16 @@
+:root,
 .pf-v6-c-alert-group {
-  --pf-v6-c-alert-group__item--MarginTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-alert-group--m-toast--Top: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-alert-group--m-toast--Right: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-alert-group__item--MarginBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
+  --pf-v6-c-alert-group--m-toast--InsetBlockStart: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
   --pf-v6-c-alert-group--m-toast--MaxWidth: 37.5rem;
-  --pf-v6-c-alert-group--m-toast--ZIndex: var(--pf-v6-global--ZIndex--2xl);
+  --pf-v6-c-alert-group--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
   --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
   --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-alert-group__overflow-button--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-alert-group__overflow-button--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-alert-group__overflow-button--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-alert-group__overflow-button--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-alert-group__overflow-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-alert-group__overflow-button--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-alert-group__overflow-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-alert-group__overflow-button--Color: var(--pf-t--global--text--color--link--default);
   --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
@@ -21,41 +22,93 @@
   --pf-v6-c-alert-group__overflow-button--active--Color: var(--pf-t--global--text--color--link--hover);
   --pf-v6-c-alert-group__overflow-button--active--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
 }
+
 .pf-v6-c-alert-group > * + * {
-  margin-block-start: var(--pf-v6-c-alert-group__item--MarginTop);
+  margin-block-start: var(--pf-v6-c-alert-group__item--MarginBlockStart);
 }
 .pf-v6-c-alert-group.pf-m-toast {
   position: fixed;
-  inset-block-start: var(--pf-v6-c-alert-group--m-toast--Top);
-  inset-inline-end: var(--pf-v6-c-alert-group--m-toast--Right);
+  inset-block-start: var(--pf-v6-c-alert-group--m-toast--InsetBlockStart);
+  inset-inline-end: var(--pf-v6-c-alert-group--m-toast--InsetInlineEnd);
   z-index: var(--pf-v6-c-alert-group--m-toast--ZIndex);
-  width: calc(100% - var(--pf-v6-c-alert-group--m-toast--Right) * 2);
+  width: calc(100% - var(--pf-v6-c-alert-group--m-toast--InsetInlineEnd) * 2);
   max-width: var(--pf-v6-c-alert-group--m-toast--MaxWidth);
 }
 
 .pf-v6-c-alert-group__overflow-button {
   position: relative;
   width: 100%;
-  padding-block-start: var(--pf-v6-c-alert-group__overflow-button--PaddingTop);
-  padding-block-end: var(--pf-v6-c-alert-group__overflow-button--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-alert-group__overflow-button--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-alert-group__overflow-button--PaddingRight);
+  padding-block-start: var(--pf-v6-c-alert-group__overflow-button--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-alert-group__overflow-button--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-alert-group__overflow-button--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-alert-group__overflow-button--PaddingInlineEnd);
   color: var(--pf-v6-c-alert-group__overflow-button--Color);
   background-color: var(--pf-v6-c-alert-group__overflow-button--BackgroundColor);
   border-width: var(--pf-v6-c-alert-group__overflow-button--BorderWidth);
   border-radius: var(--pf-v6-c-alert-group__overflow-button--BorderRadius);
   box-shadow: var(--pf-v6-c-alert-group__overflow-button--BoxShadow);
 }
-.pf-v6-c-alert-group__overflow-button:hover {
+
+.pf-v6-c-alert-group__item {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
+  transform: translateX(0) translateY(0);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-alert-group__item {
+    transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
+  }
+  .pf-v6-c-alert-group__item .pf-v6-c-alert {
+    transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
+  }
+}
+.pf-v6-c-alert-group__item.pf-m-offstage-top {
+  grid-template-rows: 0fr;
+  margin-block: 0;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(-100%);
+}
+.pf-v6-c-alert-group__item.pf-m-offstage-top .pf-v6-c-alert {
+  min-height: 0;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  border-width: 0;
+}
+.pf-v6-c-alert-group__item.pf-m-offstage-right {
+  grid-template-rows: 0fr;
+  margin-block: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
+  transform: translateX(100%);
+}
+.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
+  min-height: 0;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  border-width: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-alert-group__item.pf-m-offstage-right {
+    transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
+  }
+  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
+    transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
+  }
+}
+.pf-v6-c-alert-group__item:hover {
   --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
   --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
   --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow);
 }
-.pf-v6-c-alert-group__overflow-button:focus {
+.pf-v6-c-alert-group__item:focus {
   --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color);
   --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow);
 }
-.pf-v6-c-alert-group__overflow-button:active {
+.pf-v6-c-alert-group__item:active {
   --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color);
   --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
 }

package/components/Alert/alert-group.scss

@@ -1,23 +1,23 @@
-// @debug $alert-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
 // Tabs
-.#{$alert-group} {
+@include pf-root($alert-group) {
   // Alert group variables
-  --#{$alert-group}__item--MarginTop: var(--pf-t--global--spacer--md);
+  --#{$alert-group}__item--MarginBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
 
   // Toast variables
-  --#{$alert-group}--m-toast--Top: var(--pf-t--global--spacer--2xl);
-  --#{$alert-group}--m-toast--Right: var(--pf-t--global--spacer--xl);
+  --#{$alert-group}--m-toast--InsetBlockStart: var(--pf-t--global--spacer--2xl);
+  --#{$alert-group}--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
   --#{$alert-group}--m-toast--MaxWidth: #{pf-size-prem(600px)};
-  --#{$alert-group}--m-toast--ZIndex: var(--#{$pf-global}--ZIndex--2xl);
+  --#{$alert-group}--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
 
   // Overflow button
   --#{$alert-group}__overflow-button--BorderWidth: 0;
   --#{$alert-group}__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
-  --#{$alert-group}__overflow-button--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$alert-group}__overflow-button--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$alert-group}__overflow-button--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$alert-group}__overflow-button--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$alert-group}__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$alert-group}__overflow-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$alert-group}__overflow-button--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$alert-group}__overflow-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$alert-group}__overflow-button--Color: var(--pf-t--global--text--color--link--default);
   --#{$alert-group}__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --#{$alert-group}__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
@@ -28,19 +28,21 @@
   --#{$alert-group}__overflow-button--focus--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
   --#{$alert-group}__overflow-button--active--Color: var(--pf-t--global--text--color--link--hover);
   --#{$alert-group}__overflow-button--active--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
+}
 
+.#{$alert-group} {
   // Spacing between alerts
   > * + * {
-    margin-block-start: var(--#{$alert-group}__item--MarginTop);
+    margin-block-start: var(--#{$alert-group}__item--MarginBlockStart);
   }
 
   // Toast positioning modifier
   &.pf-m-toast {
     position: fixed;
-    inset-block-start: var(--#{$alert-group}--m-toast--Top);
-    inset-inline-end: var(--#{$alert-group}--m-toast--Right);
+    inset-block-start: var(--#{$alert-group}--m-toast--InsetBlockStart);
+    inset-inline-end: var(--#{$alert-group}--m-toast--InsetInlineEnd);
     z-index: var(--#{$alert-group}--m-toast--ZIndex);
-    width: calc(100% - calc(var(--#{$alert-group}--m-toast--Right) * 2));
+    width: calc(100% - calc(var(--#{$alert-group}--m-toast--InsetInlineEnd) * 2));
     max-width: var(--#{$alert-group}--m-toast--MaxWidth);
   }
 }
@@ -48,15 +50,100 @@
 .#{$alert-group}__overflow-button {
   position: relative;
   width: 100%;
-  padding-block-start: var(--#{$alert-group}__overflow-button--PaddingTop);
-  padding-block-end: var(--#{$alert-group}__overflow-button--PaddingBottom);
-  padding-inline-start: var(--#{$alert-group}__overflow-button--PaddingLeft);
-  padding-inline-end: var(--#{$alert-group}__overflow-button--PaddingRight);
+  padding-block-start: var(--#{$alert-group}__overflow-button--PaddingBlockStart);
+  padding-block-end: var(--#{$alert-group}__overflow-button--PaddingBlockEnd);
+  padding-inline-start: var(--#{$alert-group}__overflow-button--PaddingInlineStart);
+  padding-inline-end: var(--#{$alert-group}__overflow-button--PaddingInlineEnd);
   color: var(--#{$alert-group}__overflow-button--Color);
   background-color: var(--#{$alert-group}__overflow-button--BackgroundColor);
   border-width: var(--#{$alert-group}__overflow-button--BorderWidth);
   border-radius: var(--#{$alert-group}__overflow-button--BorderRadius);
   box-shadow: var(--#{$alert-group}__overflow-button--BoxShadow);
+}
+
+.#{$alert-group}__item {
+  // Properties to be transitioned on entry/exit
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+
+  // This transition will happen when the item is added (.pf-m-offstage-top is removed)
+  // Reduced motion by default
+  // transparency change only
+  transition: 
+  opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
+  transform: translateX(0) translateY(0);
+
+  // This transition will happen when the item is added (.pf-m-offstage-top is removed)
+  // give it height, then slide it down into place
+  // These values are for regular motion
+  @media screen and (prefers-reduced-motion: no-preference) {
+    transition: 
+      opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), 
+      transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), 
+      grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, 
+      margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
+
+      & .pf-v6-c-alert {
+        transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
+      }
+  }
+
+  // This class is used BEFORE the alert item comes into the list
+  &.pf-m-offstage-top {
+    // make the item have no height and position it up above
+    grid-template-rows: 0fr;
+    margin-block: 0;
+    overflow: hidden;
+    opacity: 0;
+    transform: translateY(-100%);
+
+    & .pf-v6-c-alert {
+      // make it small when it's first created off to the top
+      min-height: 0;
+      padding-block-start: 0;
+      padding-block-end: 0;
+      border-width: 0;
+    }
+  }
+
+  // Add this class before removing an alert
+  // TODO auto dismissal should be the same motion, but has a different duration
+  &.pf-m-offstage-right {
+    grid-template-rows: 0fr; // collapse vertically to bring up the items below
+    margin-block: 0;
+    overflow: hidden;
+    opacity: 0;
+
+    // This transition will happen when the item is removed
+    // Reduced motion by default
+    // transparency change only
+    transition: 
+      opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
+    transform: translateX(100%);
+
+    & .pf-v6-c-alert {
+      min-height: 0;
+      padding-block-start: 0;
+      padding-block-end: 0;
+      border-width: 0;
+    }
+
+    // This transition will happen when the item is added (.pf-m-offstage-top is removed)
+    // give it height, then slide it down into place
+    // These values are for regular motion
+    @media screen and (prefers-reduced-motion: no-preference) {
+      transition: 
+        transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, 
+        opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s,
+        margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), 
+        grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
+
+        & .pf-v6-c-alert {
+          transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
+        }
+    }
+  }
 
   &:hover {
     --#{$alert-group}__overflow-button--Color: var(--#{$alert-group}__overflow-button--hover--Color);

package/components/Alert/alert.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+.pf-v6-c-alert {
   --pf-v6-c-alert--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --pf-v6-c-alert--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-alert--GridTemplateColumns: max-content 1fr max-content;
@@ -9,36 +10,34 @@
   --pf-v6-c-alert--BorderWidth: var(--pf-t--global--border--width--box--status--default);
   --pf-v6-c-alert--BorderColor: transparent;
   --pf-v6-c-alert--BorderRadius: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-alert--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-alert--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-alert--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-alert--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-alert--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-alert--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-alert__toggle--MarginTop: calc(-1 * var(--pf-v6-global--spacer--form-element) - 0.0625rem);
-  --pf-v6-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-v6-global--spacer--form-element));
-  --pf-v6-c-alert__toggle--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-alert__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
+  --pf-v6-c-alert__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
+  --pf-v6-c-alert__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-alert__toggle-icon--Rotate: 0;
-  --pf-v6-c-alert__toggle-icon--Transition: var(--pf-v6-global--Transition);
+  --pf-v6-c-alert__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-alert__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
   --pf-v6-c-alert__icon--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v6-c-alert__icon--MarginTop: 0.25rem;
-  --pf-v6-c-alert__icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-alert__icon--MarginBlockStart: 0.25rem;
+  --pf-v6-c-alert__icon--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md);
-  --pf-v6-c-alert__title--FontFamily: var(--pf-t--global--font--family--heading);
-  --pf-v6-c-alert__title--FontSize: var(--pf-t--global--font--size--heading--xs);
-  --pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v6-c-alert__title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-alert__title--max-lines: 1;
-  --pf-v6-c-alert__action--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
-  --pf-v6-c-alert__action--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
+  --pf-v6-c-alert__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-alert__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-alert__action--TranslateY: 0.125rem;
-  --pf-v6-c-alert__action--MarginRight: calc(var(--pf-t--global--spacer--sm) * -1);
-  --pf-v6-c-alert__description--PaddingTop: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-alert__action-group--PaddingTop-base: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-alert__action-group--PaddingTop: var(--pf-v6-c-alert__action-group--PaddingTop-base);
-  --pf-v6-c-alert__description--action-group--PaddingTop-base: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-alert__description--action-group--PaddingTop: var(--pf-v6-c-alert__description--action-group--PaddingTop-base);
-  --pf-v6-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-alert__action--MarginInlineEnd: calc(var(--pf-t--global--spacer--sm) * -1);
+  --pf-v6-c-alert__description--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-alert__action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__action-group--PaddingBlockStart-base);
+  --pf-v6-c-alert__description--action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart-base);
+  --pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
   --pf-v6-c-alert--m-custom--BorderColor: var(--pf-t--global--border--color--status--custom--default);
   --pf-v6-c-alert--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
   --pf-v6-c-alert--m-custom__title--Color: var(--pf-t--global--text--color--regular);
@@ -58,18 +57,18 @@
   --pf-v6-c-alert--m-inline--BoxShadow: none;
   --pf-v6-c-alert--m-inline--m-plain--BorderWidth: 0;
   --pf-v6-c-alert--m-inline--m-plain--BackgroundColor: transparent;
-  --pf-v6-c-alert--m-inline--m-plain--PaddingTop: 0;
-  --pf-v6-c-alert--m-inline--m-plain--PaddingRight: 0;
-  --pf-v6-c-alert--m-inline--m-plain--PaddingBottom: 0;
-  --pf-v6-c-alert--m-inline--m-plain--PaddingLeft: 0;
+  --pf-v6-c-alert--m-inline--m-plain--PaddingBlockStart: 0;
+  --pf-v6-c-alert--m-inline--m-plain--PaddingInlineEnd: 0;
+  --pf-v6-c-alert--m-inline--m-plain--PaddingBlockEnd: 0;
+  --pf-v6-c-alert--m-inline--m-plain--PaddingInlineStart: 0;
   --pf-v6-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content;
   --pf-v6-c-alert--m-expandable--GridTemplateAreas:
     "toggle icon title action"
     ". . description description"
     ". . actiongroup actiongroup";
-  --pf-v6-c-alert--m-expandable__description--action-group--PaddingTop: var(--pf-v6-c-alert__action-group--PaddingTop-base);
+  --pf-v6-c-alert--m-expandable__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__action-group--PaddingBlockStart-base);
   --pf-v6-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
-  --pf-v6-c-alert--m-expanded__description--action-group--PaddingTop: var(--pf-v6-c-alert__description--action-group--PaddingTop-base);
+  --pf-v6-c-alert--m-expanded__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart-base);
 }
 
 .pf-v6-c-alert {
@@ -77,10 +76,10 @@
   display: grid;
   grid-template-areas: var(--pf-v6-c-alert--GridTemplateAreas);
   grid-template-columns: var(--pf-v6-c-alert--GridTemplateColumns);
-  padding-block-start: var(--pf-v6-c-alert--PaddingTop);
-  padding-block-end: var(--pf-v6-c-alert--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-alert--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-alert--PaddingRight);
+  padding-block-start: var(--pf-v6-c-alert--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-alert--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-alert--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-alert--PaddingInlineEnd);
   font-size: var(--pf-v6-c-alert--FontSize);
   background-color: var(--pf-v6-c-alert--BackgroundColor);
   border: var(--pf-v6-c-alert--BorderWidth) solid var(--pf-v6-c-alert--BorderColor);
@@ -119,30 +118,30 @@
 .pf-v6-c-alert.pf-m-plain {
   --pf-v6-c-alert--BorderWidth: var(--pf-v6-c-alert--m-inline--m-plain--BorderWidth);
   --pf-v6-c-alert--BackgroundColor: var(--pf-v6-c-alert--m-inline--m-plain--BackgroundColor);
-  --pf-v6-c-alert--PaddingTop: var(--pf-v6-c-alert--m-inline--m-plain--PaddingTop);
-  --pf-v6-c-alert--PaddingRight: var(--pf-v6-c-alert--m-inline--m-plain--PaddingRight);
-  --pf-v6-c-alert--PaddingBottom: var(--pf-v6-c-alert--m-inline--m-plain--PaddingBottom);
-  --pf-v6-c-alert--PaddingLeft: var(--pf-v6-c-alert--m-inline--m-plain--PaddingLeft);
+  --pf-v6-c-alert--PaddingBlockStart: var(--pf-v6-c-alert--m-inline--m-plain--PaddingBlockStart);
+  --pf-v6-c-alert--PaddingInlineEnd: var(--pf-v6-c-alert--m-inline--m-plain--PaddingInlineEnd);
+  --pf-v6-c-alert--PaddingBlockEnd: var(--pf-v6-c-alert--m-inline--m-plain--PaddingBlockEnd);
+  --pf-v6-c-alert--PaddingInlineStart: var(--pf-v6-c-alert--m-inline--m-plain--PaddingInlineStart);
 }
 .pf-v6-c-alert.pf-m-expandable {
   --pf-v6-c-alert--GridTemplateColumns: var(--pf-v6-c-alert--m-expandable--GridTemplateColumns);
   --pf-v6-c-alert--GridTemplateAreas: var(--pf-v6-c-alert--m-expandable--GridTemplateAreas);
-  --pf-v6-c-alert__description--action-group--PaddingTop: var(--pf-v6-c-alert--m-expandable__description--action-group--PaddingTop);
+  --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert--m-expandable__description--action-group--PaddingBlockStart);
 }
 .pf-v6-c-alert.pf-m-expanded {
   --pf-v6-c-alert__toggle-icon--Rotate: var(--pf-v6-c-alert--m-expanded__toggle-icon--Rotate);
-  --pf-v6-c-alert__description--action-group--PaddingTop: var(--pf-v6-c-alert--m-expanded__description--action-group--PaddingTop);
+  --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert--m-expanded__description--action-group--PaddingBlockStart);
 }
 
 .pf-v6-c-alert__toggle {
-  margin-block-start: var(--pf-v6-c-alert__toggle--MarginTop);
-  margin-block-end: var(--pf-v6-c-alert__toggle--MarginBottom);
-  margin-inline-end: var(--pf-v6-c-alert__toggle--MarginRight);
+  margin-block-start: var(--pf-v6-c-alert__toggle--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-alert__toggle--MarginBlockEnd);
+  margin-inline-end: var(--pf-v6-c-alert__toggle--MarginInlineEnd);
 }
 
 .pf-v6-c-alert__toggle-icon {
   display: inline-block;
-  transition: var(--pf-v6-c-alert__toggle-icon--Transition);
+  transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
@@ -152,18 +151,15 @@
 .pf-v6-c-alert__icon {
   display: flex;
   grid-area: icon;
-  margin-block-start: var(--pf-v6-c-alert__icon--MarginTop);
-  margin-inline-end: var(--pf-v6-c-alert__icon--MarginRight);
+  margin-block-start: var(--pf-v6-c-alert__icon--MarginBlockStart);
+  margin-inline-end: var(--pf-v6-c-alert__icon--MarginInlineEnd);
   font-size: var(--pf-v6-c-alert__icon--FontSize);
   color: var(--pf-v6-c-alert__icon--Color);
 }
 
 .pf-v6-c-alert__title {
   grid-area: title;
-  font-family: var(--pf-v6-c-alert__title--FontFamily);
-  font-size: var(--pf-v6-c-alert__title--FontSize);
   font-weight: var(--pf-v6-c-alert__title--FontWeight);
-  line-height: var(--pf-v6-c-alert__title--LineHeight);
   color: var(--pf-v6-c-alert__title--Color);
   word-break: break-word;
 }
@@ -176,18 +172,18 @@
 
 .pf-v6-c-alert__description {
   grid-area: description;
-  padding-block-start: var(--pf-v6-c-alert__description--PaddingTop);
+  padding-block-start: var(--pf-v6-c-alert__description--PaddingBlockStart);
   word-break: break-word;
 }
 .pf-v6-c-alert__description + .pf-v6-c-alert__action-group {
-  --pf-v6-c-alert__action-group--PaddingTop: var(--pf-v6-c-alert__description--action-group--PaddingTop);
+  --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart);
 }
 
 .pf-v6-c-alert__action {
   grid-area: action;
-  margin-block-start: var(--pf-v6-c-alert__action--MarginTop);
-  margin-block-end: var(--pf-v6-c-alert__action--MarginBottom);
-  margin-inline-end: var(--pf-v6-c-alert__action--MarginRight);
+  margin-block-start: var(--pf-v6-c-alert__action--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-alert__action--MarginBlockEnd);
+  margin-inline-end: var(--pf-v6-c-alert__action--MarginInlineEnd);
   transform: translateY(var(--pf-v6-c-alert__action--TranslateY));
 }
 .pf-v6-c-alert__action > .pf-v6-c-button {
@@ -196,11 +192,8 @@
 
 .pf-v6-c-alert__action-group {
   grid-area: actiongroup;
-  padding-block-start: var(--pf-v6-c-alert__action-group--PaddingTop);
-}
-.pf-v6-c-alert__action-group > .pf-v6-c-button {
-  --pf-v6-c-button--m-link--m-inline--hover--TextDecoration: none;
+  padding-block-start: var(--pf-v6-c-alert__action-group--PaddingBlockStart);
 }
 .pf-v6-c-alert__action-group > .pf-v6-c-button:not(:last-child) {
-  margin-inline-end: var(--pf-v6-c-alert__action-group__c-button--not-last-child--MarginRight);
+  margin-inline-end: var(--pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd);
 }