@patternfly/patternfly 6.0.0-alpha.121 → 6.0.0-alpha.122

package/components/LogViewer/log-viewer.css

@@ -2,32 +2,32 @@
   --pf-v6-c-log-viewer--Height: 100%;
   --pf-v6-c-log-viewer--MaxHeight: auto;
   --pf-v6-c-log-viewer--m-line-numbers__index--Display: inline;
-  --pf-v6-c-log-viewer__header--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-log-viewer__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-log-viewer__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-log-viewer__main--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-log-viewer__main--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-log-viewer__scroll-container--Height: 37.5rem;
-  --pf-v6-c-log-viewer__scroll-container--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-log-viewer__scroll-container--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-log-viewer--m-line-numbers__main--before--Top: 0;
-  --pf-v6-c-log-viewer--m-line-numbers__main--before--Bottom: 0;
-  --pf-v6-c-log-viewer--m-line-numbers__main--before--Width: var(--pf-t--global--border--width--divider--default);
-  --pf-v6-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-log-viewer__scroll-container--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-log-viewer__scroll-container--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-log-viewer--m-line-numbers__list--before--InsetBlockStart: 0;
+  --pf-v6-c-log-viewer--m-line-numbers__list--before--InsetBlockEnd: 0;
+  --pf-v6-c-log-viewer--m-line-numbers__list--before--Width: var(--pf-t--global--border--width--divider--default);
+  --pf-v6-c-log-viewer--m-line-numbers__list--before--BackgroundColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-log-viewer__list--Height: auto;
-  --pf-v6-c-log-viewer--m-line-numbers__list--Left: var(--pf-v6-c-log-viewer__index--Width);
+  --pf-v6-c-log-viewer--m-line-numbers__list--InsetInlineStart: var(--pf-v6-c-log-viewer__index--Width);
   --pf-v6-c-log-viewer__list--FontFamily: var(--pf-t--global--font--family--mono);
   --pf-v6-c-log-viewer__list--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-log-viewer__index--Display: none;
   --pf-v6-c-log-viewer__index--Width: 4.0625rem;
-  --pf-v6-c-log-viewer__index--PaddingRight: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-log-viewer__index--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-log-viewer__index--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-log-viewer__index--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-log-viewer__index--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-log-viewer__index--BackgroundColor: transparent;
   --pf-v6-c-log-viewer--line-number-chars: 4.4;
-  --pf-v6-c-log-viewer--m-line-number-chars__index--PaddingRight: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-log-viewer--m-line-number-chars__index--Width: calc(1ch * var(--pf-v6-c-log-viewer--line-number-chars) + var(--pf-v6-c-log-viewer__index--PaddingRight) + var(--pf-v6-c-log-viewer__index--PaddingLeft));
-  --pf-v6-c-log-viewer__text--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-log-viewer__text--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-log-viewer--m-line-number-chars__index--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-log-viewer--m-line-number-chars__index--Width: calc(1ch * var(--pf-v6-c-log-viewer--line-number-chars) + var(--pf-v6-c-log-viewer__index--PaddingInlineEnd) + var(--pf-v6-c-log-viewer__index--PaddingInlineStart));
+  --pf-v6-c-log-viewer__text--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-log-viewer__text--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-log-viewer__text--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-log-viewer__text--WordBreak: break-all;
   --pf-v6-c-log-viewer__text--WhiteSpace: break-spaces;
@@ -38,10 +38,10 @@
   --pf-v6-c-log-viewer__string--m-current--Color: initial;
   --pf-v6-c-log-viewer__string--m-current--BackgroundColor: var(--pf-t--global--background--color--highlight--clicked);
   --pf-v6-c-log-viewer__timestamp--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v6-c-log-viewer--c-toolbar--PaddingTop: 0;
-  --pf-v6-c-log-viewer--c-toolbar--PaddingBottom: 0;
-  --pf-v6-c-log-viewer--c-toolbar__content--PaddingRight: 0;
-  --pf-v6-c-log-viewer--c-toolbar__content--PaddingLeft: 0;
+  --pf-v6-c-log-viewer--c-toolbar--PaddingBlockStart: 0;
+  --pf-v6-c-log-viewer--c-toolbar--PaddingBlockEnd: 0;
+  --pf-v6-c-log-viewer--c-toolbar__content--PaddingInlineEnd: 0;
+  --pf-v6-c-log-viewer--c-toolbar__content--PaddingInlineStart: 0;
   --pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--spacer: 0;
   --pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-t--global--spacer--sm);
   --pf-v6-c-log-viewer--m-dark__main--BorderWidth: 0;
@@ -58,7 +58,7 @@
   --pf-v6-c-log-viewer__main--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-log-viewer__text--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-log-viewer__index--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v6-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-log-viewer--m-line-numbers__list--before--BackgroundColor: var(--pf-t--global--border--color--default);
 }
 .pf-v6-c-log-viewer.pf-m-wrap-text {
   word-break: break-all;
@@ -71,27 +71,27 @@
 }
 .pf-v6-c-log-viewer.pf-m-line-numbers .pf-v6-c-log-viewer__list {
   position: absolute;
-  inset-inline-start: var(--pf-v6-c-log-viewer--m-line-numbers__list--Left);
+  inset-inline-start: var(--pf-v6-c-log-viewer--m-line-numbers__list--InsetInlineStart);
   inset-inline-end: 0;
 }
 .pf-v6-c-log-viewer.pf-m-line-numbers .pf-v6-c-log-viewer__list::before {
   position: absolute;
-  inset-block-start: var(--pf-v6-c-log-viewer--m-line-numbers__main--before--Top);
-  inset-block-end: var(--pf-v6-c-log-viewer--m-line-numbers__main--before--Bottom);
+  inset-block-start: var(--pf-v6-c-log-viewer--m-line-numbers__list--before--InsetBlockStart);
+  inset-block-end: var(--pf-v6-c-log-viewer--m-line-numbers__list--before--InsetBlockEnd);
   inset-inline-start: 0;
-  width: var(--pf-v6-c-log-viewer--m-line-numbers__main--before--Width);
+  width: var(--pf-v6-c-log-viewer--m-line-numbers__list--before--Width);
   content: "";
-  background: var(--pf-v6-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
+  background: var(--pf-v6-c-log-viewer--m-line-numbers__list--before--BackgroundColor);
 }
 .pf-v6-c-log-viewer.pf-m-line-number-chars {
-  --pf-v6-c-log-viewer__index--PaddingRight: var(--pf-v6-c-log-viewer--m-line-number-chars__index--PaddingRight);
+  --pf-v6-c-log-viewer__index--PaddingInlineEnd: var(--pf-v6-c-log-viewer--m-line-number-chars__index--PaddingInlineEnd);
   --pf-v6-c-log-viewer__index--Width: var(--pf-v6-c-log-viewer--m-line-number-chars__index--Width);
 }
 .pf-v6-c-log-viewer .pf-v6-c-toolbar {
-  --pf-v6-c-toolbar--PaddingTop: var(--pf-v6-c-log-viewer--c-toolbar--PaddingTop);
-  --pf-v6-c-toolbar--PaddingBottom: var(--pf-v6-c-log-viewer--c-toolbar--PaddingBottom);
-  --pf-v6-c-toolbar__content--PaddingRight: var(--pf-v6-c-log-viewer--c-toolbar__content--PaddingRight);
-  --pf-v6-c-toolbar__content--PaddingLeft: var(--pf-v6-c-log-viewer--c-toolbar__content--PaddingLeft);
+  --pf-v6-c-toolbar--PaddingBlockStart: var(--pf-v6-c-log-viewer--c-toolbar--PaddingBlockStart);
+  --pf-v6-c-toolbar--PaddingBlockEnd: var(--pf-v6-c-log-viewer--c-toolbar--PaddingBlockEnd);
+  --pf-v6-c-toolbar__content--PaddingInlineEnd: var(--pf-v6-c-log-viewer--c-toolbar__content--PaddingInlineEnd);
+  --pf-v6-c-toolbar__content--PaddingInlineStart: var(--pf-v6-c-log-viewer--c-toolbar__content--PaddingInlineStart);
   --pf-v6-c-toolbar__group--m-toggle-group--spacer: 0;
   --pf-v6-c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--m-show--spacer);
 }
@@ -100,7 +100,7 @@
 }
 
 .pf-v6-c-log-viewer__header {
-  margin-block-end: var(--pf-v6-c-log-viewer__header--MarginBottom);
+  margin-block-end: var(--pf-v6-c-log-viewer__header--MarginBlockEnd);
 }
 
 .pf-v6-c-log-viewer__main {
@@ -114,8 +114,8 @@
 .pf-v6-c-log-viewer__scroll-container {
   position: relative;
   height: var(--pf-v6-c-log-viewer__scroll-container--Height);
-  padding-block-start: var(--pf-v6-c-log-viewer__scroll-container--PaddingTop);
-  padding-block-end: var(--pf-v6-c-log-viewer__scroll-container--PaddingBottom);
+  padding-block-start: var(--pf-v6-c-log-viewer__scroll-container--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-log-viewer__scroll-container--PaddingBlockEnd);
   overflow: auto;
   will-change: transform;
   direction: ltr;
@@ -147,8 +147,8 @@
   inset-inline-start: 0;
   display: var(--pf-v6-c-log-viewer__index--Display);
   width: var(--pf-v6-c-log-viewer__index--Width);
-  padding-inline-start: var(--pf-v6-c-log-viewer__index--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-log-viewer__index--PaddingRight);
+  padding-inline-start: var(--pf-v6-c-log-viewer__index--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-log-viewer__index--PaddingInlineEnd);
   font-family: var(--pf-v6-c-log-viewer__index--FontFamily, inherit);
   font-size: var(--pf-v6-c-log-viewer__index--FontSize, inherit);
   color: var(--pf-v6-c-log-viewer__index--Color);
@@ -158,8 +158,8 @@
 
 .pf-v6-c-log-viewer__text {
   display: block;
-  padding-inline-start: var(--pf-v6-c-log-viewer__text--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-log-viewer__text--PaddingRight);
+  padding-inline-start: var(--pf-v6-c-log-viewer__text--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-log-viewer__text--PaddingInlineEnd);
   font-family: var(--pf-v6-c-log-viewer__text--FontFamily, inherit);
   font-size: var(--pf-v6-c-log-viewer__text--FontSize, inherit);
   color: var(--pf-v6-c-log-viewer__text--Color);

package/components/LogViewer/log-viewer.scss

@@ -6,7 +6,7 @@
   --#{$log-viewer}--m-line-numbers__index--Display: inline;
 
   // Header
-  --#{$log-viewer}__header--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$log-viewer}__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
 
   // Main
   --#{$log-viewer}__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -15,35 +15,35 @@
 
   // Scroll container
   --#{$log-viewer}__scroll-container--Height: #{pf-size-prem(600px)};
-  --#{$log-viewer}__scroll-container--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$log-viewer}__scroll-container--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$log-viewer}__scroll-container--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$log-viewer}__scroll-container--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
 
   // Main ::after
-  --#{$log-viewer}--m-line-numbers__main--before--Top: 0;
-  --#{$log-viewer}--m-line-numbers__main--before--Bottom: 0;
-  --#{$log-viewer}--m-line-numbers__main--before--Width: var(--pf-t--global--border--width--divider--default);
-  --#{$log-viewer}--m-line-numbers__main--before--BackgroundColor: var(--pf-t--global--border--color--default);
+  --#{$log-viewer}--m-line-numbers__list--before--InsetBlockStart: 0;
+  --#{$log-viewer}--m-line-numbers__list--before--InsetBlockEnd: 0;
+  --#{$log-viewer}--m-line-numbers__list--before--Width: var(--pf-t--global--border--width--divider--default);
+  --#{$log-viewer}--m-line-numbers__list--before--BackgroundColor: var(--pf-t--global--border--color--default);
 
   // List
   --#{$log-viewer}__list--Height: auto;
-  --#{$log-viewer}--m-line-numbers__list--Left: var(--#{$log-viewer}__index--Width);
+  --#{$log-viewer}--m-line-numbers__list--InsetInlineStart: var(--#{$log-viewer}__index--Width);
   --#{$log-viewer}__list--FontFamily: var(--pf-t--global--font--family--mono);
   --#{$log-viewer}__list--FontSize: var(--pf-t--global--font--size--body--sm);
 
   // Index
   --#{$log-viewer}__index--Display: none;
   --#{$log-viewer}__index--Width: #{pf-size-prem(65px)}; // default width
-  --#{$log-viewer}__index--PaddingRight: var(--pf-t--global--spacer--xl);
-  --#{$log-viewer}__index--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$log-viewer}__index--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --#{$log-viewer}__index--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$log-viewer}__index--Color: var(--pf-t--global--text--color--subtle);
   --#{$log-viewer}__index--BackgroundColor: transparent;
   --#{$log-viewer}--line-number-chars: 4.4; // it's close enough to the existing default
-  --#{$log-viewer}--m-line-number-chars__index--PaddingRight: var(--pf-t--global--spacer--xs);
-  --#{$log-viewer}--m-line-number-chars__index--Width: calc(1ch * var(--#{$log-viewer}--line-number-chars) + var(--#{$log-viewer}__index--PaddingRight) + var(--#{$log-viewer}__index--PaddingLeft));
+  --#{$log-viewer}--m-line-number-chars__index--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+  --#{$log-viewer}--m-line-number-chars__index--Width: calc(1ch * var(--#{$log-viewer}--line-number-chars) + var(--#{$log-viewer}__index--PaddingInlineEnd) + var(--#{$log-viewer}__index--PaddingInlineStart));
 
   // Text
-  --#{$log-viewer}__text--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$log-viewer}__text--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$log-viewer}__text--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$log-viewer}__text--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$log-viewer}__text--Color: var(--pf-t--global--text--color--regular);
   --#{$log-viewer}__text--WordBreak: break-all;
   --#{$log-viewer}__text--WhiteSpace: break-spaces;
@@ -58,10 +58,10 @@
   --#{$log-viewer}__timestamp--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
   // Toolbar
-  --#{$log-viewer}--c-toolbar--PaddingTop: 0;
-  --#{$log-viewer}--c-toolbar--PaddingBottom: 0;
-  --#{$log-viewer}--c-toolbar__content--PaddingRight: 0;
-  --#{$log-viewer}--c-toolbar__content--PaddingLeft: 0;
+  --#{$log-viewer}--c-toolbar--PaddingBlockStart: 0;
+  --#{$log-viewer}--c-toolbar--PaddingBlockEnd: 0;
+  --#{$log-viewer}--c-toolbar__content--PaddingInlineEnd: 0;
+  --#{$log-viewer}--c-toolbar__content--PaddingInlineStart: 0;
   --#{$log-viewer}--c-toolbar__group--m-toggle-group--spacer: 0;
   --#{$log-viewer}--c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-t--global--spacer--sm);
 
@@ -76,7 +76,7 @@
       --#{$log-viewer}__main--BorderColor: var(--pf-t--global--border--color--default);
       --#{$log-viewer}__text--Color: var(--pf-t--global--text--color--regular);
       --#{$log-viewer}__index--Color: var(--pf-t--global--text--color--subtle);
-      --#{$log-viewer}--m-line-numbers__main--before--BackgroundColor: var(--pf-t--global--border--color--default);
+      --#{$log-viewer}--m-line-numbers__list--before--BackgroundColor: var(--pf-t--global--border--color--default);
     }
   }
 
@@ -98,33 +98,33 @@
 
     .#{$log-viewer}__list {
       position: absolute;
-      inset-inline-start: var(--#{$log-viewer}--m-line-numbers__list--Left);
+      inset-inline-start: var(--#{$log-viewer}--m-line-numbers__list--InsetInlineStart);
       inset-inline-end: 0;
 
       // Divider
       &::before {
         position: absolute;
-        inset-block-start: var(--#{$log-viewer}--m-line-numbers__main--before--Top); // rename these vars at a breaking change
-        inset-block-end: var(--#{$log-viewer}--m-line-numbers__main--before--Bottom);
+        inset-block-start: var(--#{$log-viewer}--m-line-numbers__list--before--InsetBlockStart);
+        inset-block-end: var(--#{$log-viewer}--m-line-numbers__list--before--InsetBlockEnd);
         inset-inline-start: 0;
-        width: var(--#{$log-viewer}--m-line-numbers__main--before--Width);
+        width: var(--#{$log-viewer}--m-line-numbers__list--before--Width);
         content: "";
-        background: var(--#{$log-viewer}--m-line-numbers__main--before--BackgroundColor);
+        background: var(--#{$log-viewer}--m-line-numbers__list--before--BackgroundColor);
       }
     }
   }
 
   &.pf-m-line-number-chars {
-    --#{$log-viewer}__index--PaddingRight: var(--#{$log-viewer}--m-line-number-chars__index--PaddingRight);
+    --#{$log-viewer}__index--PaddingInlineEnd: var(--#{$log-viewer}--m-line-number-chars__index--PaddingInlineEnd);
     --#{$log-viewer}__index--Width: var(--#{$log-viewer}--m-line-number-chars__index--Width);
   }
 
   // Nested toolbar
   .#{$toolbar} {
-    --#{$toolbar}--PaddingTop: var(--#{$log-viewer}--c-toolbar--PaddingTop);
-    --#{$toolbar}--PaddingBottom: var(--#{$log-viewer}--c-toolbar--PaddingBottom);
-    --#{$toolbar}__content--PaddingRight: var(--#{$log-viewer}--c-toolbar__content--PaddingRight);
-    --#{$toolbar}__content--PaddingLeft: var(--#{$log-viewer}--c-toolbar__content--PaddingLeft);
+    --#{$toolbar}--PaddingBlockStart: var(--#{$log-viewer}--c-toolbar--PaddingBlockStart);
+    --#{$toolbar}--PaddingBlockEnd: var(--#{$log-viewer}--c-toolbar--PaddingBlockEnd);
+    --#{$toolbar}__content--PaddingInlineEnd: var(--#{$log-viewer}--c-toolbar__content--PaddingInlineEnd);
+    --#{$toolbar}__content--PaddingInlineStart: var(--#{$log-viewer}--c-toolbar__content--PaddingInlineStart);
     --#{$toolbar}__group--m-toggle-group--spacer: 0;
     --#{$toolbar}__group--m-toggle-group--m-show--spacer: var(--#{$log-viewer}--c-toolbar__group--m-toggle-group--m-show--spacer);
   }
@@ -136,7 +136,7 @@
 
 // Header
 .#{$log-viewer}__header {
-  margin-block-end: var(--#{$log-viewer}__header--MarginBottom);
+  margin-block-end: var(--#{$log-viewer}__header--MarginBlockEnd);
 }
 
 // Main
@@ -151,8 +151,8 @@
 .#{$log-viewer}__scroll-container {
   position: relative;
   height: var(--#{$log-viewer}__scroll-container--Height);
-  padding-block-start: var(--#{$log-viewer}__scroll-container--PaddingTop);
-  padding-block-end: var(--#{$log-viewer}__scroll-container--PaddingBottom);
+  padding-block-start: var(--#{$log-viewer}__scroll-container--PaddingBlockStart);
+  padding-block-end: var(--#{$log-viewer}__scroll-container--PaddingBlockEnd);
   overflow: auto;
   will-change: transform;
   direction: ltr;
@@ -167,7 +167,7 @@
 }
 
 .#{$log-viewer}__list-item {
- inset-inline-start: 0;
+  inset-inline-start: 0;
   width: 100%;
 }
 
@@ -189,8 +189,8 @@
   inset-inline-start: 0;
   display: var(--#{$log-viewer}__index--Display);
   width: var(--#{$log-viewer}__index--Width);
-  padding-inline-start: var(--#{$log-viewer}__index--PaddingLeft);
-  padding-inline-end: var(--#{$log-viewer}__index--PaddingRight);
+  padding-inline-start: var(--#{$log-viewer}__index--PaddingInlineStart);
+  padding-inline-end: var(--#{$log-viewer}__index--PaddingInlineEnd);
   font-family: var(--#{$log-viewer}__index--FontFamily, inherit);
   font-size: var(--#{$log-viewer}__index--FontSize, inherit);
   color: var(--#{$log-viewer}__index--Color);
@@ -201,8 +201,8 @@
 // Text
 .#{$log-viewer}__text {
   display: block;
-  padding-inline-start: var(--#{$log-viewer}__text--PaddingLeft);
-  padding-inline-end: var(--#{$log-viewer}__text--PaddingRight);
+  padding-inline-start: var(--#{$log-viewer}__text--PaddingInlineStart);
+  padding-inline-end: var(--#{$log-viewer}__text--PaddingInlineEnd);
   font-family: var(--#{$log-viewer}__text--FontFamily, inherit);
   font-size: var(--#{$log-viewer}__text--FontSize, inherit);
   color: var(--#{$log-viewer}__text--Color);

package/components/Login/login.css

@@ -1,57 +1,57 @@
 :where(:root, .pf-v6-c-login) {
-  --pf-v6-c-login--PaddingTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-login--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-login--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-login--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-login__container--xl--GridColumnGap: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-login__container--MaxWidth: 31.25rem;
   --pf-v6-c-login__container--xl--MaxWidth: none;
-  --pf-v6-c-login__container--PaddingLeft: 6.125rem;
-  --pf-v6-c-login__container--PaddingRight: 6.125rem;
+  --pf-v6-c-login__container--PaddingInlineStart: 6.125rem;
+  --pf-v6-c-login__container--PaddingInlineEnd: 6.125rem;
   --pf-v6-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
-  --pf-v6-c-login__header--MarginBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__header--PaddingLeft: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__header--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__header--xl--MarginBottom: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-login__header--xl--MarginTop: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-login__header--c-brand--MarginBottom: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-login__header--c-brand--xl--MarginBottom: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-login__header--MarginBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-login__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-login__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-login__header--xl--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-login__header--xl--MarginBlockStart: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-login__header--c-brand--xl--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-login__main--MarginBottom: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
-  --pf-v6-c-login__main-header--PaddingTop: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-login__main-header--PaddingRight: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-login__main-header--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__main-header--PaddingLeft: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-login__main-header--md--PaddingRight: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-login__main-header--md--PaddingLeft: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-login__main-header--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-login__main-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-login__main-header--md--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-login__main-header--md--PaddingInlineStart: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-login__main-header--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-login__main-header--RowGap: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__main-header-desc--MarginBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-login__main-header-desc--md--MarginBottom: 0;
+  --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-login__main-header-desc--md--MarginBlockEnd: 0;
   --pf-v6-c-login__main-header-desc--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-login__main-body--PaddingRight: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-login__main-body--PaddingBottom: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-login__main-body--PaddingLeft: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-login__main-body--md--PaddingRight: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-login__main-body--md--PaddingLeft: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-login__main-footer--PaddingBottom: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-login__main-footer--c-title--MarginBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__main-footer-links--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-login__main-footer-links--PaddingRight: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-login__main-footer-links--PaddingBottom: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-login__main-footer-links--PaddingLeft: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-login__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-login__main-body--md--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-login__main-body--md--PaddingInlineStart: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-login__main-footer--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-login__main-footer--c-title--MarginBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-login__main-footer-links--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-login__main-footer-links--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-login__main-footer-links--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-login__main-footer-links--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-login__main-footer-links--Gap: var(--pf-t--global--spacer--md);
   --pf-v6-c-login__main-footer-links-item--c-button--FontSize: var(--pf-t--global--icon--size--xl);
-  --pf-v6-c-login__main-footer-band--PaddingTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-login__main-footer-band--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__main-footer-band--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-login__main-footer-band--PaddingLeft: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__main-footer-band--BorderTopColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-login__main-footer-band--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
-  --pf-v6-c-login__main-footer-band-item--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__footer--PaddingLeft: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__footer--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__footer--c-list--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__footer--c-list--xl--PaddingTop: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-login__main-footer-band--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-login__main-footer-band--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-login__main-footer-band--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-login__main-footer-band--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-login__main-footer-band--BorderBlockStartColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-login__main-footer-band--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v6-c-login__main-footer-band-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-login__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-login__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
 }
 @media (min-width: 1200px) {
   :where(:root, .pf-v6-c-login) {
@@ -60,43 +60,43 @@
 }
 @media (min-width: 576px) {
   :where(:root, .pf-v6-c-login) {
-    --pf-v6-c-login__header--PaddingRight: 0;
-    --pf-v6-c-login__header--PaddingLeft: 0;
+    --pf-v6-c-login__header--PaddingInlineEnd: 0;
+    --pf-v6-c-login__header--PaddingInlineStart: 0;
   }
 }
 @media (min-width: 1200px) {
   :where(:root, .pf-v6-c-login) {
-    --pf-v6-c-login__header--MarginBottom: var(--pf-v6-c-login__header--xl--MarginBottom);
-    --pf-v6-c-login__header--c-brand--MarginBottom: var(--pf-v6-c-login__header--c-brand--xl--MarginBottom);
+    --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
+    --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
   }
 }
 @media (min-width: 1200px) {
   :where(:root, .pf-v6-c-login) {
-    --pf-v6-c-login__main--MarginBottom: 0;
+    --pf-v6-c-login__main--MarginBlockEnd: 0;
   }
 }
 @media (min-width: 768px) {
   :where(:root, .pf-v6-c-login) {
-    --pf-v6-c-login__main-header--PaddingRight: var(--pf-v6-c-login__main-header--md--PaddingRight);
-    --pf-v6-c-login__main-header--PaddingLeft: var(--pf-v6-c-login__main-header--md--PaddingLeft);
-    --pf-v6-c-login__main-header-desc--MarginBottom: var(--pf-v6-c-login__main-header-desc--md--MarginBottom);
+    --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
+    --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
+    --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-v6-c-login__main-header-desc--md--MarginBlockEnd);
   }
 }
 @media (min-width: 768px) {
   :where(:root, .pf-v6-c-login) {
-    --pf-v6-c-login__main-body--PaddingRight: var(--pf-v6-c-login__main-body--md--PaddingRight);
-    --pf-v6-c-login__main-body--PaddingLeft: var(--pf-v6-c-login__main-body--md--PaddingLeft);
+    --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
+    --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
   }
 }
 @media (min-width: 576px) {
   :where(:root, .pf-v6-c-login) {
-    --pf-v6-c-login__footer--PaddingRight: 0;
-    --pf-v6-c-login__footer--PaddingLeft: 0;
+    --pf-v6-c-login__footer--PaddingInlineEnd: 0;
+    --pf-v6-c-login__footer--PaddingInlineStart: 0;
   }
 }
 @media (min-width: 1200px) {
   :where(:root, .pf-v6-c-login) {
-    --pf-v6-c-login__footer--c-list--PaddingTop: var(--pf-v6-c-login__footer--c-list--xl--PaddingTop);
+    --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-v6-c-login__footer--c-list--xl--PaddingBlockStart);
   }
 }
 
@@ -104,8 +104,8 @@
   display: flex;
   justify-content: center;
   min-height: 100vh;
-  padding-block-start: var(--pf-v6-c-login--PaddingTop);
-  padding-block-end: var(--pf-v6-c-login--PaddingBottom);
+  padding-block-start: var(--pf-v6-c-login--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-login--PaddingBlockEnd);
 }
 @media (min-width: 576px) {
   .pf-v6-c-login {
@@ -124,37 +124,37 @@
     grid-template-columns: var(--pf-v6-c-login__container--xl--GridTemplateColumns);
     grid-column-gap: var(--pf-v6-c-login__container--xl--GridColumnGap);
     justify-content: center;
-    padding-inline-start: var(--pf-v6-c-login__container--PaddingLeft);
-    padding-inline-end: var(--pf-v6-c-login__container--PaddingRight);
+    padding-inline-start: var(--pf-v6-c-login__container--PaddingInlineStart);
+    padding-inline-end: var(--pf-v6-c-login__container--PaddingInlineEnd);
   }
 }
 
 .pf-v6-c-login__header {
   grid-area: header;
-  padding-inline-start: var(--pf-v6-c-login__header--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-login__header--PaddingRight);
+  padding-inline-start: var(--pf-v6-c-login__header--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-login__header--PaddingInlineEnd);
 }
 @media (min-width: 1200px) {
   .pf-v6-c-login__header {
-    margin-block-start: var(--pf-v6-c-login__header--xl--MarginTop);
+    margin-block-start: var(--pf-v6-c-login__header--xl--MarginBlockStart);
   }
 }
 .pf-v6-c-login__header .pf-v6-c-brand {
-  margin-block-end: var(--pf-v6-c-login__header--c-brand--MarginBottom);
+  margin-block-end: var(--pf-v6-c-login__header--c-brand--MarginBlockEnd);
 }
 
 .pf-v6-c-login__main {
   grid-area: main;
   align-self: start;
-  margin-block-end: var(--pf-v6-c-login__main--MarginBottom);
+  margin-block-end: var(--pf-v6-c-login__main--MarginBlockEnd);
   background-color: var(--pf-v6-c-login__main--BackgroundColor);
   border-radius: var(--pf-v6-c-login__main--BorderRadius);
 }
 .pf-v6-c-login__main > :first-child:not(.pf-v6-c-login__main-header) {
-  padding-block-start: var(--pf-v6-c-login__main-header--PaddingTop);
+  padding-block-start: var(--pf-v6-c-login__main-header--PaddingBlockStart);
 }
 .pf-v6-c-login__main > :last-child:not(.pf-v6-c-login__main-footer) {
-  padding-block-end: var(--pf-v6-c-login__main-footer--PaddingBottom);
+  padding-block-end: var(--pf-v6-c-login__main-footer--PaddingBlockEnd);
 }
 
 .pf-v6-c-login__main-header {
@@ -163,10 +163,10 @@
   row-gap: var(--pf-v6-c-login__main-header--RowGap);
   column-gap: var(--pf-v6-c-login__main-header--ColumnGap);
   align-items: center;
-  padding-block-start: var(--pf-v6-c-login__main-header--PaddingTop);
-  padding-block-end: var(--pf-v6-c-login__main-header--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-login__main-header--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-login__main-header--PaddingRight);
+  padding-block-start: var(--pf-v6-c-login__main-header--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-login__main-header--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-login__main-header--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-login__main-header--PaddingInlineEnd);
 }
 @media (min-width: 768px) {
   .pf-v6-c-login__main-header {
@@ -194,14 +194,14 @@
 
 .pf-v6-c-login__main-header-desc {
   grid-column: 1/-1;
-  margin-block-end: var(--pf-v6-c-login__main-header-desc--MarginBottom);
+  margin-block-end: var(--pf-v6-c-login__main-header-desc--MarginBlockEnd);
   font-size: var(--pf-v6-c-login__main-header-desc--FontSize);
 }
 
 .pf-v6-c-login__main-body {
-  padding-block-end: var(--pf-v6-c-login__main-body--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-login__main-body--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-login__main-body--PaddingRight);
+  padding-block-end: var(--pf-v6-c-login__main-body--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-login__main-body--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-login__main-body--PaddingInlineEnd);
 }
 
 .pf-v6-c-login__main-footer {
@@ -209,7 +209,7 @@
   flex-wrap: wrap;
 }
 .pf-v6-c-login__main-footer .pf-v6-c-title {
-  margin-block-end: var(--pf-v6-c-login__main-footer--c-title--MarginBottom);
+  margin-block-end: var(--pf-v6-c-login__main-footer--c-title--MarginBlockEnd);
   text-align: center;
 }
 .pf-v6-c-login__main-footer > * {
@@ -221,10 +221,10 @@
   flex-wrap: wrap;
   gap: var(--pf-v6-c-login__main-footer-links--Gap);
   justify-content: center;
-  padding-block-start: var(--pf-v6-c-login__main-footer-links--PaddingTop);
-  padding-block-end: var(--pf-v6-c-login__main-footer-links--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-login__main-footer-links--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-login__main-footer-links--PaddingRight);
+  padding-block-start: var(--pf-v6-c-login__main-footer-links--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-login__main-footer-links--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-login__main-footer-links--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-login__main-footer-links--PaddingInlineEnd);
 }
 
 .pf-v6-c-login__main-footer-links-item .pf-v6-c-button {
@@ -232,25 +232,25 @@
 }
 
 .pf-v6-c-login__main-footer-band {
-  padding-block-start: var(--pf-v6-c-login__main-footer-band--PaddingTop);
-  padding-block-end: var(--pf-v6-c-login__main-footer-band--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-login__main-footer-band--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-login__main-footer-band--PaddingRight);
+  padding-block-start: var(--pf-v6-c-login__main-footer-band--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-login__main-footer-band--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-login__main-footer-band--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-login__main-footer-band--PaddingInlineEnd);
   text-align: center;
-  border-block-start: var(--pf-v6-c-login__main-footer-band--BorderTopWidth) solid var(--pf-v6-c-login__main-footer-band--BorderTopColor);
+  border-block-start: var(--pf-v6-c-login__main-footer-band--BorderBlockStartWidth) solid var(--pf-v6-c-login__main-footer-band--BorderBlockStartColor);
 }
 .pf-v6-c-login__main-footer-band > * + * {
-  padding-block-start: var(--pf-v6-c-login__main-footer-band-item--PaddingTop);
+  padding-block-start: var(--pf-v6-c-login__main-footer-band-item--PaddingBlockStart);
 }
 
 .pf-v6-c-login__footer {
   grid-area: footer;
-  padding-inline-start: var(--pf-v6-c-login__footer--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-login__footer--PaddingRight);
+  padding-inline-start: var(--pf-v6-c-login__footer--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-login__footer--PaddingInlineEnd);
 }
 .pf-v6-c-login__footer .pf-v6-c-list a {
   color: unset;
 }
 .pf-v6-c-login__footer .pf-v6-c-list:not(:only-child) {
-  padding-block-start: var(--pf-v6-c-login__footer--c-list--PaddingTop);
+  padding-block-start: var(--pf-v6-c-login__footer--c-list--PaddingBlockStart);
 }