@patternfly/react-styles 6.0.0-alpha.20 → 6.0.0-alpha.21

package/css/components/LogViewer/log-viewer.css

@@ -1,64 +1,49 @@
-.pf-v6-c-log-viewer.pf-m-dark .pf-v6-c-log-viewer__main {
-  --pf-v6-global--Color--100: var(--pf-v6-global--Color--light-100);
-  --pf-v6-global--Color--200: var(--pf-v6-global--Color--light-200);
-  --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--light-100);
-  --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--light-100);
-  --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--light);
-  --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--light);
-  --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--dark-100);
-  --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--light);
-  --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--light);
-}
-.pf-v6-c-log-viewer.pf-m-dark .pf-v6-c-log-viewer__main .pf-v6-c-button {
-  --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--dark-100);
-}
-
 .pf-v6-c-log-viewer {
   --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-v6-global--spacer--sm);
-  --pf-v6-c-log-viewer__main--BackgroundColor: var(--pf-v6-global--BackgroundColor--100);
-  --pf-v6-c-log-viewer__main--BorderWidth: var(--pf-v6-global--BorderWidth--sm);
-  --pf-v6-c-log-viewer__main--BorderColor: var(--pf-v6-global--BorderColor--100);
+  --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-v6-global--spacer--sm);
-  --pf-v6-c-log-viewer__scroll-container--PaddingBottom: var(--pf-v6-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-v6-global--BorderWidth--sm);
-  --pf-v6-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-v6-global--BorderColor--100);
+  --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__list--FontFamily: var(--pf-v6-global--FontFamily--monospace);
-  --pf-v6-c-log-viewer__list--FontSize: var(--pf-v6-global--FontSize--sm);
+  --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-v6-global--spacer--xl);
-  --pf-v6-c-log-viewer__index--PaddingLeft: var(--pf-v6-global--spacer--lg);
-  --pf-v6-c-log-viewer__index--Color: var(--pf-v6-global--Color--200);
+  --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-v6-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-v6-global--spacer--md);
-  --pf-v6-c-log-viewer__text--PaddingLeft: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-log-viewer__text--Color: var(--pf-v6-global--Color--100);
+  --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;
   --pf-v6-c-log-viewer__text--LineBreak: anywhere;
   --pf-v6-c-log-viewer--m-nowrap__text--WhiteSpace: nowrap;
-  --pf-v6-c-log-viewer__string--m-match--Color: var(--pf-v6-global--palette--gold-700);
-  --pf-v6-c-log-viewer__string--m-match--BackgroundColor: var(--pf-v6-global--palette--gold-100);
-  --pf-v6-c-log-viewer__string--m-current--Color: var(--pf-v6-global--palette--gold-700);
-  --pf-v6-c-log-viewer__string--m-current--BackgroundColor: var(--pf-v6-global--palette--gold-400);
-  --pf-v6-c-log-viewer__timestamp--FontWeight: var(--pf-v6-global--FontWeight--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__string--m-match--Color: var(--pf-t--global--text--color--on-highlight);
+  --pf-v6-c-log-viewer__string--m-match--BackgroundColor: var(--pf-t--global--background--color--highlight--default);
+  --pf-v6-c-log-viewer__string--m-current--Color: var(--pf-t--global--text--color--on-highlight);
+  --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--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-v6-global--spacer--sm);
+  --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;
   display: flex;
   flex-direction: column;
@@ -69,12 +54,11 @@
   --pf-v6-c-log-viewer__main--BorderWidth: var(--pf-v6-c-log-viewer--m-dark__main--BorderWidth);
 }
 .pf-v6-c-log-viewer.pf-m-dark .pf-v6-c-log-viewer__main {
-  color: var(--pf-v6-global--Color--100);
-  --pf-v6-c-log-viewer__main--BackgroundColor: var(--pf-v6-global--BackgroundColor--100);
-  --pf-v6-c-log-viewer__main--BorderColor: var(--pf-v6-global--BorderColor--100);
-  --pf-v6-c-log-viewer__text--Color: var(--pf-v6-global--Color--100);
-  --pf-v6-c-log-viewer__index--Color: var(--pf-v6-global--Color--200);
-  --pf-v6-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-v6-global--BorderColor--100);
+  --pf-v6-c-log-viewer__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --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__list--before--BackgroundColor: var(--pf-t--global--border--color--default);
 }
 .pf-v6-c-log-viewer.pf-m-wrap-text {
   word-break: break-all;
@@ -87,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);
 }
@@ -116,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 {
@@ -130,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;
@@ -163,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);
@@ -174,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);
@@ -186,12 +170,4 @@
 
 .pf-v6-c-log-viewer__timestamp {
   font-weight: var(--pf-v6-c-log-viewer__timestamp--FontWeight);
-}
-
-:where(.pf-v6-theme-dark) .pf-v6-c-log-viewer.pf-m-dark .pf-v6-c-log-viewer__main .pf-v6-c-button {
-  --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--300);
-}
-
-:where(.pf-v6-theme-dark) .pf-v6-c-log-viewer.pf-m-dark .pf-v6-c-log-viewer__main {
-  color: var(--pf-v6-global--Color--100);
 }

package/css/components/LogViewer/log-viewer.d.ts

@@ -1,6 +1,5 @@
 import './log-viewer.css';
 declare const _default: {
-  "button": "pf-v6-c-button",
   "logViewer": "pf-v6-c-log-viewer",
   "logViewerHeader": "pf-v6-c-log-viewer__header",
   "logViewerIndex": "pf-v6-c-log-viewer__index",
@@ -20,7 +19,6 @@ declare const _default: {
     "match": "pf-m-match",
     "current": "pf-m-current"
   },
-  "themeDark": "pf-v6-theme-dark",
   "toolbar": "pf-v6-c-toolbar",
   "toolbarContentSection": "pf-v6-c-toolbar__content-section"
 };

package/css/components/LogViewer/log-viewer.js

@@ -2,7 +2,6 @@
 exports.__esModule = true;
 require('./log-viewer.css');
 exports.default = {
-  "button": "pf-v6-c-button",
   "logViewer": "pf-v6-c-log-viewer",
   "logViewerHeader": "pf-v6-c-log-viewer__header",
   "logViewerIndex": "pf-v6-c-log-viewer__index",
@@ -22,7 +21,6 @@ exports.default = {
     "match": "pf-m-match",
     "current": "pf-m-current"
   },
-  "themeDark": "pf-v6-theme-dark",
   "toolbar": "pf-v6-c-toolbar",
   "toolbarContentSection": "pf-v6-c-toolbar__content-section"
 };

package/css/components/LogViewer/log-viewer.mjs

@@ -1,6 +1,5 @@
 import './log-viewer.css';
 export default {
-  "button": "pf-v6-c-button",
   "logViewer": "pf-v6-c-log-viewer",
   "logViewerHeader": "pf-v6-c-log-viewer__header",
   "logViewerIndex": "pf-v6-c-log-viewer__index",
@@ -20,7 +19,6 @@ export default {
     "match": "pf-m-match",
     "current": "pf-m-current"
   },
-  "themeDark": "pf-v6-theme-dark",
   "toolbar": "pf-v6-c-toolbar",
   "toolbarContentSection": "pf-v6-c-toolbar__content-section"
 };

package/css/components/Login/login.css

@@ -1,102 +1,102 @@
-:root {
-  --pf-v6-c-login--PaddingTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-login--PaddingBottom: var(--pf-t--global--spacer--lg);
+:where(:root, .pf-v6-c-login) {
+  --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) {
-  :root {
+  :where(:root, .pf-v6-c-login) {
     --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
   }
 }
 @media (min-width: 576px) {
-  :root {
-    --pf-v6-c-login__header--PaddingRight: 0;
-    --pf-v6-c-login__header--PaddingLeft: 0;
+  :where(:root, .pf-v6-c-login) {
+    --pf-v6-c-login__header--PaddingInlineEnd: 0;
+    --pf-v6-c-login__header--PaddingInlineStart: 0;
   }
 }
 @media (min-width: 1200px) {
-  :root {
-    --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);
+  :where(:root, .pf-v6-c-login) {
+    --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) {
-  :root {
-    --pf-v6-c-login__main--MarginBottom: 0;
+  :where(:root, .pf-v6-c-login) {
+    --pf-v6-c-login__main--MarginBlockEnd: 0;
   }
 }
 @media (min-width: 768px) {
-  :root {
-    --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);
+  :where(:root, .pf-v6-c-login) {
+    --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) {
-  :root {
-    --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);
+  :where(:root, .pf-v6-c-login) {
+    --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) {
-  :root {
-    --pf-v6-c-login__footer--PaddingRight: 0;
-    --pf-v6-c-login__footer--PaddingLeft: 0;
+  :where(:root, .pf-v6-c-login) {
+    --pf-v6-c-login__footer--PaddingInlineEnd: 0;
+    --pf-v6-c-login__footer--PaddingInlineStart: 0;
   }
 }
 @media (min-width: 1200px) {
-  :root {
-    --pf-v6-c-login__footer--c-list--PaddingTop: var(--pf-v6-c-login__footer--c-list--xl--PaddingTop);
+  :where(:root, .pf-v6-c-login) {
+    --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 {
@@ -175,33 +175,28 @@
 }
 
 .pf-v6-c-login__main-header-utilities,
-.pf-v6-c-login__main-header .pf-v6-c-dropdown {
+.pf-v6-c-login__main-header .pf-v6-c-menu-toggle {
   grid-row: auto;
   grid-column: auto;
 }
 @media (min-width: 768px) {
   .pf-v6-c-login__main-header-utilities,
-  .pf-v6-c-login__main-header .pf-v6-c-dropdown {
+  .pf-v6-c-login__main-header .pf-v6-c-menu-toggle {
     grid-row: 1;
     grid-column: 2/3;
   }
 }
 
-.pf-v6-c-login__main-header-utilities .pf-v6-c-dropdown {
-  grid-row: auto;
-  grid-column: auto;
-}
-
 .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 +204,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 +216,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 +227,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);
 }

package/css/components/Login/login.d.ts

@@ -2,7 +2,6 @@ import './login.css';
 declare const _default: {
   "brand": "pf-v6-c-brand",
   "button": "pf-v6-c-button",
-  "dropdown": "pf-v6-c-dropdown",
   "list": "pf-v6-c-list",
   "login": "pf-v6-c-login",
   "loginContainer": "pf-v6-c-login__container",
@@ -17,6 +16,7 @@ declare const _default: {
   "loginMainHeader": "pf-v6-c-login__main-header",
   "loginMainHeaderDesc": "pf-v6-c-login__main-header-desc",
   "loginMainHeaderUtilities": "pf-v6-c-login__main-header-utilities",
+  "menuToggle": "pf-v6-c-menu-toggle",
   "title": "pf-v6-c-title"
 };
 export default _default;

package/css/components/Login/login.js

@@ -4,7 +4,6 @@ require('./login.css');
 exports.default = {
   "brand": "pf-v6-c-brand",
   "button": "pf-v6-c-button",
-  "dropdown": "pf-v6-c-dropdown",
   "list": "pf-v6-c-list",
   "login": "pf-v6-c-login",
   "loginContainer": "pf-v6-c-login__container",
@@ -19,5 +18,6 @@ exports.default = {
   "loginMainHeader": "pf-v6-c-login__main-header",
   "loginMainHeaderDesc": "pf-v6-c-login__main-header-desc",
   "loginMainHeaderUtilities": "pf-v6-c-login__main-header-utilities",
+  "menuToggle": "pf-v6-c-menu-toggle",
   "title": "pf-v6-c-title"
 };

package/css/components/Login/login.mjs

@@ -2,7 +2,6 @@ import './login.css';
 export default {
   "brand": "pf-v6-c-brand",
   "button": "pf-v6-c-button",
-  "dropdown": "pf-v6-c-dropdown",
   "list": "pf-v6-c-list",
   "login": "pf-v6-c-login",
   "loginContainer": "pf-v6-c-login__container",
@@ -17,5 +16,6 @@ export default {
   "loginMainHeader": "pf-v6-c-login__main-header",
   "loginMainHeaderDesc": "pf-v6-c-login__main-header-desc",
   "loginMainHeaderUtilities": "pf-v6-c-login__main-header-utilities",
+  "menuToggle": "pf-v6-c-menu-toggle",
   "title": "pf-v6-c-title"
 };