@patternfly/patternfly 6.4.0 → 6.5.0-prerelease.10

package/components/Compass/compass.css

@@ -0,0 +1,211 @@
+.pf-v6-c-compass {
+  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--light);
+  --pf-v6-c-compass--BackgroundImage--light: none;
+  --pf-v6-c-compass--BackgroundImage--dark: none;
+  --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,255,255;
+  --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .8;
+  --pf-v6-c-compass__panel--BackgroundColor--light: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--light), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--light));
+  --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 0,0,0;
+  --pf-v6-c-compass__panel--BackgroundColor--opacity--dark: .8;
+  --pf-v6-c-compass__panel--BackgroundColor--dark: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--dark), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--dark));
+  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--light);
+  --pf-v6-c-compass__panel--BackdropFilter--light: blur(75px);
+  --pf-v6-c-compass__panel--BackdropFilter--dark: blur(75px);
+  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
+  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v6-c-compass__message-bar--Width: 450px;
+  --pf-v6-c-compass__message-bar--MinWidth: 300px;
+  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
+  --pf-v6-c-compass__hero--gradient--angle: 289deg;
+  --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
+  --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
+  --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
+  --pf-v6-c-compass__hero--gradient--stop-1--dark: transparent;
+  --pf-v6-c-compass__hero--gradient--stop-2--dark: transparent;
+  --pf-v6-c-compass__hero--gradient--stop-3--dark: transparent;
+  --pf-v6-c-compass__hero--BackgroundImage--light: none;
+  --pf-v6-c-compass__hero--BackgroundImage--dark: none;
+  --pf-v6-c-compass__hero-body--Width: 800px;
+  --pf-v6-c-compass__hero-body--MaxWidth: 80%;
+}
+
+.pf-v6-c-compass {
+  display: grid;
+  grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: auto 1fr auto;
+  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
+  align-items: center;
+  justify-content: center;
+  height: 100dvh;
+  padding: var(--pf-v6-c-compass--Padding);
+  margin-inline: auto;
+  background-image: var(--pf-v6-c-compass--BackgroundImage);
+  background-size: cover;
+}
+:root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
+  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
+}
+
+.pf-v6-c-compass__header {
+  display: grid;
+  grid-area: header;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: start;
+}
+
+.pf-v6-c-compass__profile {
+  justify-self: end;
+}
+.pf-v6-c-compass__profile .pf-v6-c-menu-toggle.pf-m-plain {
+  margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
+}
+
+.pf-v6-c-compass__nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-v6-c-compass__nav--RowGap);
+  align-items: center;
+  justify-self: stretch;
+}
+
+.pf-v6-c-compass__sidebar {
+  --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
+}
+.pf-v6-c-compass__sidebar.pf-m-start {
+  grid-area: sidebar-start;
+}
+
+.pf-v6-c-compass__main {
+  display: flex;
+  flex-direction: column;
+  grid-area: main;
+  gap: var(--pf-v6-c-compass__main--RowGap);
+  align-self: stretch;
+  min-height: 0;
+}
+
+.pf-v6-c-compass__content {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  min-height: 0;
+  overflow: auto;
+}
+.pf-v6-c-compass__content > *:last-child {
+  flex-grow: 1;
+  max-height: 100%;
+}
+
+.pf-v6-c-compass__sidebar.pf-m-end {
+  grid-area: sidebar-end;
+  padding: var(--pf-t--global--spacer--sm);
+}
+
+.pf-v6-c-compass__footer {
+  display: flex;
+  grid-area: footer;
+  justify-content: center;
+}
+
+.pf-v6-c-compass__message-bar {
+  width: var(--pf-v6-c-compass__message-bar--Width);
+  min-width: var(--pf-v6-c-compass__message-bar--MinWidth);
+  max-width: var(--pf-v6-c-compass__message-bar--MaxWidth);
+}
+
+.pf-v6-c-compass__panel {
+  padding: var(--pf-v6-c-compass__panel--Padding);
+  background-color: var(--pf-v6-c-compass__panel--BackgroundColor, var(--pf-v6-c-compass__panel--BackgroundColor--light));
+  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter, var(--pf-v6-c-compass__panel--BackdropFilter--light));
+  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
+  border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
+  box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
+}
+:root:where(.pf-v6-theme-dark) .pf-v6-c-compass__panel {
+  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--dark);
+  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-v6-c-compass__panel--BackgroundColor--dark);
+}
+.pf-v6-c-compass__panel.pf-m-no-border {
+  border-width: 0;
+}
+.pf-v6-c-compass__panel.pf-m-no-padding {
+  padding: 0;
+}
+.pf-v6-c-compass__panel.pf-m-full-height {
+  height: 100%;
+}
+.pf-v6-c-compass__panel.pf-m-pill {
+  border-radius: var(--pf-v6-c-compass__panel--m-pill--BorderRadius);
+}
+.pf-v6-c-compass__panel.pf-m-scrollable {
+  overflow: auto;
+}
+.pf-v6-c-compass__panel.pf-m-padding {
+  padding: 0;
+}
+
+.pf-v6-c-compass__hero {
+  display: flex;
+  padding-block-start: 32px;
+  padding-block-end: 32px;
+  padding-inline-start: 72px;
+  padding-inline-end: 0;
+  background-image: var(--pf-v6-c-compass__hero--BackgroundImage, var(--pf-v6-c-compass__hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-compass__hero--gradient--angle), var(--pf-v6-c-compass__hero--gradient--stop-1, var(--pf-v6-c-compass__hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-compass__hero--gradient--stop-2, var(--pf-v6-c-compass__hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-compass__hero--gradient--stop-3, var(--pf-v6-c-compass__hero--gradient--stop-3--light)) 100%);
+  background-repeat: no-repeat;
+  background-position: right center;
+  background-size: contain;
+  border-radius: 24px 72px;
+}
+:root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
+  --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
+  --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
+  --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
+  --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
+}
+
+.pf-v6-c-compass__hero-body {
+  width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
+}
+
+:where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass {
+  --pf-v6-c-compass--glass--opacity: 100%;
+  --pf-v6-c-compass--glass--border: var(--pf-t--global--border--color--default);
+  --pf-v6-c-compass--glass--blend-mode: none;
+  --pf-v6-c-compass--glass--blend-mode--dark: none;
+}
+
+/* stylelint-disable */
+@media (max-width: 1200px) {
+  .pf-v6-c-compass {
+    display: none;
+  }
+  body {
+    display: grid;
+    min-height: 100%;
+    place-content: center;
+  }
+  body::after {
+    padding: 1em;
+    border-radius: var(--pf-t--global--border--radius--large);
+    background: var(--pf-t--global--background--color--primary--default);
+    content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
+    width: 80%;
+    max-width: 360px;
+    border: 1px solid var(--pf-t--global--border--color--default);
+    box-shadow: var(--pf-t--global--box-shadow--md);
+    white-space: pre-wrap;
+    text-align: center;
+  }
+}
+/* stylelint-enable */

package/components/Compass/compass.scss

@@ -0,0 +1,276 @@
+@use '../../sass-utilities' as *;
+
+@include pf-root($compass) {
+  --#{$compass}--BackgroundImage: var(--#{$compass}--BackgroundImage--light);
+  --#{$compass}--BackgroundImage--light: none;
+  --#{$compass}--BackgroundImage--dark: none;
+  --#{$compass}--Padding: var(--pf-t--global--spacer--inset--page-chrome);
+  --#{$compass}--RowGap: var(--pf-t--global--spacer--xl);
+  --#{$compass}--ColumnGap: var(--pf-t--global--spacer--xl);
+  --#{$compass}__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+  --#{$compass}__sidebar--Padding: var(--pf-t--global--spacer--sm);
+  --#{$compass}__main--RowGap: var(--pf-t--global--spacer--md);
+  --#{$compass}__panel--BackgroundColor--rgb--light: 255,255,255;
+  --#{$compass}__panel--BackgroundColor--opacity--light: .8;
+  --#{$compass}__panel--BackgroundColor--light: rgba(var(--#{$compass}__panel--BackgroundColor--rgb--light), var(--#{$compass}__panel--BackgroundColor--opacity--light));
+  --#{$compass}__panel--BackgroundColor--rgb--dark: 0,0,0;
+  --#{$compass}__panel--BackgroundColor--opacity--dark: .8;
+  --#{$compass}__panel--BackgroundColor--dark: rgba(var(--#{$compass}__panel--BackgroundColor--rgb--dark), var(--#{$compass}__panel--BackgroundColor--opacity--dark));
+  --#{$compass}__panel--BackdropFilter: var(--#{$compass}__panel--BackdropFilter--light);
+  --#{$compass}__panel--BackdropFilter--light: blur(75px);
+  --#{$compass}__panel--BackdropFilter--dark: blur(75px);
+  --#{$compass}__panel--BorderRadius: var(--pf-t--global--border--radius--large);
+  --#{$compass}__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --#{$compass}__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
+  --#{$compass}__panel--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$compass}__panel--BorderColor: var(--pf-t--global--border--color--alt);
+  --#{$compass}__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --#{$compass}__message-bar--Width: 450px;
+  --#{$compass}__message-bar--MinWidth: 300px;
+  --#{$compass}__message-bar--MaxWidth: 600px;
+  --#{$compass}__hero--gradient--angle: 289deg;
+  --#{$compass}__hero--gradient--stop-1--light: transparent;
+  --#{$compass}__hero--gradient--stop-2--light: transparent;
+  --#{$compass}__hero--gradient--stop-3--light: transparent;
+  --#{$compass}__hero--gradient--stop-1--dark: transparent; // #000;
+  --#{$compass}__hero--gradient--stop-2--dark: transparent; // #1b0d33;
+  --#{$compass}__hero--gradient--stop-3--dark: transparent; //  #3d2785;
+  --#{$compass}__hero--BackgroundImage--light: none; // url("./assets/images/compass--hero-bg.png");
+  --#{$compass}__hero--BackgroundImage--dark: none; // url("./assets/images/compass--hero-bg.png");
+  --#{$compass}__hero-body--Width: 800px;
+  --#{$compass}__hero-body--MaxWidth: 80%;
+}
+
+.#{$compass} {
+  display: grid;
+  grid-template-areas:
+    "header header header"
+    "sidebar-start main sidebar-end"
+    "footer footer footer";
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: auto 1fr auto;
+  gap: var(--#{$compass}--RowGap) var(--#{$compass}--ColumnGap);
+  align-items: center;
+  justify-content: center;
+  height: 100dvh;
+  padding: var(--#{$compass}--Padding);
+  margin-inline: auto;
+  background-image: var(--#{$compass}--BackgroundImage);
+  background-size: cover;
+
+  :root:where(.pf-v6-theme-dark) & {
+    --#{$compass}--BackgroundImage: var(--#{$compass}--BackgroundImage--dark);
+  }
+}
+
+.#{$compass}__header {
+  display: grid;
+  grid-area: header;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: start;
+}
+
+.#{$compass}__profile {
+  justify-self: end;
+
+  // improves perceived alignment since it's a plain toggle
+  .#{$menu-toggle}.pf-m-plain {
+    margin-block-start: calc(var(--#{$menu-toggle}--PaddingBlockStart) * -1);
+  }
+}
+
+.#{$compass}__nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$compass}__nav--RowGap);
+  align-items: center;
+  justify-self: stretch;
+}
+
+.#{$compass}__sidebar {
+  --#{$compass}__panel--Padding: var(--#{$compass}__sidebar--Padding);
+
+  &.pf-m-start {
+    grid-area: sidebar-start;
+  }
+}
+
+.#{$compass}__main {
+  display: flex;
+  flex-direction: column;
+  grid-area: main;
+  gap: var(--#{$compass}__main--RowGap);
+  align-self: stretch;
+  min-height: 0;
+}
+
+.#{$compass}__content {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  min-height: 0;
+  overflow: auto;
+
+  // mask: linear-gradient(
+  //   rgba(0, 0, 0, calc(1 - var(--#{$compass}__scroll-top) / 20)),
+  //   black var(--#{$compass}--feather--length),
+  //   black calc(100% - var(--#{$compass}--feather--length)),
+  //   rgba(0, 0, 0, calc(1 - var(--#{$compass}__scroll-bottom) / 20))
+  // );
+  // backdrop-filter: blur(8px);
+
+  > *:last-child {
+    flex-grow: 1;
+    max-height: 100%;
+  }
+}
+
+.#{$compass}__sidebar.pf-m-end {
+  grid-area: sidebar-end;
+  padding: var(--pf-t--global--spacer--sm);
+}
+
+.#{$compass}__footer {
+  display: flex;
+  grid-area: footer;
+  justify-content: center;
+}
+
+.#{$compass}__message-bar {
+  width: var(--#{$compass}__message-bar--Width);
+  min-width: var(--#{$compass}__message-bar--MinWidth);
+  max-width: var(--#{$compass}__message-bar--MaxWidth);
+}
+
+.#{$compass}__panel {
+  padding: var(--#{$compass}__panel--Padding);
+  background-color: var(--#{$compass}__panel--BackgroundColor, var(--#{$compass}__panel--BackgroundColor--light));
+  backdrop-filter: var(--#{$compass}__panel--BackdropFilter, var(--#{$compass}__panel--BackdropFilter--light));
+  border: var(--#{$compass}__panel--BorderWidth) solid var(--#{$compass}__panel--BorderColor);
+  border-radius: var(--#{$compass}__panel--BorderRadius);
+  box-shadow: var(--#{$compass}__panel--BoxShadow);
+
+  :root:where(.pf-v6-theme-dark) & {
+    --#{$compass}__panel--BackdropFilter: var(--#{$compass}__panel--BackdropFilter--dark);
+    --#{$compass}__panel--BackgroundColor: var(--#{$compass}__panel--BackgroundColor--dark);
+  }
+
+  &.pf-m-no-border {
+    border-width: 0;
+  }
+
+  &.pf-m-no-padding {
+    padding: 0;
+  }
+
+  &.pf-m-full-height {
+    height: 100%;
+  }
+
+  &.pf-m-pill {
+    border-radius: var(--#{$compass}__panel--m-pill--BorderRadius);
+  }
+
+  &.pf-m-scrollable {
+    overflow: auto;
+  }
+
+  &.pf-m-padding {
+    padding: 0;
+  }
+}
+
+.#{$compass}__hero {
+  display: flex;
+  padding-block-start: 32px;
+  padding-block-end: 32px;
+  padding-inline-start: 72px;
+  padding-inline-end: 0;
+  background-image: var(--#{$compass}__hero--BackgroundImage, var(--#{$compass}__hero--BackgroundImage--light)),
+    linear-gradient(
+      var(--#{$compass}__hero--gradient--angle),
+      var(--#{$compass}__hero--gradient--stop-1, var(--#{$compass}__hero--gradient--stop-1--light)) 0%,
+      var(--#{$compass}__hero--gradient--stop-2, var(--#{$compass}__hero--gradient--stop-2--light)) 50%,
+      var(--#{$compass}__hero--gradient--stop-3, var(--#{$compass}__hero--gradient--stop-3--light)) 100%
+    );
+  background-repeat: no-repeat;
+  background-position: right center;
+  background-size: contain;
+  border-radius: 24px 72px;
+
+  :root:where(.pf-v6-theme-dark) & {
+    --#{$compass}__hero--BackgroundImage: var(--#{$compass}__hero--BackgroundImage--dark);
+    --#{$compass}__hero--gradient--stop-1: var(--#{$compass}__hero--gradient--stop-1--dark);
+    --#{$compass}__hero--gradient--stop-2: var(--#{$compass}__hero--gradient--stop-2--dark);
+    --#{$compass}__hero--gradient--stop-3: var(--#{$compass}__hero--gradient--stop-3--dark);
+  }
+}
+
+.#{$compass}__hero-body {
+  width: min(var(--#{$compass}__hero-body--Width), var(--#{$compass}__hero-body--MaxWidth));
+}
+
+:where(:root.pf-v6-theme-no-glass) .#{$compass} {
+  --#{$compass}--glass--opacity: 100%;
+  --#{$compass}--glass--border: var(--pf-t--global--border--color--default);
+  --#{$compass}--glass--blend-mode: none;
+  --#{$compass}--glass--blend-mode--dark: none;
+}
+
+:where(.pf-v6-theme-dark) .#{$compass} {
+  // dark theme goes here
+}
+
+// .pf-chatbot__message-bar {
+//   width: 100%;
+//   min-width: var(--#{$compass}--message-bar--min-width);
+//   max-width: var(--#{$compass}--message-bar--max-width);
+//   padding-inline-start: 0px;
+//   padding-inline-end: 0.8em;
+//   background: transparent;
+//   border: 0;
+
+//   &:hover,
+//   &:focus-within {
+//     box-shadow: var(--pf-t--global--box-shadow--md);
+//   }
+
+//   .pf-chatbot__button--send.pf-m-compact {
+//     width: auto;
+//     height: auto;
+//     padding: var(--pf-v6-c-button--m-small--PaddingBlockStart) var(--pf-v6-c-button--m-small--PaddingInlineEnd)
+//       var(--pf-v6-c-button--m-small--PaddingBlockEnd) var(--pf-v6-c-button--m-small--PaddingInlineStart);
+
+//     .pf-v6-c-button__icon {
+//       min-width: 1lh;
+//     }
+//   }
+// }
+
+
+
+/* stylelint-disable */
+@media (max-width: 1200px) {
+  .#{$compass} {
+    display: none;
+  }
+  body {
+    display: grid;
+    min-height: 100%;
+    place-content: center;
+
+    &::after {
+      padding: 1em;
+      border-radius: var(--pf-t--global--border--radius--large);
+      background: var(--pf-t--global--background--color--primary--default);
+      content: "This page is optimized for wide screens.\a\a Please view on a larger display and/or make your browser window wider.";
+      width: 80%;
+      max-width: 360px;
+      border: 1px solid var(--pf-t--global--border--color--default);
+      box-shadow: var(--pf-t--global--box-shadow--md);
+      white-space: pre-wrap;
+      text-align: center;
+    }
+  }
+}
+/* stylelint-enable */

package/components/DataList/data-list.css

@@ -412,7 +412,8 @@
   --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-data-list__item--BackgroundColor: var( --pf-t--global--background--color--primary--default);
+  --pf-v6-c-data-list__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
   --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
   --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
   --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -567,6 +568,9 @@
 .pf-v6-c-data-list.pf-m-drag-over {
   overflow-anchor: none;
 }
+.pf-v6-c-data-list.pf-m-plain {
+  --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
+}
 
 .pf-v6-c-data-list.pf-m-truncate,
 .pf-v6-c-data-list__item-row.pf-m-truncate,

package/components/DataList/data-list.scss

@@ -16,7 +16,8 @@
   }
 
   // item
-  --#{$data-list}__item--BackgroundColor: var( --pf-t--global--background--color--primary--default);
+  --#{$data-list}__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$data-list}--pf-m-plain__item--BackgroundColor: transparent;
   --#{$data-list}__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
   --#{$data-list}__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
   --#{$data-list}__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -189,6 +190,10 @@
   &.pf-m-drag-over {
     overflow-anchor: none;
   }
+
+  &.pf-m-plain {
+    --#{$data-list}__item--BackgroundColor: var(--#{$data-list}--pf-m-plain__item--BackgroundColor);
+  }
 }
 
 .#{$data-list},

package/components/Menu/menu.css

@@ -28,7 +28,7 @@
   --pf-v6-c-menu__footer--BoxShadow: none;
   --pf-v6-c-menu__footer--BorderColor: transparent;
   --pf-v6-c-menu__footer--BorderWidth: 0;
-  --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+  --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --pf-v6-c-menu--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-menu--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);

package/components/Menu/menu.scss

@@ -43,7 +43,7 @@
   --#{$menu}__footer--BoxShadow: none;
   --#{$menu}__footer--BorderColor: transparent;
   --#{$menu}__footer--BorderWidth: 0;
-  --#{$menu}--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+  --#{$menu}--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --#{$menu}--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --#{$menu}--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 

package/components/MenuToggle/menu-toggle.css

@@ -123,6 +123,7 @@
   --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
   --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
   --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+  --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
   --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
   --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
@@ -251,6 +252,9 @@
   --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
   --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
 }
+.pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
+  --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
+}
 .pf-v6-c-menu-toggle.pf-m-plain::before {
   --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
   --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);

package/components/MenuToggle/menu-toggle.scss

@@ -151,6 +151,7 @@
   --#{$menu-toggle}--m-plain--disabled--BackgroundColor: transparent;
   --#{$menu-toggle}--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
   --#{$menu-toggle}--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+  --#{$menu-toggle}--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
 
   // Typeahead
   --#{$menu-toggle}--m-typeahead__button--AlignSelf: stretch;
@@ -307,6 +308,10 @@
     --#{$menu-toggle}--m-small--PaddingInlineStart: var(--#{$menu-toggle}--m-plain--m-small--PaddingInlineStart);
     --#{$menu-toggle}--m-small--PaddingInlineEnd: var(--#{$menu-toggle}--m-plain--m-small--PaddingInlineEnd);
 
+    &.pf-m-circle {
+      --#{$menu-toggle}--BorderRadius: var(--#{$menu-toggle}--m-plain--m-circle--BorderRadius);
+    }
+
     &::before {
       --#{$menu-toggle}--BorderWidth: var(--#{$menu-toggle}--m-plain--BorderWidth);
       --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-plain--BorderColor);

package/components/Panel/panel.css

@@ -33,7 +33,7 @@
   --pf-v6-c-panel__footer--BorderWidth: 0;
   --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
   --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
-  --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+  --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);

package/components/Panel/panel.scss

@@ -53,7 +53,7 @@
   // scrollable
   --#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)};
   --#{$panel}--m-scrollable__main--Overflow: auto;
-  --#{$panel}--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+  --#{$panel}--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --#{$panel}--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$panel}--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --#{$panel}--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);

package/components/Spinner/spinner.css

@@ -41,6 +41,9 @@
 .pf-v6-c-spinner.pf-m-xl {
   --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
 }
+.pf-v6-m-no-motion .pf-v6-c-spinner {
+  --pf-v6-c-spinner--AnimationDuration: 0s;
+}
 
 .pf-v6-c-spinner__path {
   width: 100%;

package/components/Spinner/spinner.scss

@@ -55,6 +55,11 @@
   &.pf-m-xl {
     --#{$spinner}--diameter: var(--#{$spinner}--m-xl--diameter);
   }
+
+  // Disable animations when no-motion modifier is applied
+  .#{$pf-prefix}m-no-motion & {
+    --#{$spinner}--AnimationDuration: 0s;
+  }
 }
 
 .#{$spinner}__path {

package/components/Table/table.css

@@ -207,6 +207,9 @@
 .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
 }
+.pf-v6-c-table.pf-m-plain {
+  --pf-v6-c-table--BackgroundColor: transparent;
+}
 .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
 .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
 .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),

package/components/Table/table.scss

@@ -324,6 +324,11 @@
     }
   }
 
+  // - Table plain
+  &.pf-m-plain {
+    --#{$table}--BackgroundColor: transparent;
+  }
+
   // - Table striped
   // stylelint-disable
   &.pf-m-striped:not(.pf-m-expandable) > tbody:where(.#{$table}__tbody) > tr:where(.#{$table}__tr):nth-child(odd), // regular table