@patternfly/react-templates 6.3.0-prerelease.27 → 6.3.0-prerelease.28

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.3.0-prerelease.28](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-templates@6.3.0-prerelease.27...@patternfly/react-templates@6.3.0-prerelease.28) (2025-07-01)
+
+**Note:** Version bump only for package @patternfly/react-templates
+
 # [6.3.0-prerelease.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-templates@6.3.0-prerelease.26...@patternfly/react-templates@6.3.0-prerelease.27) (2025-06-23)
 
 **Note:** Version bump only for package @patternfly/react-templates

package/components/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-templates-components","main":"../dist/js/components/index.js","module":"../dist/esm/components/index.js","typings":"../dist/esm/components/index.d.ts","version":"6.3.0-prerelease.26","private":true}
+{"name":"@patternfly/react-templates-components","main":"../dist/js/components/index.js","module":"../dist/esm/components/index.js","typings":"../dist/esm/components/index.d.ts","version":"6.3.0-prerelease.27","private":true}

package/dist/dynamic/components/Dropdown/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-templates-dropdown-dynamic","main":"../../../js/components/Dropdown/index.js","module":"../../../esm/components/Dropdown/index.js","typings":"../../../esm/components/Dropdown/index.d.ts","version":"6.3.0-prerelease.26","private":true}
+{"name":"@patternfly/react-templates-dropdown-dynamic","main":"../../../js/components/Dropdown/index.js","module":"../../../esm/components/Dropdown/index.js","typings":"../../../esm/components/Dropdown/index.d.ts","version":"6.3.0-prerelease.27","private":true}

package/dist/dynamic/components/Select/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-templates-select-dynamic","main":"../../../js/components/Select/index.js","module":"../../../esm/components/Select/index.js","typings":"../../../esm/components/Select/index.d.ts","version":"6.3.0-prerelease.26","private":true}
+{"name":"@patternfly/react-templates-select-dynamic","main":"../../../js/components/Select/index.js","module":"../../../esm/components/Select/index.js","typings":"../../../esm/components/Select/index.d.ts","version":"6.3.0-prerelease.27","private":true}

package/dist/umd/assets/{output-cZml8DqN.css → output-WYPpS1Xs.css}

@@ -794,6 +794,88 @@
   display: flex;
 }
 
+.pf-v6-c-check {
+  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
+  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
+  --pf-v6-c-check--m-standalone--MinHeight: 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--default);
+  --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__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--MarginInlineStart: 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 {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: var(--pf-v6-c-check--GridGap);
+  accent-color: var(--pf-v6-c-check--AccentColor);
+}
+
+.pf-v6-c-check.pf-m-standalone {
+  display: inline-grid;
+  grid-template-columns: auto;
+  min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
+}
+
+.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));
+}
+
+.pf-v6-c-check__label {
+  font-size: var(--pf-v6-c-check__label--FontSize);
+  font-weight: var(--pf-v6-c-check__label--FontWeight);
+  line-height: var(--pf-v6-c-check__label--LineHeight);
+  color: var(--pf-v6-c-check__label--Color);
+}
+
+.pf-v6-c-check__description {
+  grid-column: 2;
+  font-size: var(--pf-v6-c-check__description--FontSize);
+  color: var(--pf-v6-c-check__description--Color);
+}
+
+.pf-v6-c-check__body {
+  grid-column: 2;
+}
+
+.pf-v6-c-check__label,
+.pf-v6-c-check__input {
+  justify-self: start;
+}
+
+label.pf-v6-c-check, .pf-v6-c-check__label,
+.pf-v6-c-check__input {
+  cursor: pointer;
+}
+
+.pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
+.pf-v6-c-check__input:disabled,
+.pf-v6-c-check__input.pf-m-disabled {
+  --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
+  cursor: not-allowed;
+}
+
+.pf-v6-c-check__label-required {
+  margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
+  font-size: var(--pf-v6-c-check__label-required--FontSize);
+  color: var(--pf-v6-c-check__label-required--Color);
+}
+
 .pf-v6-c-button {
   --pf-v6-c-button--Display: inline-flex;
   --pf-v6-c-button--AlignItems: baseline;
@@ -1659,86 +1741,77 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
     scale: 1.5;
   }
 }
-.pf-v6-c-check {
-  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
-  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
-  --pf-v6-c-check--m-standalone--MinHeight: 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--default);
-  --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__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--MarginInlineStart: 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 {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: var(--pf-v6-c-check--GridGap);
-  accent-color: var(--pf-v6-c-check--AccentColor);
-}
-
-.pf-v6-c-check.pf-m-standalone {
-  display: inline-grid;
-  grid-template-columns: auto;
-  min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
-}
-
-.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));
+.pf-v6-c-badge {
+  --pf-v6-c-badge--BorderColor: transparent;
+  --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
+  --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
+  --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
+  --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
+  --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
+  --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
+  --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
 }
 
-.pf-v6-c-check__label {
-  font-size: var(--pf-v6-c-check__label--FontSize);
-  font-weight: var(--pf-v6-c-check__label--FontWeight);
-  line-height: var(--pf-v6-c-check__label--LineHeight);
-  color: var(--pf-v6-c-check__label--Color);
+.pf-v6-c-badge {
+  position: relative;
+  display: inline-block;
+  min-width: var(--pf-v6-c-badge--MinWidth);
+  padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
+  font-size: var(--pf-v6-c-badge--FontSize);
+  font-weight: var(--pf-v6-c-badge--FontWeight);
+  color: var(--pf-v6-c-badge--Color);
+  text-align: center;
+  white-space: nowrap;
+  background-color: var(--pf-v6-c-badge--BackgroundColor);
+  border-radius: var(--pf-v6-c-badge--BorderRadius);
 }
 
-.pf-v6-c-check__description {
-  grid-column: 2;
-  font-size: var(--pf-v6-c-check__description--FontSize);
-  color: var(--pf-v6-c-check__description--Color);
+.pf-v6-c-badge::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
+  border-radius: inherit;
 }
 
-.pf-v6-c-check__body {
-  grid-column: 2;
+.pf-v6-c-badge.pf-m-read {
+  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
+  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
+  --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
 }
 
-.pf-v6-c-check__label,
-.pf-v6-c-check__input {
-  justify-self: start;
+.pf-v6-c-badge.pf-m-unread {
+  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
+  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
+  --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
 }
 
-label.pf-v6-c-check, .pf-v6-c-check__label,
-.pf-v6-c-check__input {
-  cursor: pointer;
+.pf-v6-c-badge.pf-m-disabled {
+  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
+  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
 }
 
-.pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
-.pf-v6-c-check__input:disabled,
-.pf-v6-c-check__input.pf-m-disabled {
-  --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
-  cursor: not-allowed;
+.pf-v6-c-badge.pf-m-disabled::after {
+  border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
 }
 
-.pf-v6-c-check__label-required {
-  margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
-  font-size: var(--pf-v6-c-check__label-required--FontSize);
-  color: var(--pf-v6-c-check__label-required--Color);
+.pf-v6-c-badge__toggle-icon {
+  margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
+  color: var(--pf-v6-c-badge__toggle-icon--Color);
 }
 
 .pf-v6-c-label-group {
@@ -2746,79 +2819,6 @@ input.pf-v6-c-label__content {
   outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
 }
 
-.pf-v6-c-badge {
-  --pf-v6-c-badge--BorderColor: transparent;
-  --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
-  --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
-  --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
-  --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
-  --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
-  --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
-  --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
-  --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
-  --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
-  --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
-  --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
-  --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
-  --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
-}
-
-.pf-v6-c-badge {
-  position: relative;
-  display: inline-block;
-  min-width: var(--pf-v6-c-badge--MinWidth);
-  padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
-  font-size: var(--pf-v6-c-badge--FontSize);
-  font-weight: var(--pf-v6-c-badge--FontWeight);
-  color: var(--pf-v6-c-badge--Color);
-  text-align: center;
-  white-space: nowrap;
-  background-color: var(--pf-v6-c-badge--BackgroundColor);
-  border-radius: var(--pf-v6-c-badge--BorderRadius);
-}
-
-.pf-v6-c-badge::after {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  content: "";
-  border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
-  border-radius: inherit;
-}
-
-.pf-v6-c-badge.pf-m-read {
-  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
-  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
-  --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
-}
-
-.pf-v6-c-badge.pf-m-unread {
-  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
-  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
-  --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
-}
-
-.pf-v6-c-badge.pf-m-disabled {
-  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
-  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
-}
-
-.pf-v6-c-badge.pf-m-disabled::after {
-  border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
-}
-
-.pf-v6-c-badge__toggle-icon {
-  margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
-  color: var(--pf-v6-c-badge__toggle-icon--Color);
-}
-
 .pf-v6-c-menu {
   --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-menu--Width: auto;
@@ -3601,93 +3601,6 @@ button.pf-v6-c-breadcrumb__link {
   display: none;
 }
 
-.pf-v6-c-spinner {
-  --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
-  --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
-  --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
-  --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
-  --pf-v6-c-spinner--AnimationDuration: 1.4s;
-  --pf-v6-c-spinner--AnimationTimingFunction: linear;
-  --pf-v6-c-spinner--StrokeWidth: 10;
-  --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
-  --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
-  --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
-  --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
-  --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
-  --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
-  --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
-  --pf-v6-c-spinner--m-inline--diameter: 1em;
-}
-
-.pf-v6-c-spinner {
-  width: var(--pf-v6-c-spinner--Width);
-  height: var(--pf-v6-c-spinner--Height);
-  overflow: hidden;
-  animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
-}
-
-.pf-v6-c-spinner.pf-m-inline {
-  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
-}
-
-.pf-v6-c-spinner.pf-m-xs {
-  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
-  --pf-v6-c-spinner--StrokeWidth: 15;
-}
-
-.pf-v6-c-spinner.pf-m-sm {
-  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
-}
-
-.pf-v6-c-spinner.pf-m-md {
-  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
-}
-
-.pf-v6-c-spinner.pf-m-lg {
-  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
-}
-
-.pf-v6-c-spinner.pf-m-xl {
-  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
-}
-
-.pf-v6-c-spinner__path {
-  width: 100%;
-  height: 100%;
-  stroke: var(--pf-v6-c-spinner--Color);
-  stroke-dasharray: 283;
-  stroke-dashoffset: 280;
-  stroke-linecap: round;
-  stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
-  transform-origin: 50% 50%;
-  animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
-}
-
-@keyframes pf-v6-c-spinner-animation-rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes pf-v6-c-spinner-animation-dash {
-  0% {
-    stroke-dashoffset: 280;
-    transform: rotate(0);
-  }
-  15% {
-    stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
-  }
-  40% {
-    stroke-dasharray: 220;
-    stroke-dashoffset: 150;
-  }
-  100% {
-    stroke-dashoffset: 280;
-    transform: rotate(720deg);
-  }
-}
 .pf-v6-c-tooltip {
   --pf-v6-c-tooltip--MaxWidth: 18.75rem;
   --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3817,4 +3730,92 @@ button.pf-v6-c-breadcrumb__link {
   background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
   box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
   transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
+}
+
+.pf-v6-c-spinner {
+  --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
+  --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
+  --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
+  --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
+  --pf-v6-c-spinner--AnimationDuration: 1.4s;
+  --pf-v6-c-spinner--AnimationTimingFunction: linear;
+  --pf-v6-c-spinner--StrokeWidth: 10;
+  --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
+  --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
+  --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
+  --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
+  --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
+  --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
+  --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
+  --pf-v6-c-spinner--m-inline--diameter: 1em;
+}
+
+.pf-v6-c-spinner {
+  width: var(--pf-v6-c-spinner--Width);
+  height: var(--pf-v6-c-spinner--Height);
+  overflow: hidden;
+  animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
+}
+
+.pf-v6-c-spinner.pf-m-inline {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
+}
+
+.pf-v6-c-spinner.pf-m-xs {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
+  --pf-v6-c-spinner--StrokeWidth: 15;
+}
+
+.pf-v6-c-spinner.pf-m-sm {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
+}
+
+.pf-v6-c-spinner.pf-m-md {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
+}
+
+.pf-v6-c-spinner.pf-m-lg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
+}
+
+.pf-v6-c-spinner.pf-m-xl {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
+}
+
+.pf-v6-c-spinner__path {
+  width: 100%;
+  height: 100%;
+  stroke: var(--pf-v6-c-spinner--Color);
+  stroke-dasharray: 283;
+  stroke-dashoffset: 280;
+  stroke-linecap: round;
+  stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
+  transform-origin: 50% 50%;
+  animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
+}
+
+@keyframes pf-v6-c-spinner-animation-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pf-v6-c-spinner-animation-dash {
+  0% {
+    stroke-dashoffset: 280;
+    transform: rotate(0);
+  }
+  15% {
+    stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
+  }
+  40% {
+    stroke-dasharray: 220;
+    stroke-dashoffset: 150;
+  }
+  100% {
+    stroke-dashoffset: 280;
+    transform: rotate(720deg);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-templates",
-  "version": "6.3.0-prerelease.27",
+  "version": "6.3.0-prerelease.28",
   "description": "This package provides wrapped component demos for ease of use\n",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -33,8 +33,8 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.3.0-prerelease.27",
-    "@patternfly/react-icons": "^6.3.0-prerelease.9",
+    "@patternfly/react-core": "^6.3.0-prerelease.28",
+    "@patternfly/react-icons": "^6.3.0-prerelease.10",
     "@patternfly/react-styles": "^6.3.0-prerelease.9",
     "@patternfly/react-tokens": "^6.3.0-prerelease.9",
     "tslib": "^2.8.1"
@@ -43,5 +43,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "46b82e579ecedf3676a698830fb0a742985e7517"
+  "gitHead": "8d023dd52c1c7a26b192c8679ea6f3c3e357f6d4"
 }