@patternfly/patternfly 6.0.0-alpha.205 → 6.0.0-alpha.206

package/components/Form/form.css

@@ -104,8 +104,8 @@
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main {
@@ -132,8 +132,8 @@
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main {
@@ -160,8 +160,8 @@
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main {
@@ -188,8 +188,8 @@
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main {
@@ -216,8 +216,8 @@
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main {
@@ -244,8 +244,8 @@
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main {
@@ -272,8 +272,8 @@
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main {
@@ -317,6 +317,7 @@
 }
 .pf-v6-c-form__group-label.pf-m-info {
   display: flex;
+  gap: var(--pf-v6-c-form__group-label--m-info--Gap);
   align-items: flex-end;
 }
 
@@ -325,7 +326,6 @@
 }
 
 .pf-v6-c-form__group-label-info {
-  margin-inline-start: var(--pf-v6-c-form__group-label-info--MarginInlineStart);
   font-size: var(--pf-v6-c-form__group-label-info--FontSize);
 }
 

package/components/Form/form.scss

@@ -188,8 +188,9 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
         }
 
         &.pf-m-info {
+          --#{$form}__group-label--m-info--Gap: var(--#{$form}--m-horizontal__group-label--m-info--Gap);
+
           flex-direction: column;
-          gap: var(--#{$form}--m-horizontal__group-label--m-info--Gap);
           align-items: flex-start;
         }
         // stylelint-enable
@@ -243,6 +244,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 
   &.pf-m-info {
     display: flex;
+    gap: var(--#{$form}__group-label--m-info--Gap);
     align-items: flex-end;
   }
 }
@@ -252,7 +254,6 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 }
 
 .#{$form}__group-label-info {
-  margin-inline-start: var(--#{$form}__group-label-info--MarginInlineStart);
   font-size: var(--#{$form}__group-label-info--FontSize);
 }
 

package/components/FormControl/form-control.css

@@ -21,8 +21,9 @@
   --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
   --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
   --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
-  --pf-v6-c-form-control--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
-  --pf-v6-c-form-control--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
+  --pf-v6-c-form-control--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
+  --pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
   --pf-v6-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
   --pf-v6-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
@@ -33,8 +34,6 @@
   --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-form-control--m-readonly--BorderColor: transparent;
   --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
-  --pf-v6-c-form-control--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
-  --pf-v6-c-form-control--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
   --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
   --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
@@ -135,8 +134,6 @@
 }
 .pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
   --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
-  --pf-v6-c-form-control--focus--after--BorderWidth: var(--pf-v6-c-form-control--m-readonly--focus--after--BorderWidth);
-  --pf-v6-c-form-control--focus--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--focus--after--BorderColor);
 }
 .pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
   --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
@@ -145,10 +142,6 @@
   --pf-v6-c-form-control--after--BorderStyle: none;
   --pf-v6-c-form-control--OutlineOffset: var(--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset);
 }
-.pf-v6-c-form-control:hover {
-  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
-  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
-}
 .pf-v6-c-form-control.pf-m-expanded {
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-expanded--after--BorderColor);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-expanded--after--BorderWidth);
@@ -165,6 +158,7 @@
 .pf-v6-c-form-control.pf-m-error {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
+  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
   --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
@@ -175,6 +169,7 @@
 .pf-v6-c-form-control.pf-m-success {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
+  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
   --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
@@ -185,6 +180,7 @@
 .pf-v6-c-form-control.pf-m-warning {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
+  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
   --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
@@ -192,6 +188,10 @@
 .pf-v6-c-form-control.pf-m-warning.pf-m-icon {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
 }
+.pf-v6-c-form-control:hover {
+  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
+  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
+}
 .pf-v6-c-form-control.pf-m-icon {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
 }

package/components/FormControl/form-control.scss

@@ -27,10 +27,9 @@
   // hover
   --#{$form-control}--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
   --#{$form-control}--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
-
-  // focus
-  --#{$form-control}--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
-  --#{$form-control}--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
+  --#{$form-control}--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
+  --#{$form-control}--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
+  --#{$form-control}--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
 
   // expanded
   --#{$form-control}--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
@@ -49,8 +48,6 @@
   --#{$form-control}--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$form-control}--m-readonly--BorderColor: transparent;
   --#{$form-control}--m-readonly--hover--after--BorderColor: revert;
-  --#{$form-control}--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
-  --#{$form-control}--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
 
   // readonly plain
   --#{$form-control}--m-readonly--m-plain--BackgroundColor: transparent;
@@ -188,8 +185,6 @@
     // stylelint-disable selector-not-notation
     &:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
       --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-readonly--hover--after--BorderColor);
-      --#{$form-control}--focus--after--BorderWidth: var(--#{$form-control}--m-readonly--focus--after--BorderWidth);
-      --#{$form-control}--focus--after--BorderColor: var(--#{$form-control}--m-readonly--focus--after--BorderColor);
     }
 
     &.pf-m-plain {
@@ -201,11 +196,6 @@
     }
   }
 
-  &:hover {
-    --#{$form-control}--after--BorderColor: var(--#{$form-control}--hover--after--BorderColor);
-    --#{$form-control}--after--BorderWidth: var(--#{$form-control}--hover--after--BorderWidth);
-  }
-
   &.pf-m-expanded {
     --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-expanded--after--BorderColor);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-expanded--after--BorderWidth);
@@ -225,6 +215,7 @@
   &.pf-m-error {
     --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-error--PaddingInlineEnd);
     --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-error--after--BorderColor);
+    --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-error--hover--after--BorderColor);
     --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-error__icon--m-status--Color);
     --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-error--m-status--PaddingInlineEnd);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-error--after--BorderWidth);
@@ -237,6 +228,7 @@
   &.pf-m-success {
     --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-success--PaddingInlineEnd);
     --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-success--after--BorderColor);
+    --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-success--hover--after--BorderColor);
     --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-success__icon--m-status--Color);
     --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-success--m-status--PaddingInlineEnd);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-success--after--BorderWidth);
@@ -249,6 +241,7 @@
   &.pf-m-warning {
     --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-warning--PaddingInlineEnd);
     --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-warning--after--BorderColor);
+    --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-warning--hover--after--BorderColor);
     --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-warning__icon--m-status--Color);
     --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-warning--m-status--PaddingInlineEnd);
     --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-warning--after--BorderWidth);
@@ -258,6 +251,11 @@
     }
   }
 
+  &:hover {
+    --#{$form-control}--after--BorderColor: var(--#{$form-control}--hover--after--BorderColor);
+    --#{$form-control}--after--BorderWidth: var(--#{$form-control}--hover--after--BorderWidth);
+  }
+
   &.pf-m-icon {
     --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--PaddingInlineEnd);
   }

package/components/MenuToggle/menu-toggle.scss

@@ -510,4 +510,4 @@
 .#{$menu-toggle}__status-icon {
   margin-inline-end: var(--#{$menu-toggle}__status-icon--MarginInlineEnd);
   color: var(--#{$menu-toggle}__status-icon--Color, inherit);
-}
+}

package/components/_index.css

@@ -6387,8 +6387,8 @@ ul) {
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main {
@@ -6415,8 +6415,8 @@ ul) {
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main {
@@ -6443,8 +6443,8 @@ ul) {
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main {
@@ -6471,8 +6471,8 @@ ul) {
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main {
@@ -6499,8 +6499,8 @@ ul) {
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main {
@@ -6527,8 +6527,8 @@ ul) {
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main {
@@ -6555,8 +6555,8 @@ ul) {
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main {
@@ -6600,6 +6600,7 @@ ul) {
 }
 .pf-v6-c-form__group-label.pf-m-info {
   display: flex;
+  gap: var(--pf-v6-c-form__group-label--m-info--Gap);
   align-items: flex-end;
 }
 
@@ -6608,7 +6609,6 @@ ul) {
 }
 
 .pf-v6-c-form__group-label-info {
-  margin-inline-start: var(--pf-v6-c-form__group-label-info--MarginInlineStart);
   font-size: var(--pf-v6-c-form__group-label-info--FontSize);
 }
 
@@ -6823,8 +6823,9 @@ ul) {
   --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
   --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
   --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
-  --pf-v6-c-form-control--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
-  --pf-v6-c-form-control--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
+  --pf-v6-c-form-control--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
+  --pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
   --pf-v6-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
   --pf-v6-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
@@ -6835,8 +6836,6 @@ ul) {
   --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-form-control--m-readonly--BorderColor: transparent;
   --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
-  --pf-v6-c-form-control--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
-  --pf-v6-c-form-control--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
   --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
   --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
@@ -6937,8 +6936,6 @@ ul) {
 }
 .pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
   --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
-  --pf-v6-c-form-control--focus--after--BorderWidth: var(--pf-v6-c-form-control--m-readonly--focus--after--BorderWidth);
-  --pf-v6-c-form-control--focus--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--focus--after--BorderColor);
 }
 .pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
   --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
@@ -6947,10 +6944,6 @@ ul) {
   --pf-v6-c-form-control--after--BorderStyle: none;
   --pf-v6-c-form-control--OutlineOffset: var(--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset);
 }
-.pf-v6-c-form-control:hover {
-  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
-  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
-}
 .pf-v6-c-form-control.pf-m-expanded {
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-expanded--after--BorderColor);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-expanded--after--BorderWidth);
@@ -6967,6 +6960,7 @@ ul) {
 .pf-v6-c-form-control.pf-m-error {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
+  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
   --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
@@ -6977,6 +6971,7 @@ ul) {
 .pf-v6-c-form-control.pf-m-success {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
+  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
   --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
@@ -6987,6 +6982,7 @@ ul) {
 .pf-v6-c-form-control.pf-m-warning {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
+  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
   --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
@@ -6994,6 +6990,10 @@ ul) {
 .pf-v6-c-form-control.pf-m-warning.pf-m-icon {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
 }
+.pf-v6-c-form-control:hover {
+  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
+  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
+}
 .pf-v6-c-form-control.pf-m-icon {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
 }

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

@@ -501,7 +501,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="text"
                 value="Text input description content"
                 id="bulk-edit-table-example-row-1-text-input"
-                aria-label="Text input"
+                aria-label="Text input for row 1"
               />
             </span>
           </div>
@@ -522,14 +522,18 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="text"
                 value="Text input disabled, description content"
                 id="bulk-edit-table-example-row-1-text-input-disabled"
-                aria-label="Disabled text input"
+                aria-label="Disabled text input for row 1"
               />
             </span>
           </div>
         </td>
         <td class="pf-v6-c-table__td" role="cell" data-label="Checkboxes">
           <div class="pf-v6-c-inline-edit__value">Check 1, Check 2</div>
-          <div class="pf-v6-c-inline-edit__group pf-m-column">
+          <div
+            class="pf-v6-c-inline-edit__group pf-m-column"
+            role="group"
+            aria-label="Checkbox group for row 1"
+          >
             <div class="pf-v6-c-inline-edit__input">
               <div class="pf-v6-c-check">
                 <input
@@ -567,7 +571,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           <div
             class="pf-v6-c-inline-edit__group pf-m-column"
             role="radiogroup"
-            aria-label="Radio group example"
+            aria-label="Radio group for row 1"
           >
             <div class="pf-v6-c-inline-edit__input">
               <div class="pf-v6-c-radio">
@@ -609,7 +613,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="number"
                 value="2"
                 id="bulk-edit-table-example-row-1-number-input"
-                aria-label="Number input"
+                aria-label="Number input for row 1"
               />
             </span>
           </div>
@@ -686,7 +690,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="text"
                 value="Text input description content"
                 id="bulk-edit-table-example-row-2-text-input"
-                aria-label="Text input"
+                aria-label="Text input for row 2"
               />
             </span>
           </div>
@@ -707,14 +711,18 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="text"
                 value="Text input disabled, description content"
                 id="bulk-edit-table-example-row-2-text-input-disabled"
-                aria-label="Disabled text input"
+                aria-label="Disabled text input for row 2"
               />
             </span>
           </div>
         </td>
         <td class="pf-v6-c-table__td" role="cell" data-label="Checkboxes">
           <div class="pf-v6-c-inline-edit__value">Check 1, Check 2</div>
-          <div class="pf-v6-c-inline-edit__group pf-m-column">
+          <div
+            class="pf-v6-c-inline-edit__group pf-m-column"
+            role="group"
+            aria-label="Checkbox group for row 2"
+          >
             <div class="pf-v6-c-inline-edit__input">
               <div class="pf-v6-c-check">
                 <input
@@ -752,7 +760,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           <div
             class="pf-v6-c-inline-edit__group pf-m-column"
             role="radiogroup"
-            aria-label="Radio group example"
+            aria-label="Radio group for row 2"
           >
             <div class="pf-v6-c-inline-edit__input">
               <div class="pf-v6-c-radio">
@@ -794,7 +802,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
                 type="number"
                 value="2"
                 id="bulk-edit-table-example-row-2-number-input"
-                aria-label="Number input"
+                aria-label="Number input for row 2"
               />
             </span>
           </div>

package/docs/components/Panel/examples/Panel.md

@@ -100,7 +100,7 @@ cssPrefix: pf-v6-c-panel
 
 ```html
 <div class="pf-v6-c-panel pf-m-scrollable">
-  <div class="pf-v6-c-panel__main">
+  <div class="pf-v6-c-panel__main" tabindex="0">
     <div class="pf-v6-c-panel__main-body">
       Main content
       <br />
@@ -131,7 +131,7 @@ cssPrefix: pf-v6-c-panel
 <div class="pf-v6-c-panel pf-m-scrollable">
   <div class="pf-v6-c-panel__header">Header content</div>
   <hr class="pf-v6-c-divider" />
-  <div class="pf-v6-c-panel__main">
+  <div class="pf-v6-c-panel__main" tabindex="0">
     <div class="pf-v6-c-panel__main-body">
       Main content
       <br />

package/docs/components/Sidebar/examples/Sidebar.css

@@ -1,4 +1,6 @@
-.ws-core-c-sidebar .ws-preview-html {
-  height: 200px;
+#ws-core-c-sidebar-sticky-panel,
+#ws-core-c-sidebar-static-panel,
+#ws-core-c-sidebar-responsive-panel-width {
   overflow: auto;
+  max-height: 200px;
 }

package/docs/components/Sidebar/examples/Sidebar.md

@@ -140,7 +140,7 @@ cssPrefix: pf-v6-c-sidebar
 ### Sticky panel
 
 ```html
-<div class="pf-v6-c-sidebar">
+<div class="pf-v6-c-sidebar" tabindex="0">
   <div class="pf-v6-c-sidebar__main">
     <div class="pf-v6-c-sidebar__panel pf-m-sticky">Sidebar panel</div>
     <div class="pf-v6-c-sidebar__content">
@@ -158,7 +158,7 @@ cssPrefix: pf-v6-c-sidebar
 ### Static panel
 
 ```html
-<div class="pf-v6-c-sidebar">
+<div class="pf-v6-c-sidebar" tabindex="0">
   <div class="pf-v6-c-sidebar__main">
     <div class="pf-v6-c-sidebar__panel pf-m-static">Sidebar panel</div>
     <div class="pf-v6-c-sidebar__content">
@@ -176,7 +176,7 @@ cssPrefix: pf-v6-c-sidebar
 ### Responsive panel width
 
 ```html
-<div class="pf-v6-c-sidebar">
+<div class="pf-v6-c-sidebar" tabindex="0">
   <div class="pf-v6-c-sidebar__main">
     <div
       class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-width-50 pf-m-width-33-on-lg pf-m-width-75-on-xl"