@patternfly/quickstarts 6.3.0-prerelease.5 → 6.3.0-prerelease.7

package/dist/quickstarts.css

@@ -163,6 +163,10 @@
   border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
 }
 
+.pfext-quick-start-footer {
+  padding-top: var(--pf-t--global--spacer--md);
+}
+
 .pfext-quick-start-task {
   flex: 1 1 0;
   overflow: auto;
@@ -174,10 +178,6 @@
   height: initial;
 }
 
-.pfext-quick-start-footer {
-  padding-top: var(--pf-t--global--spacer--md);
-}
-
 .pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link {
   margin-bottom: var(--pf-t--global--spacer--md);
 }

package/dist/quickstarts.min.css

@@ -1 +1 @@
-.pfext-quick-start-panel{--pf-v6-c-drawer__panel--PaddingBlockStart:0}.pfext-popover__base ul{list-style-type:var(--pf-t--global--list-style)}.pfext-markdown-view .h1,.pfext-markdown-view .h2,.pfext-markdown-view .h3,.pfext-markdown-view .h4,.pfext-markdown-view .h5,.pfext-markdown-view .h6,.pfext-markdown-view h1,.pfext-markdown-view h2,.pfext-markdown-view h3,.pfext-markdown-view h4,.pfext-markdown-view h5,.pfext-markdown-view h6{font-family:var(--pf-t--global--font--family--heading);font-weight:var(--pf-t--global--font--weight--heading);line-height:1.1;color:inherit}.pfext-markdown-view .h1,.pfext-markdown-view .h2,.pfext-markdown-view .h3,.pfext-markdown-view h1,.pfext-markdown-view h2,.pfext-markdown-view h3{margin-top:23px;margin-bottom:11.5px}.pfext-markdown-view .h4,.pfext-markdown-view .h5,.pfext-markdown-view .h6,.pfext-markdown-view h4,.pfext-markdown-view h5,.pfext-markdown-view h6{margin-top:11.5px;margin-bottom:11.5px}.pfext-markdown-view .h1,.pfext-markdown-view h1{font-size:var(--pf-t--global--font--size--heading--h1)}.pfext-markdown-view .h2,.pfext-markdown-view h2{font-size:var(--pf-t--global--font--size--heading--h2)}.pfext-markdown-view .h3,.pfext-markdown-view h3{font-size:var(--pf-t--global--font--size--heading--h3)}.pfext-markdown-view .h4,.pfext-markdown-view h4{font-size:var(--pf-t--global--font--size--heading--h4)}.pfext-markdown-view .h5,.pfext-markdown-view h5{font-size:var(--pf-t--global--font--size--heading--h5)}.pfext-markdown-view .h6,.pfext-markdown-view h6{font-size:var(--pf-t--global--font--size--heading--h6)}.pfext-markdown-view p{margin:0 0 11.5px}.pfext-markdown-view ol,.pfext-markdown-view ul{margin-top:0;margin-bottom:11.5px}.pfext-markdown-view ol ol,.pfext-markdown-view ol ul,.pfext-markdown-view ul ol,.pfext-markdown-view ul ul{margin-bottom:0}.pfext-markdown-view dl{margin-top:0;margin-bottom:23px}.pfext-markdown-view dd,.pfext-markdown-view dt{line-height:1.66666667}.pfext-markdown-view dt{font-weight:700}.pfext-markdown-view dd{margin-left:0}.pfext-markdown-view blockquote{padding:11.5px 23px;margin:0 0 23px;font-size:17.5px;border-left:5px solid #f1f1f1}.pfext-markdown-view blockquote ol:last-child,.pfext-markdown-view blockquote p:last-child,.pfext-markdown-view blockquote ul:last-child{margin-bottom:0}.pfext-markdown-view code,.pfext-markdown-view pre{font-family:Menlo,Monaco,Consolas,monospace}.pfext-markdown-view code{padding:2px 4px;font-size:90%;color:#004368;background-color:#def3ff;border-radius:1px}.pfext-markdown-view pre{display:block;padding:11px;margin:0 0 11.5px;font-size:13px;line-height:1.66666667;color:#363636;word-break:break-all;word-wrap:break-word;background-color:#fafafa;border:1px solid #ccc;border-radius:1px}.pfext-markdown-view pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pfext-markdown-view table{background-color:transparent}.pfext-markdown-view table col[class*=col-]{position:static;display:table-column;float:none}.pfext-markdown-view table td[class*=col-],.pfext-markdown-view table th[class*=col-]{position:static;display:table-cell;float:none}.pfext-markdown-view caption{padding-top:10px;padding-bottom:10px;color:#9c9c9c;text-align:left}.pfext-markdown-view th{text-align:left}.pfext-quick-start-panel-content{background-color:var(--pf-t--global--color--brand--default);color:var(--pf-t--global--text--color--inverse);padding:var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg)}.pfext-quick-start-panel-content__body{display:flex;flex-direction:column}.pfext-quick-start-panel-content span.pf-v6-c-button__icon{color:var(--pf-t--global--text--color--inverse)}.pf-v6-theme-dark .pfext-catalog-item-icon__img{filter:brightness(1.5) invert(1) hue-rotate(180deg) saturate(4)}.pfext-catalog-item .pf-v6-c-card__header-main .pf-v6-c-icon__content{display:contents}.pfext-catalog-item.pf-v6-c-card.pf-m-clickable::before,.pfext-catalog-item.pf-v6-c-card.pf-m-selectable::before{border:var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth)}.pfext-quick-start-task{flex:1 1 0;overflow:auto}.pfext-quick-start-task .pf-v6-c-accordion,.pfext-quick-start-task .pf-v6-c-alert,.pfext-quick-start-task .pf-v6-c-code-block{margin-block-end:var(--pf-v6-c-content--MarginBlockEnd)}.pfext-quick-start-task .pf-v6-c-wizard{height:initial}.pfext-quick-start-footer{padding-top:var(--pf-t--global--spacer--md)}.pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link{margin-bottom:var(--pf-t--global--spacer--md)}.pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link.pf-m-current{--pf-v6-c-wizard__nav-link-main--BackgroundColor:transparent}.pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link::before{background-color:var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);color:var(--pf-v6-c-wizard__nav-link--m-current--before--Color);min-width:var(--pf-v6-c-wizard__nav-link--before--Width)}.pfext-quick-start-task-header__title{font-family:var(--pf-t--global--font--family--body);font-weight:var(---pf-t--global--font--weight--body--bold);font-size:var(--pf-t--global--font--size--body--lg)}.pfext-quick-start-task-header__subtitle{font-size:var(--pf-t--global--font--size--body--default);color:var(--pf-t--global--text--color--subtle);font-weight:var(--pf-t--global--font--weight--body)}.pfext-quick-start-task-header__tryagain{display:block;font-size:var(--pf-t--global--font--size--body--default);color:var(--pf-t--global--text--color--subtle);font-weight:var(--pf-t--global--font--weight--body)}@keyframes pfext-spotlight-expand{0%{outline-offset:-4px;outline-width:4px;opacity:1}100%{outline-offset:21px;outline-width:12px;opacity:0}}@keyframes pfext-spotlight-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes pfext-spotlight-fade-out{0%{opacity:1}100%{opacity:0}}.pfext-spotlight{pointer-events:none;position:absolute}.pfext-spotlight__with-backdrop{mix-blend-mode:hard-light}.pfext-spotlight__element-highlight-noanimate{border:var(--pf-t--global--border--width--strong) solid var(--pf-t--global--border--color--brand--default);background-color:var(--pf-t--color--gray--40);z-index:9999}.pfext-spotlight__element-highlight-animate{pointer-events:none;position:absolute;box-shadow:inset 0 0 0 4px var(--pf-t--global--color--brand--default);opacity:0;animation:.4s pfext-spotlight-fade-in 0s ease-in-out,5s pfext-spotlight-fade-out 12.8s ease-in-out;animation-fill-mode:forwards}.pfext-spotlight__element-highlight-animate::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;animation:1.2s pfext-spotlight-expand 1.6s ease-out;animation-fill-mode:forwards;outline:4px solid var(--pf-t--global--color--brand--default);outline-offset:-4px}.pf-v6-c-clipboard-copy{--pf-v6-c-clipboard-copy__toggle-icon--Transition:.2s ease-in 0s;--pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate:90deg;--pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--BackgroundColor:var(--pf-t--global--background--color--primary--default);--pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderColor:var(--pf-t--global--border--color--default);--pf-v6-c-clipboard-copy__expandable-content--BorderRadius:var(--pf-t--global--border--radius--small);--pf-v6-c-clipboard-copy__expandable-content--OutlineOffset:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy__group--Gap:var(--pf-t--global--spacer--gap--control-to-control--default);--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy--m-inline--BackgroundColor:var(--pf-t--global--background--color--secondary--default);--pf-v6-c-clipboard-copy__actions--Gap:var(--pf-t--global--spacer--gap--action-to-action--plain);--pf-v6-c-clipboard-copy__actions--MarginInlineStart:var(--pf-t--global--spacer--gap--text-to-element--compact);--pf-v6-c-clipboard-copy__actions-item--button--Color:var(--pf-t--global--icon--color--subtle);--pf-v6-c-clipboard-copy__actions-item--button--hover--Color:var(--pf-t--global--icon--color--regular);--pf-v6-c-clipboard-copy__text--m-code--FontFamily:var(--pf-t--global--font--family--mono);--pf-v6-c-clipboard-copy__text--m-code--FontSize:var(--pf-t--global--font--size--body--default)}.pf-v6-c-clipboard-copy.pf-m-inline{display:inline;padding-inline-start:var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd);white-space:nowrap;background-color:var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor)}.pf-v6-c-clipboard-copy.pf-m-inline.pf-m-block{display:block}.pf-v6-c-clipboard-copy__text{word-break:break-word;white-space:normal}.pf-v6-c-clipboard-copy__actions{display:inline-flex;gap:var(--pf-v6-c-clipboard-copy__actions--Gap);margin-inline-start:var(--pf-v6-c-clipboard-copy__actions--MarginInlineStart)}.pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain{--pf-v6-c-button--m-plain__icon--Color:var(--pf-v6-c-clipboard-copy__actions-item--button--Color);--pf-v6-c-button--m-plain--hover__icon--Color:var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color)}.pf-v6-c-code-block{--pf-v6-c-code-block--BackgroundColor:var(--pf-t--global--background--color--secondary--default);--pf-v6-c-code-block--BorderRadius:var(--pf-t--global--border--radius--medium);--pf-v6-c-code-block__header--BorderBlockEndWidth:var(--pf-t--global--border--width--divider--default);--pf-v6-c-code-block__header--BorderBlockEndColor:var(--pf-t--global--border--color--default);--pf-v6-c-code-block__header--PaddingBlockStart:var(--pf-t--global--spacer--xs);--pf-v6-c-code-block__header--PaddingBlockEnd:var(--pf-t--global--spacer--xs);--pf-v6-c-code-block__header--PaddingInlineEnd:var(--pf-t--global--spacer--sm);--pf-v6-c-code-block__header--PaddingInlineStart:var(--pf-t--global--spacer--sm);--pf-v6-c-code-block__content--PaddingBlockStart:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingInlineEnd:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingBlockEnd:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingInlineStart:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__pre--FontFamily:var(--pf-t--global--font--family--mono);--pf-v6-c-code-block__pre--FontSize:var(--pf-t--global--font--size--xs)}.pf-v6-c-code-block{background-color:var(--pf-v6-c-code-block--BackgroundColor);border-radius:var(--pf-v6-c-code-block--BorderRadius)}.pf-v6-c-code-block__header{display:flex;padding-block-start:var(--pf-v6-c-code-block__header--PaddingBlockStart);padding-block-end:var(--pf-v6-c-code-block__header--PaddingBlockEnd);padding-inline-start:var(--pf-v6-c-code-block__header--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-code-block__header--PaddingInlineEnd);border-block-end:var(--pf-v6-c-code-block__header--BorderBlockEndWidth) solid var(--pf-v6-c-code-block__header--BorderBlockEndColor)}.pf-v6-c-code-block__actions{display:flex;margin-inline-start:auto}.pf-v6-c-code-block__content{padding-block-start:var(--pf-v6-c-code-block__content--PaddingBlockStart);padding-block-end:var(--pf-v6-c-code-block__content--PaddingBlockEnd);padding-inline-start:var(--pf-v6-c-code-block__content--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-code-block__content--PaddingInlineEnd)}.pf-v6-c-code-block__pre{font-family:var(--pf-v6-c-code-block__pre--FontFamily);font-size:var(--pf-v6-c-code-block__pre--FontSize);overflow-wrap:break-word;white-space:pre-wrap}.pf-v6-c-code-block__code{font-family:var(--pf-v6-c-code-block__code--FontFamily,inherit)}
+.pfext-quick-start-panel{--pf-v6-c-drawer__panel--PaddingBlockStart:0}.pfext-popover__base ul{list-style-type:var(--pf-t--global--list-style)}.pfext-markdown-view .h1,.pfext-markdown-view .h2,.pfext-markdown-view .h3,.pfext-markdown-view .h4,.pfext-markdown-view .h5,.pfext-markdown-view .h6,.pfext-markdown-view h1,.pfext-markdown-view h2,.pfext-markdown-view h3,.pfext-markdown-view h4,.pfext-markdown-view h5,.pfext-markdown-view h6{font-family:var(--pf-t--global--font--family--heading);font-weight:var(--pf-t--global--font--weight--heading);line-height:1.1;color:inherit}.pfext-markdown-view .h1,.pfext-markdown-view .h2,.pfext-markdown-view .h3,.pfext-markdown-view h1,.pfext-markdown-view h2,.pfext-markdown-view h3{margin-top:23px;margin-bottom:11.5px}.pfext-markdown-view .h4,.pfext-markdown-view .h5,.pfext-markdown-view .h6,.pfext-markdown-view h4,.pfext-markdown-view h5,.pfext-markdown-view h6{margin-top:11.5px;margin-bottom:11.5px}.pfext-markdown-view .h1,.pfext-markdown-view h1{font-size:var(--pf-t--global--font--size--heading--h1)}.pfext-markdown-view .h2,.pfext-markdown-view h2{font-size:var(--pf-t--global--font--size--heading--h2)}.pfext-markdown-view .h3,.pfext-markdown-view h3{font-size:var(--pf-t--global--font--size--heading--h3)}.pfext-markdown-view .h4,.pfext-markdown-view h4{font-size:var(--pf-t--global--font--size--heading--h4)}.pfext-markdown-view .h5,.pfext-markdown-view h5{font-size:var(--pf-t--global--font--size--heading--h5)}.pfext-markdown-view .h6,.pfext-markdown-view h6{font-size:var(--pf-t--global--font--size--heading--h6)}.pfext-markdown-view p{margin:0 0 11.5px}.pfext-markdown-view ol,.pfext-markdown-view ul{margin-top:0;margin-bottom:11.5px}.pfext-markdown-view ol ol,.pfext-markdown-view ol ul,.pfext-markdown-view ul ol,.pfext-markdown-view ul ul{margin-bottom:0}.pfext-markdown-view dl{margin-top:0;margin-bottom:23px}.pfext-markdown-view dd,.pfext-markdown-view dt{line-height:1.66666667}.pfext-markdown-view dt{font-weight:700}.pfext-markdown-view dd{margin-left:0}.pfext-markdown-view blockquote{padding:11.5px 23px;margin:0 0 23px;font-size:17.5px;border-left:5px solid #f1f1f1}.pfext-markdown-view blockquote ol:last-child,.pfext-markdown-view blockquote p:last-child,.pfext-markdown-view blockquote ul:last-child{margin-bottom:0}.pfext-markdown-view code,.pfext-markdown-view pre{font-family:Menlo,Monaco,Consolas,monospace}.pfext-markdown-view code{padding:2px 4px;font-size:90%;color:#004368;background-color:#def3ff;border-radius:1px}.pfext-markdown-view pre{display:block;padding:11px;margin:0 0 11.5px;font-size:13px;line-height:1.66666667;color:#363636;word-break:break-all;word-wrap:break-word;background-color:#fafafa;border:1px solid #ccc;border-radius:1px}.pfext-markdown-view pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pfext-markdown-view table{background-color:transparent}.pfext-markdown-view table col[class*=col-]{position:static;display:table-column;float:none}.pfext-markdown-view table td[class*=col-],.pfext-markdown-view table th[class*=col-]{position:static;display:table-cell;float:none}.pfext-markdown-view caption{padding-top:10px;padding-bottom:10px;color:#9c9c9c;text-align:left}.pfext-markdown-view th{text-align:left}.pfext-quick-start-panel-content{background-color:var(--pf-t--global--color--brand--default);color:var(--pf-t--global--text--color--inverse);padding:var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg)}.pfext-quick-start-panel-content__body{display:flex;flex-direction:column}.pfext-quick-start-panel-content span.pf-v6-c-button__icon{color:var(--pf-t--global--text--color--inverse)}.pf-v6-theme-dark .pfext-catalog-item-icon__img{filter:brightness(1.5) invert(1) hue-rotate(180deg) saturate(4)}.pfext-catalog-item .pf-v6-c-card__header-main .pf-v6-c-icon__content{display:contents}.pfext-catalog-item.pf-v6-c-card.pf-m-clickable::before,.pfext-catalog-item.pf-v6-c-card.pf-m-selectable::before{border:var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth)}.pfext-quick-start-footer{padding-top:var(--pf-t--global--spacer--md)}.pfext-quick-start-task{flex:1 1 0;overflow:auto}.pfext-quick-start-task .pf-v6-c-accordion,.pfext-quick-start-task .pf-v6-c-alert,.pfext-quick-start-task .pf-v6-c-code-block{margin-block-end:var(--pf-v6-c-content--MarginBlockEnd)}.pfext-quick-start-task .pf-v6-c-wizard{height:initial}.pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link{margin-bottom:var(--pf-t--global--spacer--md)}.pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link.pf-m-current{--pf-v6-c-wizard__nav-link-main--BackgroundColor:transparent}.pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link::before{background-color:var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);color:var(--pf-v6-c-wizard__nav-link--m-current--before--Color);min-width:var(--pf-v6-c-wizard__nav-link--before--Width)}.pfext-quick-start-task-header__title{font-family:var(--pf-t--global--font--family--body);font-weight:var(---pf-t--global--font--weight--body--bold);font-size:var(--pf-t--global--font--size--body--lg)}.pfext-quick-start-task-header__subtitle{font-size:var(--pf-t--global--font--size--body--default);color:var(--pf-t--global--text--color--subtle);font-weight:var(--pf-t--global--font--weight--body)}.pfext-quick-start-task-header__tryagain{display:block;font-size:var(--pf-t--global--font--size--body--default);color:var(--pf-t--global--text--color--subtle);font-weight:var(--pf-t--global--font--weight--body)}@keyframes pfext-spotlight-expand{0%{outline-offset:-4px;outline-width:4px;opacity:1}100%{outline-offset:21px;outline-width:12px;opacity:0}}@keyframes pfext-spotlight-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes pfext-spotlight-fade-out{0%{opacity:1}100%{opacity:0}}.pfext-spotlight{pointer-events:none;position:absolute}.pfext-spotlight__with-backdrop{mix-blend-mode:hard-light}.pfext-spotlight__element-highlight-noanimate{border:var(--pf-t--global--border--width--strong) solid var(--pf-t--global--border--color--brand--default);background-color:var(--pf-t--color--gray--40);z-index:9999}.pfext-spotlight__element-highlight-animate{pointer-events:none;position:absolute;box-shadow:inset 0 0 0 4px var(--pf-t--global--color--brand--default);opacity:0;animation:.4s pfext-spotlight-fade-in 0s ease-in-out,5s pfext-spotlight-fade-out 12.8s ease-in-out;animation-fill-mode:forwards}.pfext-spotlight__element-highlight-animate::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;animation:1.2s pfext-spotlight-expand 1.6s ease-out;animation-fill-mode:forwards;outline:4px solid var(--pf-t--global--color--brand--default);outline-offset:-4px}.pf-v6-c-clipboard-copy{--pf-v6-c-clipboard-copy__toggle-icon--Transition:.2s ease-in 0s;--pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate:90deg;--pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--BackgroundColor:var(--pf-t--global--background--color--primary--default);--pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderColor:var(--pf-t--global--border--color--default);--pf-v6-c-clipboard-copy__expandable-content--BorderRadius:var(--pf-t--global--border--radius--small);--pf-v6-c-clipboard-copy__expandable-content--OutlineOffset:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy__group--Gap:var(--pf-t--global--spacer--gap--control-to-control--default);--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy--m-inline--BackgroundColor:var(--pf-t--global--background--color--secondary--default);--pf-v6-c-clipboard-copy__actions--Gap:var(--pf-t--global--spacer--gap--action-to-action--plain);--pf-v6-c-clipboard-copy__actions--MarginInlineStart:var(--pf-t--global--spacer--gap--text-to-element--compact);--pf-v6-c-clipboard-copy__actions-item--button--Color:var(--pf-t--global--icon--color--subtle);--pf-v6-c-clipboard-copy__actions-item--button--hover--Color:var(--pf-t--global--icon--color--regular);--pf-v6-c-clipboard-copy__text--m-code--FontFamily:var(--pf-t--global--font--family--mono);--pf-v6-c-clipboard-copy__text--m-code--FontSize:var(--pf-t--global--font--size--body--default)}.pf-v6-c-clipboard-copy.pf-m-inline{display:inline;padding-inline-start:var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd);white-space:nowrap;background-color:var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor)}.pf-v6-c-clipboard-copy.pf-m-inline.pf-m-block{display:block}.pf-v6-c-clipboard-copy__text{word-break:break-word;white-space:normal}.pf-v6-c-clipboard-copy__actions{display:inline-flex;gap:var(--pf-v6-c-clipboard-copy__actions--Gap);margin-inline-start:var(--pf-v6-c-clipboard-copy__actions--MarginInlineStart)}.pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain{--pf-v6-c-button--m-plain__icon--Color:var(--pf-v6-c-clipboard-copy__actions-item--button--Color);--pf-v6-c-button--m-plain--hover__icon--Color:var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color)}.pf-v6-c-code-block{--pf-v6-c-code-block--BackgroundColor:var(--pf-t--global--background--color--secondary--default);--pf-v6-c-code-block--BorderRadius:var(--pf-t--global--border--radius--medium);--pf-v6-c-code-block__header--BorderBlockEndWidth:var(--pf-t--global--border--width--divider--default);--pf-v6-c-code-block__header--BorderBlockEndColor:var(--pf-t--global--border--color--default);--pf-v6-c-code-block__header--PaddingBlockStart:var(--pf-t--global--spacer--xs);--pf-v6-c-code-block__header--PaddingBlockEnd:var(--pf-t--global--spacer--xs);--pf-v6-c-code-block__header--PaddingInlineEnd:var(--pf-t--global--spacer--sm);--pf-v6-c-code-block__header--PaddingInlineStart:var(--pf-t--global--spacer--sm);--pf-v6-c-code-block__content--PaddingBlockStart:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingInlineEnd:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingBlockEnd:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingInlineStart:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__pre--FontFamily:var(--pf-t--global--font--family--mono);--pf-v6-c-code-block__pre--FontSize:var(--pf-t--global--font--size--xs)}.pf-v6-c-code-block{background-color:var(--pf-v6-c-code-block--BackgroundColor);border-radius:var(--pf-v6-c-code-block--BorderRadius)}.pf-v6-c-code-block__header{display:flex;padding-block-start:var(--pf-v6-c-code-block__header--PaddingBlockStart);padding-block-end:var(--pf-v6-c-code-block__header--PaddingBlockEnd);padding-inline-start:var(--pf-v6-c-code-block__header--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-code-block__header--PaddingInlineEnd);border-block-end:var(--pf-v6-c-code-block__header--BorderBlockEndWidth) solid var(--pf-v6-c-code-block__header--BorderBlockEndColor)}.pf-v6-c-code-block__actions{display:flex;margin-inline-start:auto}.pf-v6-c-code-block__content{padding-block-start:var(--pf-v6-c-code-block__content--PaddingBlockStart);padding-block-end:var(--pf-v6-c-code-block__content--PaddingBlockEnd);padding-inline-start:var(--pf-v6-c-code-block__content--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-code-block__content--PaddingInlineEnd)}.pf-v6-c-code-block__pre{font-family:var(--pf-v6-c-code-block__pre--FontFamily);font-size:var(--pf-v6-c-code-block__pre--FontSize);overflow-wrap:break-word;white-space:pre-wrap}.pf-v6-c-code-block__code{font-family:var(--pf-v6-c-code-block__code--FontFamily,inherit)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "6.3.0-prerelease.5",
+  "version": "6.3.0-prerelease.7",
   "description": "PatternFly quick starts",
   "files": [
     "src",
@@ -66,7 +66,7 @@
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.1.0",
-    "@testing-library/react": "^11.2.2",
+    "@testing-library/react": "^13.4.0",
     "@types/dompurify": "^3.0.5",
     "@types/enzyme": "^3.10.7",
     "@types/enzyme-adapter-react-16": "^1.0.6",

package/src/ConsoleInternal/components/markdown-view.tsx

@@ -25,7 +25,7 @@ export const markdownConvert = async (markdown: string, extensions?: ShowdownExt
       return node;
     }
 
-    // add PF content classes
+    // add PF content classes to standard elements (details blocks get handled separately)
     if (node.nodeType === 1) {
       const contentElements = [
         'ul',
@@ -85,7 +85,90 @@ export const markdownConvert = async (markdown: string, extensions?: ShowdownExt
   );
   const markdownWithSubstitutedCodeFences = reverseString(reverseMarkdownWithSubstitutedCodeFences);
 
-  const parsedMarkdown = await marked.parse(markdownWithSubstitutedCodeFences);
+  // Fix malformed HTML entities early in the process
+  let preprocessedMarkdown = markdownWithSubstitutedCodeFences;
+  preprocessedMarkdown = preprocessedMarkdown
+    .replace(/&nbsp([^;])/g, ' $1')
+    .replace(/ /g, ' ');
+  preprocessedMarkdown = preprocessedMarkdown.replace(/&nbsp(?![;])/g, ' ');
+
+  // Process content in segments to ensure markdown parsing continues after HTML blocks
+  const htmlBlockRegex =
+    /(<(?:details|div|section|article)[^>]*>[\s\S]*?<\/(?:details|div|section|article)>)/g;
+
+  let parsedMarkdown = '';
+
+  // Check if there are any HTML blocks
+  if (htmlBlockRegex.test(preprocessedMarkdown)) {
+    // Reset regex for actual processing
+    htmlBlockRegex.lastIndex = 0;
+
+    let lastIndex = 0;
+    let match;
+
+    while ((match = htmlBlockRegex.exec(preprocessedMarkdown)) !== null) {
+      // Process markdown before the HTML block
+      const markdownBefore = preprocessedMarkdown.slice(lastIndex, match.index).trim();
+      if (markdownBefore) {
+        const parsed = await marked.parse(markdownBefore);
+        parsedMarkdown += parsed;
+      }
+
+      // Process the HTML block: parse markdown content inside while preserving HTML structure
+      let htmlBlock = match[1];
+
+      // Find and process markdown content inside HTML tags
+      const contentRegex = />(\s*[\s\S]*?)\s*</g;
+      const contentMatches = [];
+      let contentMatch;
+
+      while ((contentMatch = contentRegex.exec(htmlBlock)) !== null) {
+        const content = contentMatch[1];
+        // Only process content that has markdown formatting but no extension syntax
+        if (
+          content.trim() &&
+          !content.includes('{{') &&
+          (content.includes('**') || content.includes('- ') || content.includes('\n'))
+        ) {
+          // This looks like markdown content without extensions - parse it as block content
+          const parsedContent = await marked.parse(content.trim());
+          // Remove wrapping <p> tags if they exist since we're inside HTML already
+          const cleanedContent = parsedContent.replace(/^<p[^>]*>([\s\S]*)<\/p>[\s]*$/g, '$1');
+          contentMatches.push({
+            original: contentMatch[0],
+            replacement: `>${cleanedContent}<`,
+          });
+        }
+      }
+
+      // Apply the content replacements
+      contentMatches.forEach(({ original, replacement }) => {
+        htmlBlock = htmlBlock.replace(original, replacement);
+      });
+
+      // Apply extensions (like admonitions) to the processed HTML block
+      if (extensions) {
+        extensions.forEach(({ regex, replace }) => {
+          if (regex) {
+            htmlBlock = htmlBlock.replace(regex, replace);
+          }
+        });
+      }
+
+      parsedMarkdown += htmlBlock;
+      lastIndex = htmlBlockRegex.lastIndex;
+    }
+
+    // Process any remaining markdown after the last HTML block
+    const markdownAfter = preprocessedMarkdown.slice(lastIndex).trim();
+    if (markdownAfter) {
+      const parsed = await marked.parse(markdownAfter);
+      parsedMarkdown += parsed;
+    }
+  } else {
+    // No HTML blocks found, process normally
+    parsedMarkdown = await marked.parse(preprocessedMarkdown);
+  }
   // Swap the temporary tokens back to code fences before we run the extensions
   let md = parsedMarkdown.replace(/@@@/g, '```');
 
@@ -93,7 +176,7 @@ export const markdownConvert = async (markdown: string, extensions?: ShowdownExt
     // Convert code spans back to md format before we run the custom extension regexes
     md = md.replace(/<code>(.*)<\/code>/g, '`$1`');
 
-    extensions.forEach(({ regex, replace }) => {
+    extensions.forEach(({ regex, replace }, _index) => {
       if (regex) {
         md = md.replace(regex, replace);
       }
@@ -102,6 +185,7 @@ export const markdownConvert = async (markdown: string, extensions?: ShowdownExt
     // Convert any remaining backticks back into code spans
     md = md.replace(/`(.*)`/g, '<code>$1</code>');
   }
+
   return DOMPurify.sanitize(md);
 };
 
@@ -210,7 +294,10 @@ const InlineMarkdownView: FC<InnerSyncMarkdownProps> = ({
   const id = useMemo(() => uniqueId('markdown'), []);
   return (
     <div className={css({ 'is-empty': isEmpty } as any, className)} id={id}>
-      <div dangerouslySetInnerHTML={{ __html: markup }} />
+      <div
+        style={{ marginBlockEnd: 'var(--pf-t-global--spacer--md)' }}
+        dangerouslySetInnerHTML={{ __html: markup }}
+      />
       {renderExtension && (
         <RenderExtension renderExtension={renderExtension} selector={`#${id}`} markup={markup} />
       )}
@@ -299,6 +386,7 @@ const IFrameMarkdownView: FC<InnerSyncMarkdownProps> = ({
   return (
     <>
       <iframe
+        title="Markdown content preview"
         sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin"
         srcDoc={contents}
         style={{ border: '0px', display: 'block', width: '100%', height: '0' }}

package/src/ConsoleShared/src/components/markdown-extensions/__tests__/accordion-extension.spec.tsx

@@ -0,0 +1,105 @@
+// Generated by Cursor
+// AI-assisted implementation with human review and modifications
+import { renderHook } from '@testing-library/react';
+import useAccordionShowdownExtension from '../accordion-extension';
+import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from '../const';
+import { marked } from 'marked';
+
+// Mock marked
+jest.mock('marked', () => ({
+  marked: {
+    parseInline: jest.fn((text) => `<em>${text}</em>`),
+  },
+}));
+
+// Mock DOMPurify
+jest.mock('dompurify', () => ({
+  sanitize: jest.fn((html) => html),
+}));
+
+describe('useAccordionShowdownExtension', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return a showdown extension with correct properties', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const extension = result.current;
+
+    expect(extension.type).toBe('lang');
+    expect(extension.regex).toEqual(/\[(.+)]{{(accordion) (&quot;(.*?)&quot;)}}/g);
+    expect(typeof extension.replace).toBe('function');
+  });
+
+  it('should match accordion syntax with HTML-encoded quotes', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const { regex } = result.current;
+
+    const testText = '[Some content]{{accordion &quot;My Title&quot;}}';
+    const matches = regex.exec(testText);
+
+    expect(matches).not.toBeNull();
+    if (matches) {
+      expect(matches[1]).toBe('Some content');
+      expect(matches[2]).toBe('accordion');
+      expect(matches[4]).toBe('My Title');
+    }
+  });
+
+  it('should not match accordion syntax with regular quotes', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const { regex } = result.current;
+
+    const testText = '[Some content]{{accordion "My Title"}}';
+    expect(testText.match(regex)).toBeNull();
+  });
+
+  it('should generate correct accordion HTML structure', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const { replace } = result.current;
+
+    const html = replace(
+      '[Test content]{{accordion &quot;Test Title&quot;}}',
+      'Test content',
+      'accordion',
+      '&quot;Test Title&quot;',
+      'Test Title',
+    );
+
+    expect(html).toContain('pf-v6-c-accordion');
+    expect(html).toContain('pf-v6-c-accordion__toggle');
+    expect(html).toContain(`${ACCORDION_MARKDOWN_BUTTON_ID}-Test-Title`);
+    expect(html).toContain(`${ACCORDION_MARKDOWN_CONTENT_ID}-Test-Title`);
+    expect(html).toContain('Test Title');
+  });
+
+  it('should process content through marked and sanitize HTML', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const { replace } = result.current;
+
+    replace(
+      '[**Bold text**]{{accordion &quot;Title&quot;}}',
+      '**Bold text**',
+      'accordion',
+      '&quot;Title&quot;',
+      'Title',
+    );
+
+    expect(marked.parseInline).toHaveBeenCalledWith('**Bold text**');
+  });
+
+  it('should handle titles with spaces in IDs', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const { replace } = result.current;
+
+    const html = replace(
+      '[Content]{{accordion &quot;My Test Title&quot;}}',
+      'Content',
+      'accordion',
+      '&quot;My Test Title&quot;',
+      'My Test Title',
+    );
+
+    expect(html).toContain(`${ACCORDION_MARKDOWN_BUTTON_ID}-My-Test-Title`);
+  });
+});

package/src/ConsoleShared/src/components/markdown-extensions/__tests__/admonition-extension.spec.tsx

@@ -0,0 +1,121 @@
+import { renderHook } from '@testing-library/react';
+import useAdmonitionShowdownExtension from '../admonition-extension';
+import { marked } from 'marked';
+
+// Mock marked
+jest.mock('marked', () => ({
+  marked: {
+    parseInline: jest.fn((text) => `<strong>${text}</strong>`),
+  },
+}));
+
+// Mock DOMPurify
+jest.mock('dompurify', () => ({
+  sanitize: jest.fn((html) => html),
+}));
+
+describe('useAdmonitionShowdownExtension', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return a showdown extension with correct properties', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const extension = result.current;
+
+    expect(extension.type).toBe('lang');
+    expect(extension.regex).toEqual(/\[(.+)]{{(admonition) ([\w-]+)}}/g);
+    expect(typeof extension.replace).toBe('function');
+  });
+
+  it('should match different admonition types', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { regex } = result.current;
+
+    const admonitionTypes = ['note', 'tip', 'important', 'warning', 'caution', 'custom-type'];
+
+    admonitionTypes.forEach((type) => {
+      const testText = `[Content for ${type}]{{admonition ${type}}}`;
+      // Reset regex state for global flag
+      regex.lastIndex = 0;
+      const matches = regex.exec(testText);
+
+      expect(matches).not.toBeNull();
+      if (matches) {
+        expect(matches[1]).toBe(`Content for ${type}`);
+        expect(matches[2]).toBe('admonition');
+        expect(matches[3]).toBe(type);
+      }
+    });
+  });
+
+  it('should not match malformed admonition syntax', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { regex } = result.current;
+
+    const malformedCases = [
+      'Content]{{admonition note}}',
+      '[Content{{admonition note}}',
+      '[Content]{{admonition}}',
+      '[Content]{{notadmonition note}}',
+    ];
+
+    malformedCases.forEach((testCase) => {
+      expect(testCase.match(regex)).toBeNull();
+    });
+  });
+
+  it('should generate correct alert HTML structure', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { replace } = result.current;
+
+    const html = replace('[Test message]{{admonition note}}', 'Test message', 'admonition', 'note');
+
+    expect(html).toContain('pf-v6-c-alert');
+    expect(html).toContain('pf-m-info'); // note maps to info variant
+    expect(html).toContain('pf-m-inline');
+    expect(html).toContain('pfext-markdown-admonition');
+    expect(html).toContain('NOTE'); // uppercase title
+  });
+
+  it('should handle different admonition types with correct variants', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { replace } = result.current;
+
+    const testCases = [
+      { type: 'note', expectedClass: 'pf-m-info' },
+      { type: 'warning', expectedClass: 'pf-m-warning' },
+      { type: 'important', expectedClass: 'pf-m-danger' },
+    ];
+
+    testCases.forEach(({ type, expectedClass }) => {
+      const html = replace(`[Content]{{admonition ${type}}}`, 'Content', 'admonition', type);
+
+      expect(html).toContain(expectedClass);
+      expect(html).toContain(type.toUpperCase());
+    });
+  });
+
+  it('should process content through marked', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { replace } = result.current;
+
+    replace('[**Bold text**]{{admonition note}}', '**Bold text**', 'admonition', 'note');
+
+    expect(marked.parseInline).toHaveBeenCalledWith('**Bold text**');
+  });
+
+  it('should return original text for invalid cases', () => {
+    const { result } = renderHook(() => useAdmonitionShowdownExtension());
+    const { replace } = result.current;
+
+    // Missing content
+    const originalText = '[Content]{{admonition note}}';
+    const result1 = replace(originalText, '', 'admonition', 'note');
+    expect(result1).toBe(originalText);
+
+    // Wrong command
+    const result2 = replace(originalText, 'Content', 'not-admonition', 'note');
+    expect(result2).toBe(originalText);
+  });
+});

package/src/ConsoleShared/src/components/markdown-extensions/accordion-extension.tsx

@@ -8,34 +8,41 @@ import {
 import { renderToStaticMarkup } from 'react-dom/server';
 import { removeTemplateWhitespace } from './utils';
 import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
+import { marked } from 'marked';
+
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const DOMPurify = require('dompurify');
 
 const useAccordionShowdownExtension = () =>
   useMemo(
     () => ({
       type: 'lang',
-      regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
+      regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
       replace: (
         _text: string,
         accordionContent: string,
         _command: string,
+        _quotedHeading: string,
         accordionHeading: string,
       ): string => {
         const accordionId = String(accordionHeading).replace(/\s/g, '-');
 
+        // Process accordion content with markdown
+        const processedContent = marked.parseInline(accordionContent);
+        const sanitizedContent = DOMPurify.sanitize(processedContent);
+
         return removeTemplateWhitespace(
           renderToStaticMarkup(
-            <>
-              <Accordion asDefinitionList>
-                <AccordionItem isExpanded={false}>
-                  <AccordionToggle id={`${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}`}>
-                    {accordionHeading}
-                  </AccordionToggle>
-                  <AccordionContent id={`${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`}>
-                    {accordionContent}
-                  </AccordionContent>
-                </AccordionItem>
-              </Accordion>
-            </>,
+            <Accordion>
+              <AccordionItem>
+                <AccordionToggle id={`${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}`}>
+                  {accordionHeading}
+                </AccordionToggle>
+                <AccordionContent id={`${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`} hidden>
+                  <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>,
           ),
         );
       },

package/src/ConsoleShared/src/components/markdown-extensions/accordion-render-extension.tsx

@@ -14,14 +14,28 @@ const AccordionShowdownHandler: FC<AccordionShowdownComponentProps> = ({
   const [expanded, setExpanded] = useState<boolean>(false);
 
   const handleClick = () => {
+    const newExpanded = !expanded;
     const expandedModifier = 'pf-m-expanded';
 
-    buttonElement.className = `pf-v6-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
-    contentElement.hidden = expanded;
-    contentElement.className = `pf-v6-c-accordion__expanded-content ${
-      !expanded ? expandedModifier : ''
+    // Find the accordion item element (parent of the button)
+    const accordionItem = buttonElement.closest('.pf-v6-c-accordion__item');
+
+    // Update button - both visual state and aria-expanded
+    buttonElement.className = `pf-v6-c-accordion__toggle ${newExpanded ? expandedModifier : ''}`;
+    buttonElement.setAttribute('aria-expanded', newExpanded.toString());
+
+    // Update content - both visual state and hidden attribute
+    contentElement.hidden = !newExpanded;
+    contentElement.className = `pf-v6-c-accordion__expandable-content ${
+      newExpanded ? expandedModifier : ''
     }`;
-    setExpanded(!expanded);
+
+    // Update accordion item
+    if (accordionItem) {
+      accordionItem.className = `pf-v6-c-accordion__item ${newExpanded ? expandedModifier : ''}`;
+    }
+
+    setExpanded(newExpanded);
   };
 
   useEventListener(buttonElement, 'click', handleClick);

package/src/ConsoleShared/src/components/markdown-extensions/admonition-extension.tsx

@@ -4,7 +4,10 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { Alert } from '@patternfly/react-core';
 import LightbulbIcon from '@patternfly/react-icons/dist/js/icons/lightbulb-icon';
 import FireIcon from '@patternfly/react-icons/dist/js/icons/fire-icon';
-import QuickStartMarkdownView from '../../../../QuickStartMarkdownView';
+import { marked } from 'marked';
+
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const DOMPurify = require('dompurify');
 
 enum AdmonitionType {
   TIP = 'TIP',
@@ -33,15 +36,23 @@ const useAdmonitionShowdownExtension = () =>
         content: string,
         admonitionLabel: string,
         admonitionType: string,
-        groupId: string,
       ): string => {
-        if (!content || !admonitionLabel || !admonitionType || !groupId) {
+        if (!content || !admonitionLabel || !admonitionType) {
+          return text;
+        }
+        if (admonitionLabel !== 'admonition') {
           return text;
         }
         admonitionType = admonitionType.toUpperCase();
 
-        const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
-        const mdContent = <QuickStartMarkdownView content={content} />;
+        // Process markdown content directly using marked
+        const processedContent = marked.parseInline(content);
+        const sanitizedContent = DOMPurify.sanitize(processedContent);
+
+        // Handle unknown admonition types by defaulting to NOTE
+        const admonitionConfig =
+          admonitionToAlertVariantMap[admonitionType] || admonitionToAlertVariantMap.NOTE;
+        const { variant, customIcon } = admonitionConfig;
         const pfAlert = (
           <Alert
             variant={variant}
@@ -50,7 +61,7 @@ const useAdmonitionShowdownExtension = () =>
             title={admonitionType}
             className="pfext-markdown-admonition"
           >
-            {mdContent}
+            <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
           </Alert>
         );
         return removeTemplateWhitespace(renderToStaticMarkup(pfAlert));

package/src/QuickStartDrawerContent.tsx

@@ -24,7 +24,9 @@ export const QuickStartDrawerContent: FC<QuickStartDrawerContentProps> = ({
     allQuickStarts = [],
     activeQuickStartState,
   } = useContext<QuickStartContextValues>(QuickStartContext);
-  const combinedQuickStarts = allQuickStarts.concat(quickStarts);
+  const combinedQuickStarts = [...allQuickStarts, ...quickStarts].filter(
+    (qs, idx, arr) => arr.findIndex((q) => q.metadata.name === qs.metadata.name) === idx,
+  );
 
   const handleClose = () => {
     handleDrawerClose && handleDrawerClose(activeQuickStartState?.status);

package/src/catalog/Toolbar/QuickStartCatalogFilterItems.tsx

@@ -72,10 +72,7 @@ export const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
   const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
   return (
     <ToolbarItem align={{ default: 'alignEnd' }}>
-      {getResource('{{count, number}} item', quickStartsCount).replace(
-        '{{count, number}}',
-        quickStartsCount,
-      )}
+      {getResource('{{count, number}} item', quickStartsCount)}
     </ToolbarItem>
   );
 };

package/src/controller/QuickStartIntroduction.tsx

@@ -47,7 +47,7 @@ const QuickStartIntroduction: FC<QuickStartIntroductionProps> = ({
       <p>
         {getResource(
           'In this quick start, you will complete {{count, number}} task',
-          tasks?.length,
+          tasks?.length || 0,
         ).replace('{{count, number}}', tasks?.length || 0)}
         :
       </p>