@patternfly/quickstarts 2.3.3 → 2.4.0

package/dist/patternfly-nested.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
- .pfext-quick-start__base .pf-c-select, .pfext-quick-start__base .pf-c-menu, .pfext-quick-start__base .pf-c-input-group, .pfext-quick-start__base .pf-c-form-control, .pfext-quick-start__base .pf-c-chip-group, .pfext-quick-start__base .pf-c-chip, .pfext-quick-start__base .pf-c-alert {
+ .pfext-quick-start__base .pf-c-select, .pfext-quick-start__base .pf-c-menu, .pfext-quick-start__base .pf-c-input-group, .pfext-quick-start__base .pf-c-form-control, .pfext-quick-start__base .pf-c-chip-group, .pfext-quick-start__base .pf-c-chip, .pfext-quick-start__base .pf-c-alert, .pfext-quick-start__base .pf-c-accordion {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
   --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -294,6 +294,209 @@
   --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
   --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
 }
+.pfext-quick-start__base .pf-c-accordion {
+  --pf-c-accordion--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-accordion__toggle--before--BackgroundColor: transparent;
+  --pf-c-accordion__toggle--before--Top: 0;
+  --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg);
+  --pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
+  --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color);
+  --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color);
+  --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color);
+  --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color);
+  --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
+  --pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200);
+  --pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-accordion__expanded-content--m-fixed--MaxHeight: 9.375rem;
+  --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0;
+  --pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent;
+  --pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg);
+  --pf-c-accordion__expanded-content-body--before--Top: 0;
+  --pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-accordion--m-display-lg__toggle--FontSize: var(--pf-global--FontSize--xl);
+  --pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-global--Color--100);
+  --pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-global--Color--100);
+  --pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color: var(--pf-global--Color--100);
+  --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100);
+  --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100);
+  --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0;
+  --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100);
+  --pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm));
+  --pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0;
+  --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100);
+  color: var(--pf-global--Color--100);
+  background-color: var(--pf-c-accordion--BackgroundColor);
+}
+.pfext-quick-start__base .pf-c-accordion.pf-m-display-lg {
+  --pf-c-accordion__toggle--PaddingTop: var(--pf-c-accordion--m-display-lg__toggle--PaddingTop);
+  --pf-c-accordion__toggle--PaddingRight: var(--pf-c-accordion--m-display-lg__toggle--PaddingRight);
+  --pf-c-accordion__toggle--PaddingBottom: var(--pf-c-accordion--m-display-lg__toggle--PaddingBottom);
+  --pf-c-accordion__toggle--PaddingLeft: var(--pf-c-accordion--m-display-lg__toggle--PaddingLeft);
+  --pf-c-accordion__toggle--FontFamily: var(--pf-c-accordion--m-display-lg__toggle--FontFamily);
+  --pf-c-accordion__toggle--FontSize: var(--pf-c-accordion--m-display-lg__toggle--FontSize);
+  --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color);
+  --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color);
+  --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight);
+  --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color);
+  --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight);
+  --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color);
+  --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
+  --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop);
+  --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight);
+  --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom);
+  --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft);
+  --pf-c-accordion__expanded-content--FontSize: var(--pf-c-accordion--m-display-lg__expanded-content--FontSize);
+  --pf-c-accordion__expanded-content--Color: var(--pf-c-accordion--m-display-lg__expanded-content--Color);
+}
+.pfext-quick-start__base .pf-c-accordion.pf-m-display-lg .pf-c-accordion__expanded-content-body:last-child {
+  --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom);
+}
+.pfext-quick-start__base .pf-c-accordion.pf-m-bordered {
+  --pf-c-accordion__toggle--before--Top: var(--pf-c-accordion--m-bordered__toggle--before--Top);
+  border-top: var(--pf-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-c-accordion--m-bordered--BorderTopColor);
+}
+.pfext-quick-start__base .pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border: solid var(--pf-c-accordion--m-bordered__toggle--after--BorderColor);
+  border-width: var(--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth) 0 var(--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth);
+}
+.pfext-quick-start__base .pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle.pf-m-expanded {
+  --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: 0;
+}
+.pfext-quick-start__base .pf-c-accordion.pf-m-bordered .pf-c-accordion__expanded-content.pf-m-expanded .pf-c-accordion__expanded-content-body:last-child::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+  border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
+}
+.pfext-quick-start__base .pf-c-accordion__toggle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--pf-c-accordion__toggle--PaddingTop) var(--pf-c-accordion__toggle--PaddingRight) var(--pf-c-accordion__toggle--PaddingBottom) var(--pf-c-accordion__toggle--PaddingLeft);
+  font-family: var(--pf-c-accordion__toggle--FontFamily, inherit);
+  font-size: var(--pf-c-accordion__toggle--FontSize, inherit);
+  border: 0;
+}
+.pfext-quick-start__base .pf-c-accordion__toggle::after {
+  position: absolute;
+  top: var(--pf-c-accordion__toggle--before--Top);
+  bottom: 0;
+  left: 0;
+  width: var(--pf-c-accordion__toggle--before--Width);
+  content: "";
+  background-color: var(--pf-c-accordion__toggle--before--BackgroundColor);
+}
+.pfext-quick-start__base .pf-c-accordion__toggle.pf-m-expanded {
+  --pf-c-accordion__toggle--before--BackgroundColor: var(--pf-c-accordion__toggle--m-expanded--before--BackgroundColor);
+}
+.pfext-quick-start__base .pf-c-accordion__toggle.pf-m-expanded .pf-c-accordion__toggle-text {
+  font-weight: var(--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
+  color: var(--pf-c-accordion__toggle--m-expanded__toggle-text--Color);
+}
+.pfext-quick-start__base .pf-c-accordion__toggle.pf-m-expanded .pf-c-accordion__toggle-icon {
+  transform: rotate(var(--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
+}
+.pfext-quick-start__base .pf-c-accordion__toggle:hover {
+  background-color: var(--pf-c-accordion__toggle--hover--BackgroundColor);
+}
+.pfext-quick-start__base .pf-c-accordion__toggle:hover .pf-c-accordion__toggle-text {
+  color: var(--pf-c-accordion__toggle--hover__toggle-text--Color);
+}
+.pfext-quick-start__base .pf-c-accordion__toggle:focus {
+  background-color: var(--pf-c-accordion__toggle--focus--BackgroundColor);
+}
+.pfext-quick-start__base .pf-c-accordion__toggle:focus .pf-c-accordion__toggle-text {
+  font-weight: var(--pf-c-accordion__toggle--focus__toggle-text--FontWeight);
+  color: var(--pf-c-accordion__toggle--focus__toggle-text--Color);
+}
+.pfext-quick-start__base .pf-c-accordion__toggle:active {
+  background-color: var(--pf-c-accordion__toggle--active--BackgroundColor);
+}
+.pfext-quick-start__base .pf-c-accordion__toggle:active .pf-c-accordion__toggle-text {
+  font-weight: var(--pf-c-accordion__toggle--active__toggle-text--FontWeight);
+  color: var(--pf-c-accordion__toggle--active__toggle-text--Color);
+}
+.pfext-quick-start__base .pf-c-accordion__toggle-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: var(--pf-c-accordion__toggle-text--MaxWidth);
+}
+.pfext-quick-start__base .pf-c-accordion__toggle-icon {
+  transition: var(--pf-c-accordion__toggle-icon--Transition);
+}
+.pfext-quick-start__base .pf-c-accordion__expanded-content {
+  font-size: var(--pf-c-accordion__expanded-content--FontSize);
+  color: var(--pf-c-accordion__expanded-content--Color);
+}
+.pfext-quick-start__base .pf-c-accordion__expanded-content.pf-m-fixed {
+  max-height: var(--pf-c-accordion__expanded-content--m-fixed--MaxHeight);
+  overflow-y: auto;
+}
+.pfext-quick-start__base .pf-c-accordion__expanded-content.pf-m-expanded {
+  --pf-c-accordion__expanded-content-body--before--BackgroundColor: var(--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor);
+}
+.pfext-quick-start__base .pf-c-accordion__expanded-content-body {
+  position: relative;
+  padding: var(--pf-c-accordion__expanded-content-body--PaddingTop) var(--pf-c-accordion__expanded-content-body--PaddingRight) var(--pf-c-accordion__expanded-content-body--PaddingBottom) var(--pf-c-accordion__expanded-content-body--PaddingLeft);
+}
+.pfext-quick-start__base .pf-c-accordion__expanded-content-body::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--pf-c-accordion__expanded-content-body--before--Width);
+  content: "";
+  background-color: var(--pf-c-accordion__expanded-content-body--before--BackgroundColor);
+}
+.pfext-quick-start__base .pf-c-accordion__expanded-content-body + .pfext-quick-start__base .pf-c-accordion__expanded-content-body {
+  --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop);
+}
 .pfext-quick-start__base :where(.pf-theme-dark) .pf-c-wizard__header {
   --pf-global--Color--100: #e0e0e0;
   --pf-global--Color--200: #aaabac;
@@ -320,6 +523,11 @@
   --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
   --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
 }
+.pfext-quick-start__base :where(.pf-theme-dark) .pf-c-accordion {
+  --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
 .pfext-quick-start__base .pf-c-alert {
   --pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg);
   --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100);

package/dist/quickstarts-full.es.js

@@ -300,7 +300,7 @@ function css$2(...args) {
     return classes.join(' ');
 }
 
-var styles$v = {
+var styles$w = {
   "backdrop": "pf-c-backdrop",
   "backdropOpen": "pf-c-backdrop__open"
 };
@@ -4167,11 +4167,11 @@ const getResizeObserver = (containerRefElement, handleResize, useRequestAnimatio
     };
 };
 
-var styles$u = {
+var styles$v = {
   "bullseye": "pf-l-bullseye"
 };
 
-var styles$t = {
+var styles$u = {
   "content": "pf-c-content",
   "modifiers": {
     "visited": "pf-m-visited",
@@ -4179,7 +4179,7 @@ var styles$t = {
   }
 };
 
-var styles$s = {
+var styles$t = {
   "modifiers": {
     "4xl": "pf-m-4xl",
     "3xl": "pf-m-3xl",
@@ -4213,7 +4213,7 @@ var headingLevelSizeMap;
 const Title = (_a) => {
     var { className = '', children = '', headingLevel: HeadingLevel, size = headingLevelSizeMap[HeadingLevel], ouiaId, ouiaSafe = true } = _a, props = __rest(_a, ["className", "children", "headingLevel", "size", "ouiaId", "ouiaSafe"]);
     const ouiaProps = useOUIAProps(Title.displayName, ouiaId, ouiaSafe);
-    return (React.createElement(HeadingLevel, Object.assign({}, ouiaProps, props, { className: css$2(styles$s.title, size && styles$s.modifiers[size], className) }), children));
+    return (React.createElement(HeadingLevel, Object.assign({}, ouiaProps, props, { className: css$2(styles$t.title, size && styles$t.modifiers[size], className) }), children));
 };
 Title.displayName = 'Title';
 
@@ -4251,7 +4251,7 @@ var buttonStyles = {
   "themeDark": "pf-theme-dark"
 };
 
-var styles$r = {
+var styles$s = {
   "modifiers": {
     "inline": "pf-m-inline",
     "sm": "pf-m-sm",
@@ -4278,10 +4278,10 @@ const Spinner = (_a) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', size = 'xl', 'aria-valuetext': ariaValueText = 'Loading...', isSVG = false, diameter, isInline = false, 'aria-label': ariaLabel, 'aria-labelledBy': ariaLabelledBy } = _a, props = __rest(_a, ["className", "size", 'aria-valuetext', "isSVG", "diameter", "isInline", 'aria-label', 'aria-labelledBy']);
     const Component = isSVG ? 'svg' : 'span';
-    return (React.createElement(Component, Object.assign({ className: css$2(styles$r.spinner, isInline ? styles$r.modifiers.inline : styles$r.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText }, (isSVG && { viewBox: '0 0 100 100' }), (diameter && { style: { '--pf-c-spinner--diameter': diameter } }), (ariaLabel && { 'aria-label': ariaLabel }), (ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy }), (!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' }), props), isSVG ? (React.createElement("circle", { className: styles$r.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })) : (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: css$2(styles$r.spinnerClipper) }),
-        React.createElement("span", { className: css$2(styles$r.spinnerLeadBall) }),
-        React.createElement("span", { className: css$2(styles$r.spinnerTailBall) })))));
+    return (React.createElement(Component, Object.assign({ className: css$2(styles$s.spinner, isInline ? styles$s.modifiers.inline : styles$s.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText }, (isSVG && { viewBox: '0 0 100 100' }), (diameter && { style: { '--pf-c-spinner--diameter': diameter } }), (ariaLabel && { 'aria-label': ariaLabel }), (ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy }), (!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' }), props), isSVG ? (React.createElement("circle", { className: styles$s.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })) : (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: css$2(styles$s.spinnerClipper) }),
+        React.createElement("span", { className: css$2(styles$s.spinnerLeadBall) }),
+        React.createElement("span", { className: css$2(styles$s.spinnerTailBall) })))));
 };
 Spinner.displayName = 'Spinner';
 
@@ -4418,10 +4418,54 @@ const TimesIcon = createIcon(TimesIconConfig);
 
 const Backdrop = (_a) => {
     var { children = null, className = '' } = _a, props = __rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({}, props, { className: css$2(styles$v.backdrop, className) }), children));
+    return (React.createElement("div", Object.assign({}, props, { className: css$2(styles$w.backdrop, className) }), children));
 };
 Backdrop.displayName = 'Backdrop';
 
+var styles$r = {
+  "accordion": "pf-c-accordion",
+  "accordionExpandedContent": "pf-c-accordion__expanded-content",
+  "accordionExpandedContentBody": "pf-c-accordion__expanded-content-body",
+  "accordionToggle": "pf-c-accordion__toggle",
+  "accordionToggleIcon": "pf-c-accordion__toggle-icon",
+  "accordionToggleText": "pf-c-accordion__toggle-text",
+  "modifiers": {
+    "displayLg": "pf-m-display-lg",
+    "bordered": "pf-m-bordered",
+    "expanded": "pf-m-expanded",
+    "fixed": "pf-m-fixed"
+  },
+  "themeDark": "pf-theme-dark"
+};
+
+const AccordionContext = React.createContext({});
+
+const Accordion = (_a) => {
+    var { children = null, className = '', 'aria-label': ariaLabel = '', headingLevel = 'h3', asDefinitionList = true, isBordered = false, displaySize = 'default' } = _a, props = __rest(_a, ["children", "className", 'aria-label', "headingLevel", "asDefinitionList", "isBordered", "displaySize"]);
+    const AccordionList = asDefinitionList ? 'dl' : 'div';
+    return (React.createElement(AccordionList, Object.assign({ className: css$2(styles$r.accordion, isBordered && styles$r.modifiers.bordered, displaySize === 'large' && styles$r.modifiers.displayLg, className), "aria-label": ariaLabel }, props),
+        React.createElement(AccordionContext.Provider, { value: {
+                ContentContainer: asDefinitionList ? 'dd' : 'div',
+                ToggleContainer: asDefinitionList ? 'dt' : headingLevel
+            } }, children)));
+};
+Accordion.displayName = 'Accordion';
+
+const AccordionExpandedContentBody = ({ children = null }) => React.createElement("div", { className: css$2(styles$r.accordionExpandedContentBody) }, children);
+AccordionExpandedContentBody.displayName = 'AccordionExpandedContentBody';
+
+const AccordionContent = (_a) => {
+    var { className = '', children = null, id = '', isHidden = false, isFixed = false, isCustomContent = false, 'aria-label': ariaLabel = '', component } = _a, props = __rest(_a, ["className", "children", "id", "isHidden", "isFixed", "isCustomContent", 'aria-label', "component"]);
+    return (React.createElement(AccordionContext.Consumer, null, ({ ContentContainer }) => {
+        const Container = component || ContentContainer;
+        return (React.createElement(Container, Object.assign({ id: id, className: css$2(styles$r.accordionExpandedContent, isFixed && styles$r.modifiers.fixed, !isHidden && styles$r.modifiers.expanded, className), hidden: isHidden, "aria-label": ariaLabel }, props), isCustomContent ? children : React.createElement(AccordionExpandedContentBody, null, children)));
+    }));
+};
+AccordionContent.displayName = 'AccordionContent';
+
+const AccordionItem = ({ children = null }) => (React.createElement(React.Fragment, null, children));
+AccordionItem.displayName = 'AccordionItem';
+
 const AngleRightIconConfig = {
   name: 'AngleRightIcon',
   height: 512,
@@ -4433,6 +4477,19 @@ const AngleRightIconConfig = {
 
 const AngleRightIcon = createIcon(AngleRightIconConfig);
 
+const AccordionToggle = (_a) => {
+    var { className = '', id, isExpanded = false, children = null, component } = _a, props = __rest(_a, ["className", "id", "isExpanded", "children", "component"]);
+    return (React.createElement(AccordionContext.Consumer, null, ({ ToggleContainer }) => {
+        const Container = component || ToggleContainer;
+        return (React.createElement(Container, null,
+            React.createElement("button", Object.assign({ id: id, className: css$2(styles$r.accordionToggle, isExpanded && styles$r.modifiers.expanded, className), "aria-expanded": isExpanded, type: "button" }, props),
+                React.createElement("span", { className: css$2(styles$r.accordionToggleText) }, children),
+                React.createElement("span", { className: css$2(styles$r.accordionToggleIcon) },
+                    React.createElement(AngleRightIcon, null)))));
+    }));
+};
+AccordionToggle.displayName = 'AccordionToggle';
+
 var styles$q = {
   "alert": "pf-c-alert",
   "alertAction": "pf-c-alert__action",
@@ -9688,7 +9745,7 @@ const ModalContent = (_a) => {
         modalBody,
         modalBoxFooter));
     return (React.createElement(Backdrop, null,
-        React.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } }, className: css$2(styles$u.bullseye) }, modalBox)));
+        React.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } }, className: css$2(styles$v.bullseye) }, modalBox)));
 };
 ModalContent.displayName = 'ModalContent';
 
@@ -9748,10 +9805,10 @@ class Modal$1 extends React.Component {
         target.appendChild(container);
         target.addEventListener('keydown', this.handleEscKeyClick, false);
         if (this.props.isOpen) {
-            target.classList.add(css$2(styles$v.backdropOpen));
+            target.classList.add(css$2(styles$w.backdropOpen));
         }
         else {
-            target.classList.remove(css$2(styles$v.backdropOpen));
+            target.classList.remove(css$2(styles$w.backdropOpen));
         }
         if (this.isEmpty(title) && this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby)) {
             // eslint-disable-next-line no-console
@@ -9766,11 +9823,11 @@ class Modal$1 extends React.Component {
         const { appendTo } = this.props;
         const target = this.getElement(appendTo);
         if (this.props.isOpen) {
-            target.classList.add(css$2(styles$v.backdropOpen));
+            target.classList.add(css$2(styles$w.backdropOpen));
             this.toggleSiblingsFromScreenReaders(true);
         }
         else {
-            target.classList.remove(css$2(styles$v.backdropOpen));
+            target.classList.remove(css$2(styles$w.backdropOpen));
             this.toggleSiblingsFromScreenReaders(false);
         }
     }
@@ -9781,7 +9838,7 @@ class Modal$1 extends React.Component {
             target.removeChild(this.state.container);
         }
         target.removeEventListener('keydown', this.handleEscKeyClick, false);
-        target.classList.remove(css$2(styles$v.backdropOpen));
+        target.classList.remove(css$2(styles$w.backdropOpen));
     }
     render() {
         const _a = this.props, { 
@@ -9835,7 +9892,7 @@ const Text = (_a) => {
     var { children = null, className = '', component = TextVariants.p, isVisitedLink = false, ouiaId, ouiaSafe = true } = _a, props = __rest(_a, ["children", "className", "component", "isVisitedLink", "ouiaId", "ouiaSafe"]);
     const Component = component;
     const ouiaProps = useOUIAProps(Text.displayName, ouiaId, ouiaSafe);
-    return (React.createElement(Component, Object.assign({}, ouiaProps, props, { "data-pf-content": true, className: css$2(isVisitedLink && component === TextVariants.a && styles$t.modifiers.visited, className) }), children));
+    return (React.createElement(Component, Object.assign({}, ouiaProps, props, { "data-pf-content": true, className: css$2(isVisitedLink && component === TextVariants.a && styles$u.modifiers.visited, className) }), children));
 };
 Text.displayName = 'Text';
 
@@ -12240,7 +12297,9 @@ const MarkdownHighlightExtension = ({ docContext, rootSelector, }) => {
 };
 
 const MARKDOWN_COPY_BUTTON_ID = 'data-copy-for';
-const MARKDOWN_SNIPPET_ID = 'data-snippet-id';
+const MARKDOWN_SNIPPET_ID = 'data-snippet-id';
+const ACCORDION_MARKDOWN_BUTTON_ID = `accordion-markdown-button-id`;
+const ACCORDION_MARKDOWN_CONTENT_ID = `accordion-markdown-content-id`;
 
 const CopyClipboard = ({ element, rootSelector, docContext, }) => {
     const { getResource } = React.useContext(QuickStartContext);
@@ -21112,6 +21171,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
     const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
     const admonitionShowdownExtension = useAdmonitionShowdownExtension();
     const codeShowdownExtension = useCodeShowdownExtension();
+    const accordionShowdownExtension = useAccordionShowdownExtension();
     return (React.createElement(SyncMarkdownView, { inline: true, content: content, exactHeight: exactHeight, extensions: [
             {
                 type: 'lang',
@@ -21135,8 +21195,10 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
             multilineCopyClipboardShowdownExtension,
             admonitionShowdownExtension,
             codeShowdownExtension,
+            accordionShowdownExtension,
             ...(markdown ? markdown.extensions : []),
         ], renderExtension: (docContext, rootSelector) => (React.createElement(React.Fragment, null,
+            React.createElement(AccordionRenderExtension, { docContext: docContext }),
             React.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
             React.createElement(MarkdownCopyClipboard, { docContext: docContext, rootSelector: rootSelector }),
             markdown &&
@@ -21192,6 +21254,45 @@ const useCodeShowdownExtension = () => {
     }), []);
 };
 
+const useAccordionShowdownExtension = () => {
+    return React.useMemo(() => ({
+        type: 'lang',
+        regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
+        replace: (_text, accordionContent, _command, accordionHeading) => {
+            const accordionId = new String(accordionHeading).replace(/\s/g, '-');
+            return removeTemplateWhitespace(server.renderToStaticMarkup(React.createElement(Accordion, { asDefinitionList: true },
+                React.createElement(AccordionItem, null,
+                    React.createElement(AccordionToggle, { isExpanded: false, id: `${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}` }, accordionHeading),
+                    React.createElement(AccordionContent, { id: `${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`, isHidden: !false }, accordionContent)))));
+        },
+    }), []);
+};
+
+const AccordionShowdownHandler = ({ buttonElement, contentElement, }) => {
+    const [expanded, setExpanded] = React.useState(false);
+    const handleClick = () => {
+        const expandedModifier = 'pf-m-expanded';
+        buttonElement.className = `pf-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
+        contentElement.hidden = expanded;
+        contentElement.className = `pf-c-accordion__expanded-content ${!expanded ? expandedModifier : ''}`;
+        setExpanded(!expanded);
+    };
+    useEventListener(buttonElement, 'click', handleClick);
+    return React.createElement(React.Fragment, null);
+};
+const AccordionRenderExtension = ({ docContext }) => {
+    const buttonElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_BUTTON_ID}]`);
+    const contentElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_CONTENT_ID}]`);
+    return buttonElements.length > 0 ? (React.createElement(React.Fragment, null, Array.from(buttonElements).map((elm) => {
+        const content = Array.from(contentElements).find((elm2) => {
+            const elmId = elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1];
+            const elm2Id = elm2.id.split(ACCORDION_MARKDOWN_CONTENT_ID)[1];
+            return elmId === elm2Id;
+        });
+        return (React.createElement(AccordionShowdownHandler, { key: elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1], buttonElement: elm, contentElement: content }));
+    }))) : null;
+};
+
 const FallbackImg = ({ src, alt, className, fallback }) => {
     const [isSrcValid, setIsSrcValid] = React.useState(true);
     if (src && isSrcValid) {