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

package/css/components/CodeEditor/code-editor.css

@@ -1,8 +1,8 @@
-:where(:root), :where(.pf-v6-c-code-editor) {
+:where(:root, .pf-v6-c-code-editor) {
   --pf-v6-c-code-editor__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-code-editor__controls--Gap: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-code-editor__header--before--BorderBottomWidth: var(--pf-t--global--border--width--box--default);
-  --pf-v6-c-code-editor__header--before--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-code-editor__header--before--BorderBlockEndWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-code-editor__header--before--BorderBlockEndColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-code-editor__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
@@ -28,27 +28,27 @@
   --pf-v6-c-code-editor__main--m-drag-hover--before--BorderColor: var( --pf-t--global--border--color--clicked);
   --pf-v6-c-code-editor__main--m-drag-hover--after--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-code-editor__main--m-drag-hover--after--Opacity: .1;
-  --pf-v6-c-code-editor__code--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-code-editor__code--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-code-editor__code--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-code-editor__code--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-code-editor__code--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-code-editor__code--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-code-editor__code--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-code-editor__code--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-code-editor__code-pre--FontSize: var(--pf-t--global--font--size--sm);
   --pf-v6-c-code-editor__code-pre--FontFamily: var(--pf-t--global--font--family--mono);
-  --pf-v6-c-code-editor__header-main--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-code-editor__header-main--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-code-editor__header-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-code-editor__header-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v6-c-code-editor__tab--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-code-editor__tab--PaddingRight: var( --pf-t--global--spacer--sm);
-  --pf-v6-c-code-editor__tab--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-code-editor__tab--PaddingLeft: var( --pf-t--global--spacer--sm);
-  --pf-v6-c-code-editor__tab--BorderTopWidth: var(--pf-t--global--border--width--box--default);
-  --pf-v6-c-code-editor__tab--BorderRightWidth: var(--pf-t--global--border--width--box--default);
-  --pf-v6-c-code-editor__tab--BorderBottomWidth: 0;
-  --pf-v6-c-code-editor__tab--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-code-editor__tab--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-code-editor__tab--PaddingInlineEnd: var( --pf-t--global--spacer--sm);
+  --pf-v6-c-code-editor__tab--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-code-editor__tab--PaddingInlineStart: var( --pf-t--global--spacer--sm);
+  --pf-v6-c-code-editor__tab--BorderBlockStartWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-code-editor__tab--BorderInlineEndWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-code-editor__tab--BorderBlockEndWidth: 0;
+  --pf-v6-c-code-editor__tab--BorderInlineStartWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-code-editor__tab--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-code-editor__tab--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-code-editor__tab-icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-code-editor__tab-icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
 }
 
 .pf-v6-c-code-editor.pf-m-read-only {
@@ -66,7 +66,7 @@
   inset-inline-end: 0;
   pointer-events: none;
   content: "";
-  border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBottomWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBottomColor);
+  border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
 }
 .pf-v6-c-code-editor__header.pf-m-plain {
   --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor);
@@ -96,8 +96,8 @@
 .pf-v6-c-code-editor__header-main {
   flex-grow: 1;
   align-self: center;
-  padding-inline-start: var(--pf-v6-c-code-editor__header-main--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-code-editor__header-main--PaddingRight);
+  padding-inline-start: var(--pf-v6-c-code-editor__header-main--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-code-editor__header-main--PaddingInlineEnd);
 }
 
 .pf-v6-c-code-editor__upload {
@@ -141,10 +141,10 @@
 
 .pf-v6-c-code-editor__code {
   position: relative;
-  padding-block-start: var(--pf-v6-c-code-editor__code--PaddingTop);
-  padding-block-end: var(--pf-v6-c-code-editor__code--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-code-editor__code--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-code-editor__code--PaddingRight);
+  padding-block-start: var(--pf-v6-c-code-editor__code--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-code-editor__code--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-code-editor__code--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-code-editor__code--PaddingInlineEnd);
 }
 .pf-v6-c-code-editor__code .pf-v6-c-code-editor__code-pre {
   font-family: var(--pf-v6-c-code-editor__code-pre--FontFamily);
@@ -156,21 +156,21 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding-block-start: var(--pf-v6-c-code-editor__tab--PaddingTop);
-  padding-block-end: var(--pf-v6-c-code-editor__tab--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-code-editor__tab--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-code-editor__tab--PaddingRight);
+  padding-block-start: var(--pf-v6-c-code-editor__tab--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-code-editor__tab--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-code-editor__tab--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-code-editor__tab--PaddingInlineEnd);
   color: var(--pf-v6-c-code-editor__tab--Color);
   background-color: var(--pf-v6-c-code-editor__tab--BackgroundColor);
   border-color: var(--pf-v6-c-code-editor__tab--BorderColor);
   border-style: solid;
-  border-block-start-width: var(--pf-v6-c-code-editor__tab--BorderTopWidth);
-  border-block-end-width: var(--pf-v6-c-code-editor__tab--BorderBottomWidth);
-  border-inline-start-width: var(--pf-v6-c-code-editor__tab--BorderLeftWidth);
-  border-inline-end-width: var(--pf-v6-c-code-editor__tab--BorderRightWidth);
+  border-block-start-width: var(--pf-v6-c-code-editor__tab--BorderBlockStartWidth);
+  border-block-end-width: var(--pf-v6-c-code-editor__tab--BorderBlockEndWidth);
+  border-inline-start-width: var(--pf-v6-c-code-editor__tab--BorderInlineStartWidth);
+  border-inline-end-width: var(--pf-v6-c-code-editor__tab--BorderInlineEndWidth);
   border-start-end-radius: var(--pf-v6-c-code-editor__tab--BorderStartEndRadius);
 }
 
 .pf-v6-c-code-editor__tab-icon + .pf-v6-c-code-editor__tab-text {
-  margin-inline-start: var(--pf-v6-c-code-editor__tab-icon--text--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart);
 }

package/css/components/Content/content.css

@@ -1,41 +1,41 @@
-.pf-v6-c-content {
-  --pf-v6-c-content--MarginBottom: var(--pf-t--global--spacer--md);
+: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--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--h1--MarginBottom: var(--pf-t--global--spacer--sm);
+  --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--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--h2--MarginBottom: var(--pf-t--global--spacer--sm);
+  --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--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--h3--MarginBottom: var(--pf-t--global--spacer--sm);
+  --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--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--h4--MarginBottom: var(--pf-t--global--spacer--sm);
+  --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--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--h5--MarginBottom: var(--pf-t--global--spacer--sm);
+  --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--MarginTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--h6--MarginBottom: var(--pf-t--global--spacer--sm);
+  --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--MarginBottom: var(--pf-t--global--spacer--md);
+  --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);
@@ -44,213 +44,238 @@
   --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--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-content--blockquote--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-content--blockquote--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-content--blockquote--PaddingLeft: var(--pf-t--global--spacer--md);
+  --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--BorderLeftColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-content--blockquote--BorderLeftWidth: var(--pf-t--global--border--width--300);
-  --pf-v6-c-content--ol--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--ol--MarginLeft: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--ol--nested--MarginTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-content--ol--nested--MarginLeft: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-content--ul--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--ul--MarginLeft: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--ul--nested--MarginTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-content--ul--nested--MarginLeft: var(--pf-t--global--spacer--sm);
+  --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--MarginTop: var(--pf-t--global--spacer--sm);
+  --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--MarginTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-content--dt--sm--MarginTop: 0;
+  --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);
 }
-.pf-v6-c-content a {
+: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);
 }
-.pf-v6-c-content a:hover {
+: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);
 }
-.pf-v6-c-content.pf-m-visited a:visited,
-.pf-v6-c-content a.pf-m-visited:visited {
+
+: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);
 }
-.pf-v6-c-content li + li {
-  margin-block-start: var(--pf-v6-c-content--li--MarginTop);
-}
-.pf-v6-c-content p:not(:last-child),
-.pf-v6-c-content dl:not(:last-child),
-.pf-v6-c-content ol:not(:last-child),
-.pf-v6-c-content ul:not(:last-child),
-.pf-v6-c-content blockquote:not(:last-child),
-.pf-v6-c-content small:not(:last-child),
-.pf-v6-c-content pre:not(:last-child),
-.pf-v6-c-content table:not(:last-child),
-.pf-v6-c-content hr:not(:last-child) {
-  margin-block-end: var(--pf-v6-c-content--MarginBottom);
-}
-.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 {
+
+: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-v6-c-content--heading--FontFamily);
 }
-.pf-v6-c-content h1:first-child,
-.pf-v6-c-content h2:first-child,
-.pf-v6-c-content h3:first-child,
-.pf-v6-c-content h4:first-child,
-.pf-v6-c-content h5:first-child,
-.pf-v6-c-content h6:first-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):first-child {
   margin-block-start: 0;
 }
-.pf-v6-c-content h1:last-child,
-.pf-v6-c-content h2:last-child,
-.pf-v6-c-content h3:last-child,
-.pf-v6-c-content h4:last-child,
-.pf-v6-c-content h5:last-child,
-.pf-v6-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-v6-c-content ol,
-.pf-v6-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-v6-c-content ol.pf-m-plain,
-.pf-v6-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-v6-c-content h1 {
-  margin-block-start: var(--pf-v6-c-content--h1--MarginTop);
-  margin-block-end: var(--pf-v6-c-content--h1--MarginBottom);
+
+: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);
 }
-.pf-v6-c-content h2 {
-  margin-block-start: var(--pf-v6-c-content--h2--MarginTop);
-  margin-block-end: var(--pf-v6-c-content--h2--MarginBottom);
+
+: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);
 }
-.pf-v6-c-content h3 {
-  margin-block-start: var(--pf-v6-c-content--h3--MarginTop);
-  margin-block-end: var(--pf-v6-c-content--h3--MarginBottom);
+
+: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);
 }
-.pf-v6-c-content h4 {
-  margin-block-start: var(--pf-v6-c-content--h4--MarginTop);
-  margin-block-end: var(--pf-v6-c-content--h4--MarginBottom);
+
+: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);
 }
-.pf-v6-c-content h5 {
-  margin-block-start: var(--pf-v6-c-content--h5--MarginTop);
-  margin-block-end: var(--pf-v6-c-content--h5--MarginBottom);
+
+: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);
 }
-.pf-v6-c-content h6 {
-  margin-block-start: var(--pf-v6-c-content--h6--MarginTop);
-  margin-block-end: var(--pf-v6-c-content--h6--MarginBottom);
+
+: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);
 }
-.pf-v6-c-content small {
+
+:is(.pf-v6-c-content--small, .pf-v6-c-content small) {
   display: block;
   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);
 }
-.pf-v6-c-content small:not(:last-child) {
-  margin-block-end: var(--pf-v6-c-content--small--MarginBottom);
+:is(.pf-v6-c-content--small, .pf-v6-c-content small):not(:last-child) {
+  margin-block-end: var(--pf-v6-c-content--small--MarginBlockEnd);
 }
-.pf-v6-c-content blockquote {
-  padding-block-start: var(--pf-v6-c-content--blockquote--PaddingTop);
-  padding-block-end: var(--pf-v6-c-content--blockquote--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-content--blockquote--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-content--blockquote--PaddingRight);
+
+: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--BorderLeftWidth) solid var(--pf-v6-c-content--blockquote--BorderLeftColor);
+  border-inline-start: var(--pf-v6-c-content--blockquote--BorderInlineStartWidth) solid var(--pf-v6-c-content--blockquote--BorderInlineStartColor);
 }
-.pf-v6-c-content hr {
+
+: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-v6-c-content ol {
-  padding-inline-start: var(--pf-v6-c-content--ol--PaddingLeft);
-  margin-inline-start: var(--pf-v6-c-content--ol--MarginLeft);
-}
-.pf-v6-c-content ol ul {
-  --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft);
-  margin-block-start: var(--pf-v6-c-content--ul--nested--MarginTop);
-}
-.pf-v6-c-content ol ol {
-  --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft);
-  margin-block-start: var(--pf-v6-c-content--ol--nested--MarginTop);
-}
-.pf-v6-c-content ul {
-  padding-inline-start: var(--pf-v6-c-content--ul--PaddingLeft);
-  margin-inline-start: var(--pf-v6-c-content--ul--MarginLeft);
+
+: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);
 }
-.pf-v6-c-content ul ul {
-  --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft);
-  margin-block-start: var(--pf-v6-c-content--ul--nested--MarginTop);
+: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);
 }
-.pf-v6-c-content ul ol {
-  --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft);
-  margin-block-start: var(--pf-v6-c-content--ol--nested--MarginTop);
+: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);
 }
-.pf-v6-c-content dl {
+
+:is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
   display: grid;
   grid-template-columns: 1fr;
 }
 @media screen and (min-width: 576px) {
-  .pf-v6-c-content dl {
+  :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
     grid-template: auto/auto 1fr;
     grid-row-gap: var(--pf-v6-c-content--dl--RowGap);
     grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
   }
 }
-.pf-v6-c-content dt {
+
+:is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
   font-weight: var(--pf-v6-c-content--dt--FontWeight);
 }
-.pf-v6-c-content dt:not(:first-child) {
-  margin-block-start: var(--pf-v6-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-v6-c-content dt:not(:first-child) {
-    --pf-v6-c-content--dt--MarginTop: var(--pf-v6-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-v6-c-content dt {
+  :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
     grid-column: 1;
   }
 }
+
 @media screen and (min-width: 576px) {
-  .pf-v6-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-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

@@ -3,6 +3,25 @@ exports.__esModule = true;
 require('./content.css');
 exports.default = {
   "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-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"