@patternfly/patternfly 6.0.0-alpha.98 → 6.0.0-alpha.99

package/components/Card/card.css

@@ -227,6 +227,7 @@
 .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label {
   position: absolute;
   inset: 0;
+  justify-self: auto;
   cursor: pointer;
 }
 .pf-v6-c-card__selectable-actions .pf-v6-c-check__label::before,

package/components/Card/card.scss

@@ -303,6 +303,7 @@
 .#{$card}__selectable-actions .#{$radio}__label {
   position: absolute;
   inset: 0;
+  justify-self: auto;
   cursor: pointer;
 
   &::before {

package/components/Check/check.css

@@ -2,17 +2,18 @@
 .pf-v6-c-check {
   --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
+  --pf-v6-c-check--Height: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
   --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body);
   --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
-  --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
   --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-check__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
   --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
+  --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
 }
 
 .pf-v6-c-check {
@@ -22,13 +23,19 @@
   accent-color: var(--pf-v6-c-check--AccentColor);
 }
 .pf-v6-c-check.pf-m-standalone {
-  --pf-v6-c-check--GridGap: 0;
-  --pf-v6-c-check__input--TranslateY: none;
   display: inline-grid;
+  grid-template-columns: auto;
+  height: var(--pf-v6-c-check--Height);
+}
+.pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
+  align-self: center;
+  transform: none;
 }
 
 .pf-v6-c-check__input {
   align-self: start;
+  font-size: var(--pf-v6-c-check__label--FontSize);
+  line-height: var(--pf-v6-c-check__label--LineHeight);
   transform: translateY(var(--pf-v6-c-check__input--TranslateY));
 }
 

package/components/Check/check.scss

@@ -4,12 +4,14 @@
 .#{$check} {
   --#{$check}--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   --#{$check}--AccentColor: var(--pf-t--global--color--brand--default);
+  --#{$check}--Height: calc(var(--#{$check}__label--FontSize) * var(--#{$check}__label--LineHeight));
+
+  // TODO: update to `--#{$check}--FontSize` `--#{$check}--LineHeight`
   --#{$check}__label--disabled--Color: var(--pf-t--global--text--color--disabled);
   --#{$check}__label--Color: var(--pf-t--global--text--color--regular);
   --#{$check}__label--FontWeight: var(--pf-t--global--font--weight--body);
   --#{$check}__label--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$check}__label--LineHeight: var(--pf-t--global--font--line-height--body);
-  --#{$check}__input--TranslateY: calc((var(--#{$check}__label--LineHeight) * var(--#{$check}__label--FontSize) / 2 ) - 50%); // find height of single label, divide by two, offset by 50% of own height  
   --#{$check}__description--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$check}__description--Color: var(--pf-t--global--text--color--subtle);
 
@@ -17,8 +19,12 @@
   --#{$check}__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
   --#{$check}__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$check}__label-required--Color: var(--pf-t--global--color--status--danger--default);
+
+  // TODO: due to subpixel rendering and this value resolving to 21px, the checkbox vertical centering is off by 1px. Mozilla rounds subpixels up while chrome rounds down. This is a temporary fix until we can find a better solution.
+  --#{$check}__input--TranslateY: calc((var(--#{$check}__label--LineHeight) * var(--#{$check}__label--FontSize) / 2 ) - 50%); // find height of single label, divide by two, offset by 50% of own height
 }
 
+// - Check
 .#{$check} {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -26,15 +32,22 @@
   accent-color: var(--#{$check}--AccentColor);
 
   &.pf-m-standalone {
-    --#{$check}--GridGap: 0;
-    --#{$check}__input--TranslateY: none;
-
     display: inline-grid;
+    grid-template-columns: auto;
+    height: var(--#{$check}--Height);
+
+    .#{$check}__input {
+      align-self: center;
+      transform: none;
+    }
   }
 }
 
+// - Check input
 .#{$check}__input {
   align-self: start;
+  font-size: var(--#{$check}__label--FontSize);
+  line-height: var(--#{$check}__label--LineHeight);
 
   // find height of single label, divide by two, offset by 50% of own height
   transform: translateY(var(--#{$check}__input--TranslateY));

package/components/Masthead/masthead.css

@@ -1,11 +1,12 @@
-:root,
-[data-theme=pf-v6-c-masthead] {
+:where(:root),
+:where(.pf-v6-c-masthead) {
   --pf-v6-c-masthead--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
   --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
   --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-masthead__brand--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-masthead__brand--MaxHeight: 2.375rem;
   --pf-v6-c-masthead__toggle--Size: var(--pf-t--global--icon--size--xl);
@@ -25,15 +26,12 @@
   --pf-v6-c-masthead--m-display-inline__content--Order: 0;
   --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
-  --pf-v6-c-masthead--pf-v6-c-toolbar--Width: 100%;
-  --pf-v6-c-masthead--pf-v6-c-toolbar--PaddingBlock: 0;
-  --pf-v6-c-masthead--pf-v6-c-toolbar--PaddingInline: 0;
+  --pf-v6-c-masthead--c-toolbar--Width: 100%;
+  --pf-v6-c-masthead--c-toolbar--PaddingBlock: 0;
+  --pf-v6-c-masthead--c-toolbar--PaddingInline: 0;
 }
 
 .pf-v6-c-masthead {
-  --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--pf-v6-c-toolbar--Width);
-  --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-v6-c-masthead--pf-v6-c-toolbar--PaddingBlock);
-  --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-masthead--pf-v6-c-toolbar--PaddingInline);
   --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
   --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
   --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
@@ -51,7 +49,13 @@
   padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock));
   padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline));
   padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
-  background-color: var(--pf-v6-c-masthead--BackgroundColor, var(--pf-t--global--background--color--secondary--default));
+  background-color: var(--pf-v6-c-masthead--BackgroundColor);
+}
+.pf-v6-c-masthead .pf-v6-c-toolbar {
+  --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
+  --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-v6-c-masthead--c-toolbar--PaddingBlock);
+  --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-masthead--c-toolbar--PaddingInline);
+  --pf-v6-c-toolbar__content--MinWidth: 0;
 }
 @media screen and (min-width: 768px) {
   :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
@@ -64,6 +68,10 @@
     --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
   }
 }
+.pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
+  flex-wrap: nowrap;
+  min-width: 0;
+}
 .pf-v6-c-masthead .pf-v6-c-toolbar__expandable-content {
   inset-block-start: 100%;
   border-block-start: var(--pf-v6-c-masthead__expandable-content--BorderBlockStart);

package/components/Masthead/masthead.scss

@@ -1,8 +1,8 @@
 $pf-v5-c-masthead--breakpoint-map: build-breakpoint-map();
 $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
-:root,
-[data-theme="#{$masthead}"] {
+:where(:root),
+:where(.#{$masthead}) {
   // * Masthead
   --#{$masthead}--RowGap: var(--pf-t--global--spacer--sm);
   --#{$masthead}--ColumnGap: var(--pf-t--global--spacer--md);
@@ -10,6 +10,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   --#{$masthead}--PaddingBlock: var(--pf-t--global--spacer--md);
   --#{$masthead}--PaddingInline: var(--pf-t--global--spacer--lg);
   --#{$masthead}--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$masthead}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
   // * Masthead brand
   --#{$masthead}__brand--MarginInlineEnd: var(--pf-t--global--spacer--md);
@@ -41,9 +42,9 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   --#{$masthead}__expandable-content--BorderBlockStart: var(--#{$masthead}--BorderWidth) solid var(--#{$masthead}--BorderColor);
 
   // * Masthead toolbar
-  --#{$masthead}--#{$toolbar}--Width: 100%;
-  --#{$masthead}--#{$toolbar}--PaddingBlock: 0;
-  --#{$masthead}--#{$toolbar}--PaddingInline: 0;
+  --#{$masthead}--c-toolbar--Width: 100%;
+  --#{$masthead}--c-toolbar--PaddingBlock: 0;
+  --#{$masthead}--c-toolbar--PaddingInline: 0;
 }
 
 // * Masthead display stack
@@ -70,9 +71,12 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
 
 // - Masthead
 .#{$masthead} {
-  --#{$toolbar}--Width: var(--#{$masthead}--#{$toolbar}--Width);
-  --#{$toolbar}__content--PaddingBlock: var(--#{$masthead}--#{$toolbar}--PaddingBlock);
-  --#{$toolbar}__content--PaddingInline: var(--#{$masthead}--#{$toolbar}--PaddingInline);
+  .#{$toolbar} {
+    --#{$toolbar}--Width: var(--#{$masthead}--c-toolbar--Width);
+    --#{$toolbar}__content--PaddingBlock: var(--#{$masthead}--c-toolbar--PaddingBlock);
+    --#{$toolbar}__content--PaddingInline: var(--#{$masthead}--c-toolbar--PaddingInline);
+    --#{$toolbar}__content--MinWidth: 0;
+  }
 
   // Set layout to stack by default
   @include pf-v5-c-masthead--m-display-stack;
@@ -97,7 +101,12 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   padding-block-end: var(--#{$masthead}--PaddingBlockEnd, var(--#{$masthead}--PaddingBlock));
   padding-inline-start: var(--#{$masthead}--PaddingInlineStart, var(--#{$masthead}--PaddingInline));
   padding-inline-end: var(--#{$masthead}--PaddingInlineEnd, var(--#{$masthead}--PaddingInline));
-  background-color: var(--#{$masthead}--BackgroundColor, var(--pf-t--global--background--color--secondary--default));
+  background-color: var(--#{$masthead}--BackgroundColor);
+
+  .#{$toolbar}__content-section {
+    flex-wrap: nowrap;
+    min-width: 0;
+  }
 
   // - Masthead toolbar expandable content
   .#{$toolbar}__expandable-content {

package/components/MenuToggle/menu-toggle.css

@@ -29,8 +29,8 @@
   --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
-  --pf-v6-c-menu-toggle__icon--Height: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
-  --pf-v6-c-menu-toggle__toggle-icon--Height: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
+  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
+  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
   --pf-v6-c-menu-toggle--m-button--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v6-c-menu-toggle--m-button--PaddingRight: var(--pf-t--global--spacer--md);
   --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -370,7 +370,7 @@
 
 .pf-v6-c-menu-toggle__icon {
   flex-shrink: 0;
-  height: var(--pf-v6-c-menu-toggle__icon--Height);
+  min-height: var(--pf-v6-c-menu-toggle__icon--MinHeight);
 }
 
 .pf-v6-c-menu-toggle__controls {
@@ -379,6 +379,6 @@
 }
 
 .pf-v6-c-menu-toggle__toggle-icon {
-  height: var(--pf-v6-c-menu-toggle__toggle-icon--Height);
+  min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
   color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
 }

package/components/MenuToggle/menu-toggle.scss

@@ -49,10 +49,10 @@
   --#{$menu-toggle}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
 
   // * Menu toggle icon
-  --#{$menu-toggle}__icon--Height: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
+  --#{$menu-toggle}__icon--MinHeight: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
 
   // * Menu toggle toggle icon
-  --#{$menu-toggle}__toggle-icon--Height: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
+  --#{$menu-toggle}__toggle-icon--MinHeight: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
 
   // TODO: add pf-m-button modifier here
   // * Menu toggle button
@@ -490,7 +490,7 @@
 
 .#{$menu-toggle}__icon {
   flex-shrink: 0;
-  height: var(--#{$menu-toggle}__icon--Height);
+  min-height: var(--#{$menu-toggle}__icon--MinHeight);
 }
 
 // - Menu toggle controls
@@ -501,6 +501,6 @@
 
 // - Menu toggle icon
 .#{$menu-toggle}__toggle-icon {
-  height: var(--#{$menu-toggle}__toggle-icon--Height);
+  min-height: var(--#{$menu-toggle}__toggle-icon--MinHeight);
   color: var(--#{$menu-toggle}__toggle-icon--Color, inherit);
 }

package/components/ModalBox/modal-box.css

@@ -37,8 +37,8 @@
   --pf-v6-c-modal-box__body--PaddingLeft: var(--pf-t--global--spacer--lg);
   --pf-v6-c-modal-box__body--last-child--PaddingBottom: var(--pf-t--global--spacer--lg);
   --pf-v6-c-modal-box__header--body--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-modal-box__close--Top: var(--pf-v5-c-modal-box__header--PaddingTop);
-  --pf-v6-c-modal-box__close--Right: var(--pf-v5-c-modal-box__header--PaddingRight);
+  --pf-v6-c-modal-box__close--Top: var(--pf-v6-c-modal-box__header--PaddingTop);
+  --pf-v6-c-modal-box__close--Right: var(--pf-v6-c-modal-box__header--PaddingRight);
   --pf-v6-c-modal-box__close--sibling--MarginRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
   --pf-v6-c-modal-box__footer--PaddingTop: var(--pf-t--global--spacer--lg);
   --pf-v6-c-modal-box__footer--PaddingRight: var(--pf-t--global--spacer--lg);
@@ -81,19 +81,23 @@
   max-width: var(--pf-v6-c-modal-box--m-align-top--MaxWidth);
   max-height: var(--pf-v6-c-modal-box--m-align-top--MaxHeight);
 }
-.pf-v6-c-modal-box.pf-m-danger {
+.pf-v6-c-modal-box__title.pf-m-danger, .pf-v6-c-modal-box.pf-m-danger {
   --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-danger__title-icon--Color);
 }
-.pf-v6-c-modal-box.pf-m-warning {
+
+.pf-v6-c-modal-box__title.pf-m-warning, .pf-v6-c-modal-box.pf-m-warning {
   --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-warning__title-icon--Color);
 }
-.pf-v6-c-modal-box.pf-m-success {
+
+.pf-v6-c-modal-box__title.pf-m-success, .pf-v6-c-modal-box.pf-m-success {
   --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-success__title-icon--Color);
 }
-.pf-v6-c-modal-box.pf-m-custom {
+
+.pf-v6-c-modal-box__title.pf-m-custom, .pf-v6-c-modal-box.pf-m-custom {
   --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-custom__title-icon--Color);
 }
-.pf-v6-c-modal-box.pf-m-info {
+
+.pf-v6-c-modal-box__title.pf-m-info, .pf-v6-c-modal-box.pf-m-info {
   --pf-v6-c-modal-box__title-icon--Color: var(--pf-v6-c-modal-box--m-info__title-icon--Color);
 }
 

package/components/ModalBox/modal-box.scss

@@ -59,8 +59,8 @@
   --#{$modal-box}__header--body--PaddingTop: var(--pf-t--global--spacer--md);
 
   // Close
-  --#{$modal-box}__close--Top: var(--pf-v5-c-modal-box__header--PaddingTop); // calc(var(--pf-t--global--spacer--md));
-  --#{$modal-box}__close--Right: var(--pf-v5-c-modal-box__header--PaddingRight); // var(--pf-t--global--spacer--lg);
+  --#{$modal-box}__close--Top: var(--#{$modal-box}__header--PaddingTop);
+  --#{$modal-box}__close--Right: var(--#{$modal-box}__header--PaddingRight);
   --#{$modal-box}__close--sibling--MarginRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
 
   // Footer
@@ -106,24 +106,39 @@
     max-height: var(--#{$modal-box}--m-align-top--MaxHeight);
   }
 
-  &.pf-m-danger {
-    --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-danger__title-icon--Color);
+  @at-root .#{$modal-box}__title,
+  & {
+    &.pf-m-danger {
+      --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-danger__title-icon--Color);
+    }
   }
 
-  &.pf-m-warning {
-    --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-warning__title-icon--Color);
+  @at-root .#{$modal-box}__title,
+  & {
+    &.pf-m-warning {
+      --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-warning__title-icon--Color);
+    }
   }
 
-  &.pf-m-success {
-    --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-success__title-icon--Color);
+  @at-root .#{$modal-box}__title,
+  & {
+    &.pf-m-success {
+      --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-success__title-icon--Color);
+    }
   }
 
-  &.pf-m-custom {
-    --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-custom__title-icon--Color);
+  @at-root .#{$modal-box}__title,
+  & {
+    &.pf-m-custom {
+      --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-custom__title-icon--Color);
+    }
   }
 
-  &.pf-m-info {
-    --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-info__title-icon--Color);
+  @at-root .#{$modal-box}__title,
+  & {
+    &.pf-m-info {
+      --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-info__title-icon--Color);
+    }
   }
 }