@patternfly/react-styles 6.0.0-alpha.2 → 6.0.0-alpha.21

package/css/components/Content/content.css

@@ -1,256 +1,281 @@
-.pf-v5-c-content {
-  --pf-v5-c-content--MarginBottom: var(--pf-t--global--spacer--md);
-  --pf-v5-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
-  --pf-v5-c-content--FontSize: var(--pf-t--global--font--size--body);
-  --pf-v5-c-content--FontWeight: var(--pf-t--global--font--weight--body);
-  --pf-v5-c-content--Color: var(--pf-t--global--text--color--regular);
-  --pf-v5-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
-  --pf-v5-c-content--h1--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-content--h1--MarginBottom: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--lg);
-  --pf-v5-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v5-c-content--h2--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-content--h2--MarginBottom: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--md);
-  --pf-v5-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v5-c-content--h3--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-content--h3--MarginBottom: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--sm);
-  --pf-v5-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v5-c-content--h4--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-content--h4--MarginBottom: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--xs);
-  --pf-v5-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v5-c-content--h5--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-content--h5--MarginBottom: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--xs);
-  --pf-v5-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v5-c-content--h6--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-content--h6--MarginBottom: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--xs);
-  --pf-v5-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v5-c-content--small--MarginBottom: var(--pf-t--global--spacer--md);
-  --pf-v5-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
-  --pf-v5-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
-  --pf-v5-c-content--small--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v5-c-content--a--Color: var(--pf-t--global--text--color--link--default);
-  --pf-v5-c-content--a--TextDecoration: var(--pf-t--global--link--text-decoration);
-  --pf-v5-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover);
-  --pf-v5-c-content--a--hover--TextDecoration: var(--pf-t--global--link--text-decoration);
-  --pf-v5-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited);
-  --pf-v5-c-content--blockquote--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v5-c-content--blockquote--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v5-c-content--blockquote--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v5-c-content--blockquote--PaddingLeft: var(--pf-t--global--spacer--md);
-  --pf-v5-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v5-c-content--blockquote--BorderLeftColor: var(--pf-t--global--border--color--default);
-  --pf-v5-c-content--blockquote--BorderLeftWidth: var(--pf-t--global--border--width--300);
-  --pf-v5-c-content--ol--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-content--ol--MarginLeft: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-content--ol--nested--MarginTop: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-content--ol--nested--MarginLeft: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-content--ul--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-content--ul--MarginLeft: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-content--ul--nested--MarginTop: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-content--ul--nested--MarginLeft: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-content--ul--ListStyle: var(--pf-v5-global--ListStyle);
-  --pf-v5-c-content--li--MarginTop: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
-  --pf-v5-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
-  --pf-v5-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v5-c-content--dt--MarginTop: var(--pf-t--global--spacer--md);
-  --pf-v5-c-content--dt--sm--MarginTop: 0;
-  --pf-v5-c-content--hr--Height: var(--pf-t--global--border--width--divider--default);
-  --pf-v5-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default);
-  font-size: var(--pf-v5-c-content--FontSize);
-  line-height: var(--pf-v5-c-content--LineHeight);
-  color: var(--pf-v5-c-content--Color);
-}
-.pf-v5-c-content a {
-  color: var(--pf-v5-c-content--a--Color);
-  text-decoration: var(--pf-v5-c-content--a--TextDecoration);
-}
-.pf-v5-c-content a:hover {
-  --pf-v5-c-content--a--Color: var(--pf-v5-c-content--a--hover--Color);
-  --pf-v5-c-content--a--TextDecoration: var(--pf-v5-c-content--a--hover--TextDecoration);
-}
-.pf-v5-c-content.pf-m-visited a:visited,
-.pf-v5-c-content a.pf-m-visited:visited {
-  color: var(--pf-v5-c-content--a--visited--Color);
-}
-.pf-v5-c-content li + li {
-  margin-block-start: var(--pf-v5-c-content--li--MarginTop);
-}
-.pf-v5-c-content p:not(:last-child),
-.pf-v5-c-content dl:not(:last-child),
-.pf-v5-c-content ol:not(:last-child),
-.pf-v5-c-content ul:not(:last-child),
-.pf-v5-c-content blockquote:not(:last-child),
-.pf-v5-c-content small:not(:last-child),
-.pf-v5-c-content pre:not(:last-child),
-.pf-v5-c-content table:not(:last-child),
-.pf-v5-c-content hr:not(:last-child) {
-  margin-block-end: var(--pf-v5-c-content--MarginBottom);
-}
-.pf-v5-c-content h1,
-.pf-v5-c-content h2,
-.pf-v5-c-content h3,
-.pf-v5-c-content h4,
-.pf-v5-c-content h5,
-.pf-v5-c-content h6 {
+:where(:root, .pf-v6-c-content) {
+  --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body);
+  --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v6-c-content--h1--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--h1--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
+  --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-content--h2--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--h2--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v6-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
+  --pf-v6-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-content--h3--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--h3--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v6-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
+  --pf-v6-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-content--h4--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--h4--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v6-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
+  --pf-v6-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-content--h5--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--h5--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v6-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
+  --pf-v6-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-content--h6--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--h6--MarginBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
+  --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
+  --pf-v6-c-content--a--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --pf-v6-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover);
+  --pf-v6-c-content--a--hover--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --pf-v6-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited);
+  --pf-v6-c-content--blockquote--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--blockquote--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--blockquote--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--blockquote--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v6-c-content--blockquote--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-content--blockquote--BorderInlineStartWidth: var(--pf-t--global--border--width--300);
+  --pf-v6-c-content--ol--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--ol--MarginInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--ol--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--ol--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--ul--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--ul--MarginInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--ul--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--ul--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style);
+  --pf-v6-c-content--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-content--dt--MarginBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-content--dt--sm--MarginBlockStart: 0;
+  --pf-v6-c-content--hr--Height: var(--pf-t--global--border--width--divider--default);
+  --pf-v6-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default);
+}
+
+.pf-v6-c-content {
+  font-size: var(--pf-v6-c-content--FontSize);
+  line-height: var(--pf-v6-c-content--LineHeight);
+  color: var(--pf-v6-c-content--Color);
+}
+:is(.pf-v6-c-content--a, .pf-v6-c-content a) {
+  color: var(--pf-v6-c-content--a--Color);
+  text-decoration: var(--pf-v6-c-content--a--TextDecoration);
+}
+:is(.pf-v6-c-content--a, .pf-v6-c-content a):hover {
+  --pf-v6-c-content--a--Color: var(--pf-v6-c-content--a--hover--Color);
+  --pf-v6-c-content--a--TextDecoration: var(--pf-v6-c-content--a--hover--TextDecoration);
+}
+
+:is(.pf-v6-c-content--a.pf-m-visited, .pf-v6-c-content.pf-m-visited a, .pf-v6-c-content a.pf-m-visited):visited {
+  color: var(--pf-v6-c-content--a--visited--Color);
+}
+
+:is(.pf-v6-c-content--li + .pf-v6-c-content--li, .pf-v6-c-content li + li) {
+  margin-block-start: var(--pf-v6-c-content--li--MarginBlockStart);
+}
+
+:is(.pf-v6-c-content--p,
+.pf-v6-c-content--dl,
+.pf-v6-c-content--ol,
+.pf-v6-c-content--ul,
+.pf-v6-c-content--blockquote,
+.pf-v6-c-content--small,
+.pf-v6-c-content--pre,
+.pf-v6-c-content--table,
+.pf-v6-c-content--hr, .pf-v6-c-content p, .pf-v6-c-content dl, .pf-v6-c-content ol, .pf-v6-c-content ul, .pf-v6-c-content blockquote, .pf-v6-c-content small, .pf-v6-c-content pre, .pf-v6-c-content table, .pf-v6-c-content hr):not(:last-child) {
+  margin-block-end: var(--pf-v6-c-content--MarginBlockEnd);
+}
+
+:is(.pf-v6-c-content--h1,
+.pf-v6-c-content--h2,
+.pf-v6-c-content--h3,
+.pf-v6-c-content--h4,
+.pf-v6-c-content--h5,
+.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6) {
   margin: 0;
-  font-family: var(--pf-v5-c-content--heading--FontFamily);
-}
-.pf-v5-c-content h1:first-child,
-.pf-v5-c-content h2:first-child,
-.pf-v5-c-content h3:first-child,
-.pf-v5-c-content h4:first-child,
-.pf-v5-c-content h5:first-child,
-.pf-v5-c-content h6:first-child {
+  font-family: var(--pf-v6-c-content--heading--FontFamily);
+}
+:is(.pf-v6-c-content--h1,
+.pf-v6-c-content--h2,
+.pf-v6-c-content--h3,
+.pf-v6-c-content--h4,
+.pf-v6-c-content--h5,
+.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):first-child {
   margin-block-start: 0;
 }
-.pf-v5-c-content h1:last-child,
-.pf-v5-c-content h2:last-child,
-.pf-v5-c-content h3:last-child,
-.pf-v5-c-content h4:last-child,
-.pf-v5-c-content h5:last-child,
-.pf-v5-c-content h6:last-child {
+:is(.pf-v6-c-content--h1,
+.pf-v6-c-content--h2,
+.pf-v6-c-content--h3,
+.pf-v6-c-content--h4,
+.pf-v6-c-content--h5,
+.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):last-child {
   margin-block-end: 0;
 }
-.pf-v5-c-content ol,
-.pf-v5-c-content ul {
+
+:is(.pf-v6-c-content--ol,
+.pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
   margin: 0;
 }
-.pf-v5-c-content ol.pf-m-plain,
-.pf-v5-c-content ul.pf-m-plain {
+:is(.pf-v6-c-content--ol,
+.pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
   padding-inline-start: 0;
   margin-inline-start: 0;
   list-style: none;
 }
-.pf-v5-c-content h1 {
-  margin-block-start: var(--pf-v5-c-content--h1--MarginTop);
-  margin-block-end: var(--pf-v5-c-content--h1--MarginBottom);
-  font-size: var(--pf-v5-c-content--h1--FontSize);
-  font-weight: var(--pf-v5-c-content--h1--FontWeight);
-  line-height: var(--pf-v5-c-content--h1--LineHeight);
-}
-.pf-v5-c-content h2 {
-  margin-block-start: var(--pf-v5-c-content--h2--MarginTop);
-  margin-block-end: var(--pf-v5-c-content--h2--MarginBottom);
-  font-size: var(--pf-v5-c-content--h2--FontSize);
-  font-weight: var(--pf-v5-c-content--h2--FontWeight);
-  line-height: var(--pf-v5-c-content--h2--LineHeight);
-}
-.pf-v5-c-content h3 {
-  margin-block-start: var(--pf-v5-c-content--h3--MarginTop);
-  margin-block-end: var(--pf-v5-c-content--h3--MarginBottom);
-  font-size: var(--pf-v5-c-content--h3--FontSize);
-  font-weight: var(--pf-v5-c-content--h3--FontWeight);
-  line-height: var(--pf-v5-c-content--h3--LineHeight);
-}
-.pf-v5-c-content h4 {
-  margin-block-start: var(--pf-v5-c-content--h4--MarginTop);
-  margin-block-end: var(--pf-v5-c-content--h4--MarginBottom);
-  font-size: var(--pf-v5-c-content--h4--FontSize);
-  font-weight: var(--pf-v5-c-content--h4--FontWeight);
-  line-height: var(--pf-v5-c-content--h4--LineHeight);
-}
-.pf-v5-c-content h5 {
-  margin-block-start: var(--pf-v5-c-content--h5--MarginTop);
-  margin-block-end: var(--pf-v5-c-content--h5--MarginBottom);
-  font-size: var(--pf-v5-c-content--h5--FontSize);
-  font-weight: var(--pf-v5-c-content--h5--FontWeight);
-  line-height: var(--pf-v5-c-content--h5--LineHeight);
-}
-.pf-v5-c-content h6 {
-  margin-block-start: var(--pf-v5-c-content--h6--MarginTop);
-  margin-block-end: var(--pf-v5-c-content--h6--MarginBottom);
-  font-size: var(--pf-v5-c-content--h6--FontSize);
-  font-weight: var(--pf-v5-c-content--h6--FontWeight);
-  line-height: var(--pf-v5-c-content--h6--LineHeight);
-}
-.pf-v5-c-content small {
+
+:is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
+  margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-content--h1--MarginBlockEnd);
+  font-size: var(--pf-v6-c-content--h1--FontSize);
+  font-weight: var(--pf-v6-c-content--h1--FontWeight);
+  line-height: var(--pf-v6-c-content--h1--LineHeight);
+}
+
+:is(.pf-v6-c-content--h2, .pf-v6-c-content h2) {
+  margin-block-start: var(--pf-v6-c-content--h2--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-content--h2--MarginBlockEnd);
+  font-size: var(--pf-v6-c-content--h2--FontSize);
+  font-weight: var(--pf-v6-c-content--h2--FontWeight);
+  line-height: var(--pf-v6-c-content--h2--LineHeight);
+}
+
+:is(.pf-v6-c-content--h3, .pf-v6-c-content h3) {
+  margin-block-start: var(--pf-v6-c-content--h3--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-content--h3--MarginBlockEnd);
+  font-size: var(--pf-v6-c-content--h3--FontSize);
+  font-weight: var(--pf-v6-c-content--h3--FontWeight);
+  line-height: var(--pf-v6-c-content--h3--LineHeight);
+}
+
+:is(.pf-v6-c-content--h4, .pf-v6-c-content h4) {
+  margin-block-start: var(--pf-v6-c-content--h4--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-content--h4--MarginBlockEnd);
+  font-size: var(--pf-v6-c-content--h4--FontSize);
+  font-weight: var(--pf-v6-c-content--h4--FontWeight);
+  line-height: var(--pf-v6-c-content--h4--LineHeight);
+}
+
+:is(.pf-v6-c-content--h5, .pf-v6-c-content h5) {
+  margin-block-start: var(--pf-v6-c-content--h5--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-content--h5--MarginBlockEnd);
+  font-size: var(--pf-v6-c-content--h5--FontSize);
+  font-weight: var(--pf-v6-c-content--h5--FontWeight);
+  line-height: var(--pf-v6-c-content--h5--LineHeight);
+}
+
+:is(.pf-v6-c-content--h6, .pf-v6-c-content h6) {
+  margin-block-start: var(--pf-v6-c-content--h6--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-content--h6--MarginBlockEnd);
+  font-size: var(--pf-v6-c-content--h6--FontSize);
+  font-weight: var(--pf-v6-c-content--h6--FontWeight);
+  line-height: var(--pf-v6-c-content--h6--LineHeight);
+}
+
+:is(.pf-v6-c-content--small, .pf-v6-c-content small) {
   display: block;
-  font-size: var(--pf-v5-c-content--small--FontSize);
-  line-height: var(--pf-v5-c-content--small--LineHeight);
-  color: var(--pf-v5-c-content--small--Color);
-}
-.pf-v5-c-content small:not(:last-child) {
-  margin-block-end: var(--pf-v5-c-content--small--MarginBottom);
-}
-.pf-v5-c-content blockquote {
-  padding-block-start: var(--pf-v5-c-content--blockquote--PaddingTop);
-  padding-block-end: var(--pf-v5-c-content--blockquote--PaddingBottom);
-  padding-inline-start: var(--pf-v5-c-content--blockquote--PaddingLeft);
-  padding-inline-end: var(--pf-v5-c-content--blockquote--PaddingRight);
-  color: var(--pf-v5-c-content--blockquote--Color);
-  border-inline-start: var(--pf-v5-c-content--blockquote--BorderLeftWidth) solid var(--pf-v5-c-content--blockquote--BorderLeftColor);
-}
-.pf-v5-c-content hr {
-  height: var(--pf-v5-c-content--hr--Height);
-  background-color: var(--pf-v5-c-content--hr--BackgroundColor);
+  font-size: var(--pf-v6-c-content--small--FontSize);
+  line-height: var(--pf-v6-c-content--small--LineHeight);
+  color: var(--pf-v6-c-content--small--Color);
+}
+:is(.pf-v6-c-content--small, .pf-v6-c-content small):not(:last-child) {
+  margin-block-end: var(--pf-v6-c-content--small--MarginBlockEnd);
+}
+
+:is(.pf-v6-c-content--blockquote, .pf-v6-c-content blockquote) {
+  padding-block-start: var(--pf-v6-c-content--blockquote--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-content--blockquote--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-content--blockquote--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-content--blockquote--PaddingInlineEnd);
+  color: var(--pf-v6-c-content--blockquote--Color);
+  border-inline-start: var(--pf-v6-c-content--blockquote--BorderInlineStartWidth) solid var(--pf-v6-c-content--blockquote--BorderInlineStartColor);
+}
+
+:is(.pf-v6-c-content--hr, .pf-v6-c-content hr) {
+  height: var(--pf-v6-c-content--hr--Height);
+  background-color: var(--pf-v6-c-content--hr--BackgroundColor);
   border: none;
 }
-.pf-v5-c-content ol {
-  padding-inline-start: var(--pf-v5-c-content--ol--PaddingLeft);
-  margin-inline-start: var(--pf-v5-c-content--ol--MarginLeft);
-}
-.pf-v5-c-content ol ul {
-  --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-c-content--ul--nested--MarginLeft);
-  margin-block-start: var(--pf-v5-c-content--ul--nested--MarginTop);
-}
-.pf-v5-c-content ol ol {
-  --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-c-content--ol--nested--MarginLeft);
-  margin-block-start: var(--pf-v5-c-content--ol--nested--MarginTop);
-}
-.pf-v5-c-content ul {
-  padding-inline-start: var(--pf-v5-c-content--ul--PaddingLeft);
-  margin-inline-start: var(--pf-v5-c-content--ul--MarginLeft);
-  list-style: var(--pf-v5-c-content--ul--ListStyle);
-}
-.pf-v5-c-content ul ul {
-  --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-c-content--ul--nested--MarginLeft);
-  margin-block-start: var(--pf-v5-c-content--ul--nested--MarginTop);
-}
-.pf-v5-c-content ul ol {
-  --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-c-content--ol--nested--MarginLeft);
-  margin-block-start: var(--pf-v5-c-content--ol--nested--MarginTop);
-}
-.pf-v5-c-content dl {
+
+:is(.pf-v6-c-content--ol, .pf-v6-c-content ol) {
+  padding-inline-start: var(--pf-v6-c-content--ol--PaddingInlineStart);
+  margin-inline-start: var(--pf-v6-c-content--ol--MarginInlineStart);
+}
+:is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ul,
+ul) {
+  --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
+  margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
+}
+:is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ol,
+ol) {
+  --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
+  margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
+}
+
+:is(.pf-v6-c-content--ul, .pf-v6-c-content ul) {
+  padding-inline-start: var(--pf-v6-c-content--ul--PaddingInlineStart);
+  margin-inline-start: var(--pf-v6-c-content--ul--MarginInlineStart);
+  list-style: var(--pf-v6-c-content--ul--ListStyle);
+}
+:is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ul,
+ul) {
+  --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
+  margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
+}
+:is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
+ol) {
+  --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
+  margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
+}
+
+:is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
   display: grid;
   grid-template-columns: 1fr;
 }
 @media screen and (min-width: 576px) {
-  .pf-v5-c-content dl {
+  :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
     grid-template: auto/auto 1fr;
-    grid-row-gap: var(--pf-v5-c-content--dl--RowGap);
-    grid-column-gap: var(--pf-v5-c-content--dl--ColumnGap);
+    grid-row-gap: var(--pf-v6-c-content--dl--RowGap);
+    grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
   }
 }
-.pf-v5-c-content dt {
-  font-weight: var(--pf-v5-c-content--dt--FontWeight);
+
+:is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
+  font-weight: var(--pf-v6-c-content--dt--FontWeight);
 }
-.pf-v5-c-content dt:not(:first-child) {
-  margin-block-start: var(--pf-v5-c-content--dt--MarginTop);
+:is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
+  margin-block-start: var(--pf-v6-c-content--dt--MarginBlockStart);
 }
 @media screen and (min-width: 576px) {
-  .pf-v5-c-content dt:not(:first-child) {
-    --pf-v5-c-content--dt--MarginTop: var(--pf-v5-c-content--dt--sm--MarginTop);
+  :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
+    --pf-v6-c-content--dt--MarginBlockStart: var(--pf-v6-c-content--dt--sm--MarginBlockStart);
   }
 }
 @media screen and (min-width: 576px) {
-  .pf-v5-c-content dt {
+  :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
     grid-column: 1;
   }
 }
+
 @media screen and (min-width: 576px) {
-  .pf-v5-c-content dd {
+  :is(.pf-v6-c-content--dd, .pf-v6-c-content dd) {
     grid-column: 2;
   }
 }

package/css/components/Content/content.d.ts

@@ -1,6 +1,25 @@
 import './content.css';
 declare const _default: {
-  "content": "pf-v5-c-content",
+  "content": "pf-v6-c-content",
+  "contentA": "pf-v6-c-content--a",
+  "contentBlockquote": "pf-v6-c-content--blockquote",
+  "contentDd": "pf-v6-c-content--dd",
+  "contentDl": "pf-v6-c-content--dl",
+  "contentDt": "pf-v6-c-content--dt",
+  "contentH1": "pf-v6-c-content--h1",
+  "contentH2": "pf-v6-c-content--h2",
+  "contentH3": "pf-v6-c-content--h3",
+  "contentH4": "pf-v6-c-content--h4",
+  "contentH5": "pf-v6-c-content--h5",
+  "contentH6": "pf-v6-c-content--h6",
+  "contentHr": "pf-v6-c-content--hr",
+  "contentLi": "pf-v6-c-content--li",
+  "contentOl": "pf-v6-c-content--ol",
+  "contentP": "pf-v6-c-content--p",
+  "contentPre": "pf-v6-c-content--pre",
+  "contentSmall": "pf-v6-c-content--small",
+  "contentTable": "pf-v6-c-content--table",
+  "contentUl": "pf-v6-c-content--ul",
   "modifiers": {
     "visited": "pf-m-visited",
     "plain": "pf-m-plain"

package/css/components/Content/content.js

@@ -2,7 +2,26 @@
 exports.__esModule = true;
 require('./content.css');
 exports.default = {
-  "content": "pf-v5-c-content",
+  "content": "pf-v6-c-content",
+  "contentA": "pf-v6-c-content--a",
+  "contentBlockquote": "pf-v6-c-content--blockquote",
+  "contentDd": "pf-v6-c-content--dd",
+  "contentDl": "pf-v6-c-content--dl",
+  "contentDt": "pf-v6-c-content--dt",
+  "contentH1": "pf-v6-c-content--h1",
+  "contentH2": "pf-v6-c-content--h2",
+  "contentH3": "pf-v6-c-content--h3",
+  "contentH4": "pf-v6-c-content--h4",
+  "contentH5": "pf-v6-c-content--h5",
+  "contentH6": "pf-v6-c-content--h6",
+  "contentHr": "pf-v6-c-content--hr",
+  "contentLi": "pf-v6-c-content--li",
+  "contentOl": "pf-v6-c-content--ol",
+  "contentP": "pf-v6-c-content--p",
+  "contentPre": "pf-v6-c-content--pre",
+  "contentSmall": "pf-v6-c-content--small",
+  "contentTable": "pf-v6-c-content--table",
+  "contentUl": "pf-v6-c-content--ul",
   "modifiers": {
     "visited": "pf-m-visited",
     "plain": "pf-m-plain"

package/css/components/Content/content.mjs

@@ -1,6 +1,25 @@
 import './content.css';
 export default {
-  "content": "pf-v5-c-content",
+  "content": "pf-v6-c-content",
+  "contentA": "pf-v6-c-content--a",
+  "contentBlockquote": "pf-v6-c-content--blockquote",
+  "contentDd": "pf-v6-c-content--dd",
+  "contentDl": "pf-v6-c-content--dl",
+  "contentDt": "pf-v6-c-content--dt",
+  "contentH1": "pf-v6-c-content--h1",
+  "contentH2": "pf-v6-c-content--h2",
+  "contentH3": "pf-v6-c-content--h3",
+  "contentH4": "pf-v6-c-content--h4",
+  "contentH5": "pf-v6-c-content--h5",
+  "contentH6": "pf-v6-c-content--h6",
+  "contentHr": "pf-v6-c-content--hr",
+  "contentLi": "pf-v6-c-content--li",
+  "contentOl": "pf-v6-c-content--ol",
+  "contentP": "pf-v6-c-content--p",
+  "contentPre": "pf-v6-c-content--pre",
+  "contentSmall": "pf-v6-c-content--small",
+  "contentTable": "pf-v6-c-content--table",
+  "contentUl": "pf-v6-c-content--ul",
   "modifiers": {
     "visited": "pf-m-visited",
     "plain": "pf-m-plain"