@patternfly/patternfly 6.0.0-alpha.34 → 6.0.0-alpha.39

package/components/SimpleList/simple-list.scss

@@ -1,38 +1,37 @@
 // @debug $simple-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$simple-list} {
+:root, .#{$simple-list} {
   // Simple list item link
-  --#{$simple-list}__item-link--PaddingTop: var(--#{$pf-global}--spacer--xs);
-  --#{$simple-list}__item-link--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$simple-list}__item-link--PaddingBottom: var(--#{$pf-global}--spacer--xs);
-  --#{$simple-list}__item-link--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$simple-list}__item-link--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$simple-list}__item-link--Color: var(--#{$pf-global}--Color--100);
-  --#{$simple-list}__item-link--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$simple-list}__item-link--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
-  --#{$simple-list}__item-link--m-current--Color: var(--#{$pf-global}--link--Color);
-  --#{$simple-list}__item-link--m-current--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$simple-list}__item-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
-  --#{$simple-list}__item-link--hover--Color: var(--#{$pf-global}--Color--100); // remove at breaking change
-  --#{$simple-list}__item-link--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$simple-list}__item-link--focus--Color: var(--#{$pf-global}--Color--100); // remove at breaking change
-  --#{$simple-list}__item-link--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$simple-list}__item-link--focus--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
-  --#{$simple-list}__item-link--active--Color: var(--#{$pf-global}--Color--100); // remove at breaking change
-  --#{$simple-list}__item-link--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$simple-list}__item-link--active--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
+  --#{$simple-list}__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
+  --#{$simple-list}__item-link--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$simple-list}__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --#{$simple-list}__item-link--Color: var(--pf-t--global--text--color--subtle);
+  --#{$simple-list}__item-link--FontSize: var(--pf-t--global--font--size--body);
+  --#{$simple-list}__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
+  --#{$simple-list}__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
+  --#{$simple-list}__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
+  --#{$simple-list}__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --#{$simple-list}__item-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
+  --#{$simple-list}__item-link--BorderRadius: var(--pf-t--global--border--radius--tiny);
+
+  // Simple list item link
+  --#{$simple-list}__item-link--m-link--Color: var(--pf-t--global--text--color--link--default);
+  --#{$simple-list}__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover);
+  --#{$simple-list}__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
 
   // Simple list title
-  --#{$simple-list}__title--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$simple-list}__title--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$simple-list}__title--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$simple-list}__title--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$simple-list}__title--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$simple-list}__title--Color: var(--#{$pf-global}--Color--dark-200);
-  --#{$simple-list}__title--FontWeight: var(--#{$pf-global}--FontWeight--bold);
+  --#{$simple-list}__title--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$simple-list}__title--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__title--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$simple-list}__title--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__title--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$simple-list}__title--Color: var(--pf-t--global--text--color--regular);
+  --#{$simple-list}__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
   // Simple list section
-  --#{$simple-list}__section--section--MarginTop: var(--#{$pf-global}--spacer--sm);
+  --#{$simple-list}__section--section--MarginTop: var(--pf-t--global--spacer--sm);
 }
 
 .#{$simple-list}__item-link {
@@ -43,35 +42,33 @@
   padding-inline-start: var(--#{$simple-list}__item-link--PaddingLeft);
   padding-inline-end: var(--#{$simple-list}__item-link--PaddingRight);
   font-size: var(--#{$simple-list}__item-link--FontSize);
-  font-weight: var(--#{$simple-list}__item-link--FontWeight);
   color: var(--#{$simple-list}__item-link--Color);
   text-align: start;
+  text-decoration: none;
   background-color: var(--#{$simple-list}__item-link--BackgroundColor);
   border: none;
+  border-radius: var(--#{$simple-list}__item-link--BorderRadius);
+  
+  &.pf-m-link {
+    --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--m-link--Color);
+    --#{$simple-list}__item-link--hover--Color: var(--#{$simple-list}__item-link--m-link--m-current--Color);
+    --#{$simple-list}__item-link--m-current--Color:  var(--#{$simple-list}__item-link--m-link--hover--Color);
+  }
 
-  &:hover {
+  &:hover,
+  &:focus {
     --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--hover--BackgroundColor);
     --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--hover--Color);
 
     text-decoration: none;
-  }
-
-  &:focus {
-    --#{$simple-list}__item-link--FontWeight: var(--#{$simple-list}__item-link--focus--FontWeight);
-    --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--focus--BackgroundColor);
-    --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--focus--Color);
-  }
-
-  &:active {
-    --#{$simple-list}__item-link--FontWeight: var(--#{$simple-list}__item-link--active--FontWeight);
-    --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--active--BackgroundColor);
-    --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--active--Color);
+    mix-blend-mode: var(--#{$simple-list}__item-link--MixBlendMode);
   }
 
   &.pf-m-current {
-    --#{$simple-list}__item-link--FontWeight: var(--#{$simple-list}__item-link--m-current--FontWeight);
     --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--m-current--BackgroundColor);
     --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--m-current--Color);
+
+    mix-blend-mode: var(--#{$simple-list}__item-link--MixBlendMode);
   }
 }
 
@@ -87,11 +84,4 @@
 
 .#{$simple-list}__section + .#{$simple-list}__section {
   margin-block-start: var(--#{$simple-list}__section--section--MarginTop);
-}
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/simple-list";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-simple-list;
-}
+}

package/components/Table/table.scss

@@ -986,6 +986,7 @@
     margin-block-end: calc(var(--#{$table}--cell--PaddingBottom) * -1);
     margin-inline-start: calc(var(--#{$table}--cell--PaddingLeft) * -1);
     margin-inline-end: calc(var(--#{$table}--cell--PaddingRight) * -1);
+
   }
 
   @at-root .#{$table}__thead .#{$check}.pf-m-standalone {

package/components/Tooltip/tooltip.css

@@ -108,12 +108,10 @@
 
 .pf-v5-c-tooltip__arrow {
   position: absolute;
-  /* stylelint-disable liberty/use-logical-spec */
   top: var(--pf-v5-c-tooltip__arrow--Top, auto);
   right: var(--pf-v5-c-tooltip__arrow--Right, auto);
   bottom: var(--pf-v5-c-tooltip__arrow--Bottom, auto);
   left: var(--pf-v5-c-tooltip__arrow--Left, auto);
-  /* stylelint-enable */
   width: var(--pf-v5-c-tooltip__arrow--Width);
   height: var(--pf-v5-c-tooltip__arrow--Height);
   pointer-events: none;

package/components/Tooltip/tooltip.scss

@@ -54,7 +54,7 @@
     .pf-m-bottom,
     .pf-m-bottom-left,
     .pf-m-bottom-right
-  ) {
+    ) {
     --#{$tooltip}__arrow--Top: var(--#{$tooltip}--m-bottom--Top, 0);
     --#{$tooltip}__arrow--Left: var(--#{$tooltip}--m-bottom--Left, 50%);
     --#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-bottom--TranslateX);
@@ -139,12 +139,12 @@
 
 .#{$tooltip}__arrow {
   position: absolute;
-  /* stylelint-disable liberty/use-logical-spec */
+  // stylelint-disable liberty/use-logical-spec
   top: var(--#{$tooltip}__arrow--Top, auto);
   right: var(--#{$tooltip}__arrow--Right, auto);
   bottom: var(--#{$tooltip}__arrow--Bottom, auto);
   left: var(--#{$tooltip}__arrow--Left, auto);
-  /* stylelint-enable */
+  // stylelint-enable
   width: var(--#{$tooltip}__arrow--Width);
   height: var(--#{$tooltip}__arrow--Height);
   pointer-events: none;

package/components/Truncate/truncate.css

@@ -1,6 +1,10 @@
+:root,
 .pf-v5-c-truncate {
   --pf-v5-c-truncate--MinWidth: 12ch;
   --pf-v5-c-truncate__start--MinWidth: 6ch;
+}
+
+.pf-v5-c-truncate {
   display: inline-grid;
   grid-auto-flow: column;
   align-items: baseline;

package/components/Truncate/truncate.scss

@@ -1,9 +1,12 @@
 // @debug $truncate; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root,
 .#{$truncate} {
   --#{$truncate}--MinWidth: 12ch;
   --#{$truncate}__start--MinWidth: 6ch;
+}
 
+.#{$truncate} {
   display: inline-grid;
   grid-auto-flow: column;
   align-items: baseline;

package/docs/components/Accordion/examples/Accordion.md

@@ -694,17 +694,17 @@ cssPrefix: pf-v5-c-accordion
 
 There are two variations to build the accordion component. The first is to use `<div>` and `<h1 - h6>` tags:
 
-*   `.pf-v5-c-accordion` is placed on a `<div>`,
-*   `.pf-v5-c-accordion__toggle` is placed on a `<button>` that is inside a `<h1-h6>`, and
-*   `.pf-v5-c-accordion__expandable-content` is placed on a `<div>`.
+* `.pf-v5-c-accordion` is placed on a `<div>`,
+* `.pf-v5-c-accordion__toggle` is placed on a `<button>` that is inside a `<h1-h6>`, and
+* `.pf-v5-c-accordion__expandable-content` is placed on a `<div>`.
 
 The heading level that you use should fit within the rest of the headings outlined on your page.
 
 Another variation is using the definition list:
 
-*   `.pf-v5-c-accordion` is placed on a `<dl>`,
-*   `.pf-v5-c-accordion__toggle` is placed on a `<button>` that is inside a `<dt>`, and
-*   `.pf-v5-c-accordion__expandable-content` is placed on a `<dd>`.
+* `.pf-v5-c-accordion` is placed on a `<dl>`,
+* `.pf-v5-c-accordion__toggle` is placed on a `<button>` that is inside a `<dt>`, and
+* `.pf-v5-c-accordion__expandable-content` is placed on a `<dd>`.
 
 ### Usage
 

package/docs/components/Alert/examples/Alert.md

@@ -677,8 +677,8 @@ When toast alerts include a link or action, these elements are not announced as
 
 For sighted users, interactive elements can be included in this message in one of the following ways:
 
-*   Using a link to the Builds page: "The build is complete. Go to the [Builds](#) page to download" using `<a href="#">Builds</a>`
-*   Using a button to download: "The build is complete. Go to the Builds page to <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">download</button>" using `<button class="pf-v5-c-button pf-m-link pf-m-inline type="button">download</button>`
+* Using a link to the Builds page: "The build is complete. Go to the [Builds](#) page to download" using `<a href="#">Builds</a>`
+* Using a button to download: "The build is complete. Go to the Builds page to <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">download</button>" using `<button class="pf-v5-c-button pf-m-link pf-m-inline type="button">download</button>`
 
 ```html isFullscreen
 <ul class="pf-v5-c-alert-group pf-m-toast" role="list">

package/docs/components/Brand/examples/Brand.md

@@ -11,7 +11,7 @@ section: components
 <div class="show-light">
   <img
     class="pf-v5-c-brand"
-    src="/assets/images/pf_logo.svg"
+    src="/assets/images/PF-HorizontalLogo-Color.svg"
     alt="PatternFly logo"
   />
 </div>
@@ -19,7 +19,7 @@ section: components
 <div class="show-dark">
   <img
     class="pf-v5-c-brand"
-    src="/assets/images/pf_logo_white.svg"
+    src="/assets/images/PF-HorizontalLogo-Reverse.svg"
     alt="PatternFly logo"
   />
 </div>
@@ -32,25 +32,13 @@ section: components
 <div class="show-light">
   <picture
     class="pf-v5-c-brand pf-m-picture"
-    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-sm: 60px; --pf-v5-c-brand--Width-on-md: 220px;"
+    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-md: 220px;"
   >
-    <source
-      media="(min-width: 1200px)"
-      srcset="/assets/images/pf-c-brand__logo-on-xl.svg"
-    />
-    <source
-      media="(min-width: 992px)"
-      srcset="/assets/images/pf-c-brand__logo-on-lg.svg"
-    />
     <source
       media="(min-width: 768px)"
-      srcset="/assets/images/pf-c-brand__logo-on-md.svg"
+      srcset="/assets/images/PF-HorizontalLogo-Color.svg"
     />
-    <source
-      media="(min-width: 576px)"
-      srcset="/assets/images/pf-c-brand__logo-on-sm.svg"
-    />
-    <source srcset="/assets/images/pf-c-brand__logo.svg" />
+    <source srcset="/assets/images/PF-IconLogo-color.svg" />
     <img
       src="/assets/images/pf_logo.svg"
       alt="Fallback patternFly default logo"
@@ -61,27 +49,15 @@ section: components
 <div class="show-dark">
   <picture
     class="pf-v5-c-brand pf-m-picture"
-    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-sm: 60px; --pf-v5-c-brand--Width-on-md: 220px;"
+    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-md: 220px;"
   >
-    <source
-      media="(min-width: 1200px)"
-      srcset="/assets/images/pf-c-brand__logo-on-xl-white.svg"
-    />
-    <source
-      media="(min-width: 992px)"
-      srcset="/assets/images/pf-c-brand__logo-on-lg-white.svg"
-    />
     <source
       media="(min-width: 768px)"
-      srcset="/assets/images/pf-c-brand__logo-on-md-white.svg"
+      srcset="/assets/images/PF-HorizontalLogo-Reverse.svg"
     />
-    <source
-      media="(min-width: 576px)"
-      srcset="/assets/images/pf-c-brand__logo-on-sm-white.svg"
-    />
-    <source srcset="/assets/images/pf-c-brand__logo-white.svg" />
+    <source srcset="/assets/images/PF-IconLogo-Reverse.svg" />
     <img
-      src="/assets/images/pf_logo-white.svg"
+      src="/assets/images/pf_logo.svg"
       alt="Fallback patternFly default logo"
     />
   </picture>

package/docs/components/Breadcrumb/examples/Breadcrumb.md

@@ -281,7 +281,7 @@ cssPrefix: pf-v5-c-breadcrumb
 
 A breadcrumb is a list of links to display a user's navigational hierarchy. The last item of the breadcrumb list indicates the current page's location.
 
-*   `.pf-v5-c-breadcrumb__list` is the default breadcrumb navigation. It provides links to previous navigation pages and also shows the current page's location.
+* `.pf-v5-c-breadcrumb__list` is the default breadcrumb navigation. It provides links to previous navigation pages and also shows the current page's location.
 
 In the event that a page does not have a traditional `<h1>` page title, a heading can be included in the breadcrumbs and an optional link within.
 

package/docs/components/Card/examples/Card.md

@@ -139,6 +139,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-action-example-1-check"
           name="card-action-example-1-check"
           aria-labelledby="card-action-example-1"
@@ -221,6 +222,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-action-example-2-check"
           name="card-action-example-2-check"
           aria-labelledby="card-action-example-2"
@@ -305,6 +307,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-action-example-3-check"
           name="card-action-example-3-check"
           aria-labelledby="card-action-example-3"
@@ -508,7 +511,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -516,7 +519,6 @@ cssPrefix: pf-v5-c-card
               name="card-selectable-example-check"
               aria-labelledby="card-selectable-example"
             />
-
             <label
               class="pf-v5-c-check__label"
               for="card-selectable-example-check"
@@ -543,7 +545,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -552,7 +554,6 @@ cssPrefix: pf-v5-c-card
               name="card-selectable-example-disabled-check"
               aria-labelledby="card-selectable-example-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
               for="card-selectable-example-disabled-check"
@@ -582,7 +583,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -592,7 +593,6 @@ cssPrefix: pf-v5-c-card
               name="card-selectable-example-selected-disabled-check"
               aria-labelledby="card-selectable-example-selected-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
               for="card-selectable-example-selected-disabled-check"
@@ -626,7 +626,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-radio pf-m-standalone">
+          <div class="pf-v5-c-radio">
             <input
               class="pf-v5-c-radio__input"
               type="radio"
@@ -634,7 +634,6 @@ cssPrefix: pf-v5-c-card
               name="card-single-selectable-example-radio"
               aria-labelledby="card-single-selectable-example"
             />
-
             <label
               class="pf-v5-c-radio__label"
               for="card-single-selectable-example-radio"
@@ -664,7 +663,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-radio pf-m-standalone">
+          <div class="pf-v5-c-radio">
             <input
               class="pf-v5-c-radio__input"
               type="radio"
@@ -673,7 +672,6 @@ cssPrefix: pf-v5-c-card
               aria-labelledby="card-single-selectable-example-disabled"
               disabled
             />
-
             <label
               class="pf-v5-c-radio__label pf-m-disabled"
               for="card-single-selectable-example-disabled-radio"
@@ -703,7 +701,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-radio pf-m-standalone">
+          <div class="pf-v5-c-radio">
             <input
               class="pf-v5-c-radio__input"
               type="radio"
@@ -713,7 +711,6 @@ cssPrefix: pf-v5-c-card
               disabled
               checked
             />
-
             <label
               class="pf-v5-c-radio__label pf-m-disabled"
               for="card-single-selectable-example-selected-disabled-radio"
@@ -867,7 +864,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -875,7 +872,6 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-example-check"
               aria-labelledby="card-clickable-selectable-example"
             />
-
             <label
               class="pf-v5-c-check__label"
               for="card-clickable-selectable-example-check"
@@ -908,7 +904,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -916,7 +912,6 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-current-example-check"
               aria-labelledby="card-clickable-selectable-current-example"
             />
-
             <label
               class="pf-v5-c-check__label"
               for="card-clickable-selectable-current-example-check"
@@ -949,7 +944,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -958,7 +953,6 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-example-disabled-check"
               aria-labelledby="card-clickable-selectable-example-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
               for="card-clickable-selectable-example-disabled-check"
@@ -992,7 +986,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -1002,7 +996,6 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-example-selected-disabled-check"
               aria-labelledby="card-clickable-selectable-example-selected-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
               for="card-clickable-selectable-example-selected-disabled-check"
@@ -1233,6 +1226,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-expandable-example-check"
           name="card-expandable-example-check"
           aria-labelledby="card-expandable-example"
@@ -1335,6 +1329,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-expandable-image-example-check"
           name="card-expandable-image-example-check"
           aria-labelledby="card-expandable-image-example"
@@ -1422,6 +1417,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-expanded-example-check"
           name="card-expanded-example-check"
           aria-labelledby="card-expanded-example"
@@ -1506,6 +1502,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-full-height-example-check"
           name="card-full-height-example-check"
           aria-labelledby="card-full-height-example"
@@ -1590,6 +1587,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-toggle-on-right-example-check"
           name="card-toggle-on-right-example-check"
           aria-labelledby="card-toggle-on-right-example"

package/docs/components/Check/examples/Check.md

@@ -47,6 +47,7 @@ cssPrefix: pf-v5-c-check
     type="checkbox"
     id="check-checked-example-input"
     name="check-checked-example-input"
+    checked
   />
   <label
     class="pf-v5-c-check__label"

package/docs/components/Content/examples/Content.md

@@ -163,11 +163,11 @@ cssPrefix: pf-v5-c-content
 
 When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `pf-v5-c-content` as container. It can handle almost any HTML tag:
 
-*   `<p>` paragraphs
-*   `<ul>` `<ol>` `<dl>` lists
-*   `<h1>` to `<h6>` headings
-*   `<blockquote>` quotes
-*   `<em>` and `<strong>`
+* `<p>` paragraphs
+* `<ul>` `<ol>` `<dl>` lists
+* `<h1>` to `<h6>` headings
+* `<blockquote>` quotes
+* `<em>` and `<strong>`
 
 This `pf-v5-c-content` class can be used in any context where you just want to (or can only) write some text.
 

package/docs/components/Divider/examples/Divider.css

@@ -3,11 +3,13 @@
   align-items: center;
 }
 
+[id*="divider-vertical"],
 [id*="ws-core-c-divider-vertical"],
 #ws-core-c-divider-horizontal-on-lg {
-  height: 4rem;
+  height: 6rem;
 }
 
 [id*="ws-core-c-divider"] .ws-preview-html {
   height: 100%;
 }
+

package/docs/components/Divider/examples/Divider.md

@@ -34,24 +34,23 @@ cssPrefix: pf-v5-c-divider
 ### Inset medium
 
 ```html
-<div class="pf-v5-c-divider pf-m-inset-md" role="separator"></div>
+<hr class="pf-v5-c-divider pf-m-inset-md" />
 
 ```
 
 ### Md inset, no inset on md, 3xl inset on lg, lg inset on xl
 
 ```html
-<div
+<hr
   class="pf-v5-c-divider pf-m-inset-md pf-m-inset-none-on-md pf-m-inset-3xl-on-lg pf-m-inset-lg-on-xl"
-  role="separator"
-></div>
+/>
 
 ```
 
 ### Vertical
 
 ```html
-<div class="pf-v5-c-divider pf-m-vertical pf-m-inset-md" role="separator"></div>
+<div class="pf-v5-c-divider pf-m-vertical" role="separator"></div>
 
 ```
 

package/docs/components/InlineEdit/examples/InlineEdit.md

@@ -930,4 +930,6 @@ All accessibility requirements for inputs apply to elements within inline edit.
 | `.pf-m-valid` | `.pf-v5-c-inline-edit__action` | Modifies the action button state. |
 | `.pf-m-enable-editable` | `.pf-v5-c-inline-edit__action` | Exposes an inline edit action by default. |
 
-    -->
+```
+-->
+```