@patternfly/patternfly 6.3.0-prerelease.76 → 6.3.0-prerelease.78

package/components/_index.css

@@ -2458,12 +2458,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-calendar-month__date--Width: 4ch;
   --pf-v6-c-calendar-month__date--Height: 4ch;
+  --pf-v6-c-calendar-month__date--BorderWidth: 0;
+  --pf-v6-c-calendar-month__date--BorderColor: transparent;
   --pf-v6-c-calendar-month__date--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-calendar-month__date--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-calendar-month__date--BackgroundColor: transparent;
   --pf-v6-c-calendar-month__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-calendar-month__date--disabled--Color: var(--pf-t--global--text--color--on-disabled);
-  --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-calendar-month__date--after--BorderWidth: 0;
   --pf-v6-c-calendar-month__date--after--BorderColor: transparent;
   --pf-v6-c-calendar-month__date--after--OutlineOffset: 0;
   --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -2472,9 +2474,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-calendar-month__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked);
   --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
+  --pf-v6-c-calendar-month__date--focus--after--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-calendar-month__date--after--focus--OutlineOffset: -2px;
-  --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
-  --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
+  --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor: transparent;
 }
 
 .pf-v6-c-calendar-month {
@@ -2555,8 +2560,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 }
 .pf-v6-c-calendar-month__dates-cell.pf-m-current {
   --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
-  --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth);
-  --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor);
+  --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth);
+  --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor);
 }
 .pf-v6-c-calendar-month__dates-cell.pf-m-in-range {
   --pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth);
@@ -2579,8 +2584,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 .pf-v6-c-calendar-month__dates-cell.pf-m-selected {
   --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
   --pf-v6-c-calendar-month__date--Color: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--Color);
+  --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth);
+  --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor);
   --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
-  --pf-v6-c-calendar-month__date--hover--BorderWidth: 0;
+  --pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth);
   --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
   --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
   --pf-v6-c-calendar-month__date--after--OutlineOffset: var(--pf-v6-c-calendar-month__date--after--focus--OutlineOffset);
@@ -2604,6 +2611,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   background-color: var(--pf-v6-c-calendar-month__date--BackgroundColor);
   border: 0;
 }
+.pf-v6-c-calendar-month__date::before {
+  position: absolute;
+  inset: 0;
+  content: "";
+  border: var(--pf-v6-c-calendar-month__date--BorderWidth) solid var(--pf-v6-c-calendar-month__date--BorderColor);
+}
 .pf-v6-c-calendar-month__date::after {
   position: absolute;
   inset-block-start: var(--pf-v6-c-calendar-month__date--after--OutlineOffset);
@@ -2613,15 +2626,17 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   content: "";
   border: var(--pf-v6-c-calendar-month__date--after--BorderWidth) solid var(--pf-v6-c-calendar-month__date--after--BorderColor);
 }
-.pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::after {
+.pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::before, .pf-v6-c-calendar-month__date::after {
   border-radius: var(--pf-v6-c-calendar-month__date--BorderRadius);
 }
 .pf-v6-c-calendar-month__date:hover, .pf-v6-c-calendar-month__date.pf-m-hover {
   --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__date--hover--BackgroundColor);
-  border: var(--pf-v6-c-calendar-month__date--hover--BorderColor) solid var(--pf-v6-c-calendar-month__date--hover--BorderWidth);
+  --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__date--hover--BorderWidth);
+  --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__date--hover--BorderColor);
 }
 .pf-v6-c-calendar-month__date:focus, .pf-v6-c-calendar-month__date.pf-m-focus {
   --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__date--focus--after--BorderColor);
+  --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__date--focus--after--BorderWidth);
   outline: 0;
 }
 .pf-v6-c-calendar-month__date:disabled {
@@ -2704,6 +2719,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-card--m-full-height--Height: 100%;
   --pf-v6-c-card--m-plain--BorderColor: transparent;
   --pf-v6-c-card--m-plain--BackgroundColor: transparent;
@@ -2790,6 +2806,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 }
 .pf-v6-c-card.pf-m-secondary {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
 }
 .pf-v6-c-card.pf-m-plain {
@@ -5792,7 +5809,8 @@ ul) {
   --pf-v6-c-drawer__panel--BoxShadow: none;
   --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
   --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--high-contrast--regular);
-  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default);
+  --pf-v6-c-drawer--m-inline__panel--after--Width: 0;
+  --pf-v6-c-drawer--m-inline__panel--after--md--Width: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-drawer__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
@@ -6100,6 +6118,7 @@ ul) {
 
 @media screen and (min-width: 48rem) {
   .pf-v6-c-drawer {
+    --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
     min-width: var(--pf-v6-c-drawer__panel--MinWidth);
   }
   .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -7748,12 +7767,6 @@ ul) {
 .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
   padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
 }
-@-moz-document url-prefix() {
-  .pf-v6-c-form-control:has(select) {
-    --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
-    --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
-  }
-}
 .pf-v6-c-form-control.pf-m-placeholder > select {
   --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
 }
@@ -8718,7 +8731,7 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--MaxWidth: 100%;
   --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
-  --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -8859,10 +8872,10 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
   --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
-  --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--default);
+  --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
   --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
-  --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
+  --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
   --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
   --pf-v6-c-label--m-add--BackgroundColor: transparent;
   --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
@@ -12606,6 +12619,15 @@ ul.pf-v6-c-list {
     --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
   }
 }
+@media screen and (max-width: calc(48rem - 1px)) {
+  .pf-v6-c-page {
+    --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
+    --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
+    --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
+    --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
+    --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
+  }
+}
 
 .pf-v6-c-page {
   display: grid;
@@ -12996,13 +13018,8 @@ ul.pf-v6-c-list {
 @media screen and (max-width: calc(48rem - 1px)) {
   .pf-v6-c-page__main-container {
     --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
-    --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
-    --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
     --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
     --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
-    --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
-    --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
-    --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
   }
 }
 
@@ -13607,12 +13624,12 @@ ul.pf-v6-c-list {
   --pf-v6-c-panel--before--BorderWidth: 0;
   --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-panel--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -13921,7 +13938,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
   --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -20839,6 +20856,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
   --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
@@ -20850,12 +20868,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
   --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
-  --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
   --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
+  --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
   --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
-  --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
   --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
   --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -20878,11 +20897,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
   margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
 }
-.pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button::before {
+.pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button {
   border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius);
   border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius);
 }
-.pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button::before {
+.pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button {
   border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius);
   border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius);
 }
@@ -20901,25 +20920,31 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   background-color: var(--pf-v6-c-toggle-group__button--BackgroundColor);
   border: 0;
 }
-.pf-v6-c-toggle-group__button::before {
+.pf-v6-c-toggle-group__button::before, .pf-v6-c-toggle-group__button::after {
   position: absolute;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
+  inset: 0;
   pointer-events: none;
   content: "";
   border-style: solid;
+  border-radius: inherit;
+}
+.pf-v6-c-toggle-group__button::before {
   border-width: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
   border-block-start-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
   border-block-end-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
   border-inline-start-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
   border-inline-end-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
 }
+.pf-v6-c-toggle-group__button::after {
+  inset: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
+  border-color: var(--pf-v6-c-toggle-group__button--after--BorderColor, transparent);
+  border-width: var(--pf-v6-c-toggle-group__button--after--BorderWidth, 0);
+}
 .pf-v6-c-toggle-group__button:is(:hover, :focus) {
   --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
   --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
   --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
+  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
   text-decoration-line: none;
 }
 .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -20927,6 +20952,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
   --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
   --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
+  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
 }
 .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
   --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);

package/docs/demos/Form/examples/BasicForms.md

@@ -9,7 +9,31 @@ subsection: forms
 ```html
 <form class="pf-v6-c-form" novalidate>
   <div class="pf-v6-c-form__group">
-    <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-name">
+    <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-basic-title">
+        <span class="pf-v6-c-form__label-text">Title</span></label>
+    </div>
+    <div class="pf-v6-c-form__group-control">
+      <span class="pf-v6-c-form-control pf-m-placeholder">
+        <select id="form-demo-basic-title" name="form-demo-basic-title">
+          <option value selected>Selectable one</option>
+          <option value="Mr">Mr</option>
+          <option value="Miss">Miss</option>
+          <option value="Mrs">Mrs</option>
+          <option value="Ms">Ms</option>
+          <option value="Dr">Dr</option>
+          <option value="Dr" disabled>Disabled option</option>
+          <option value="Other">Other</option>
+        </select>
+        <span class="pf-v6-c-form-control__utilities">
+          <span class="pf-v6-c-form-control__toggle-icon">
+            <i class="fas fa-caret-down" aria-hidden="true"></i>
+          </span>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div class="pf-v6-c-form__group">
+    <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-basic-name">
         <span class="pf-v6-c-form__label-text">Full name</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>
     </div>
     <div class="pf-v6-c-form__group-control">
@@ -17,15 +41,18 @@ subsection: forms
         <input
           required
           type="text"
-          id="-name"
-          name="-name"
-          aria-describedby="-name-helper"
+          id="form-demo-basic-name"
+          name="form-demo-basic-name"
+          aria-describedby="form-demo-basic-name-helper"
         />
       </span>
 
       <div class="pf-v6-c-form__helper-text" aria-live="polite">
         <div class="pf-v6-c-helper-text">
-          <div class="pf-v6-c-helper-text__item" id="-name-helper">
+          <div
+            class="pf-v6-c-helper-text__item"
+            id="form-demo-basic-name-helper"
+          >
             <span
               class="pf-v6-c-helper-text__item-text"
             >Include your middle name if you have one.</span>
@@ -35,17 +62,21 @@ subsection: forms
     </div>
   </div>
   <div class="pf-v6-c-form__group">
-    <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-email">
+    <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-basic-email">
         <span class="pf-v6-c-form__label-text">Email</span></label>
     </div>
     <div class="pf-v6-c-form__group-control">
       <span class="pf-v6-c-form-control">
-        <input type="email" id="-email" name="-email" />
+        <input
+          type="email"
+          id="form-demo-basic-email"
+          name="form-demo-basic-email"
+        />
       </span>
     </div>
   </div>
   <div class="pf-v6-c-form__group">
-    <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-phone">
+    <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="form-demo-basic-phone">
         <span class="pf-v6-c-form__label-text">Phone number</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
         <span
           class="pf-v6-c-button pf-m-no-padding pf-m-plain"
@@ -53,7 +84,7 @@ subsection: forms
           role="button"
           tabindex="0"
           aria-label="More information for phone number field"
-          aria-describedby="-phone"
+          aria-describedby="form-demo-basic-phone"
         >
           <span class="pf-v6-c-button__icon">
             <svg
@@ -78,8 +109,8 @@ subsection: forms
           required
           type="tel"
           placeholder="555-555-5555"
-          id="-phone"
-          name="-phone"
+          id="form-demo-basic-phone"
+          name="form-demo-basic-phone"
         />
       </span>
     </div>
@@ -87,9 +118,12 @@ subsection: forms
   <div
     class="pf-v6-c-form__group"
     role="group"
-    aria-labelledby="form-demo-basic-contact-legend"
+    aria-labelledby="form-demo-basicform-demo-basic-contact-legend"
   >
-    <div class="pf-v6-c-form__group-label" id="form-demo-basic-contact-legend"><span class="pf-v6-c-form__label">
+    <div
+      class="pf-v6-c-form__group-label"
+      id="form-demo-basicform-demo-basic-contact-legend"
+    ><span class="pf-v6-c-form__label">
         <span class="pf-v6-c-form__label-text">How can we contact you?</span></span>
     </div>
     <div class="pf-v6-c-form__group-control pf-m-inline">
@@ -97,42 +131,51 @@ subsection: forms
         <input
           class="pf-v6-c-check__input"
           type="checkbox"
-          id="-contact-check-1"
-          name="-contact-check-1"
+          id="form-demo-basic-contact-check-1"
+          name="form-demo-basic-contact-check-1"
         />
 
-        <label class="pf-v6-c-check__label" for="-contact-check-1">Email</label>
+        <label
+          class="pf-v6-c-check__label"
+          for="form-demo-basic-contact-check-1"
+        >Email</label>
       </div>
       <div class="pf-v6-c-check">
         <input
           class="pf-v6-c-check__input"
           type="checkbox"
-          id="-contact-check-2"
-          name="-contact-check-2"
+          id="form-demo-basic-contact-check-2"
+          name="form-demo-basic-contact-check-2"
         />
 
-        <label class="pf-v6-c-check__label" for="-contact-check-2">Phone</label>
+        <label
+          class="pf-v6-c-check__label"
+          for="form-demo-basic-contact-check-2"
+        >Phone</label>
       </div>
       <div class="pf-v6-c-check">
         <input
           class="pf-v6-c-check__input"
           type="checkbox"
-          id="-contact-check-3"
-          name="-contact-check-3"
+          id="form-demo-basic-contact-check-3"
+          name="form-demo-basic-contact-check-3"
         />
 
-        <label class="pf-v6-c-check__label" for="-contact-check-3">Mail</label>
+        <label
+          class="pf-v6-c-check__label"
+          for="form-demo-basic-contact-check-3"
+        >Mail</label>
       </div>
     </div>
   </div>
   <div
     class="pf-v6-c-form__group"
     role="radiogroup"
-    aria-labelledby="form-demo-basic-time-zone-legend"
+    aria-labelledby="form-demo-basicform-demo-basic-time-zone-legend"
   >
     <div
       class="pf-v6-c-form__group-label"
-      id="form-demo-basic-time-zone-legend"
+      id="form-demo-basicform-demo-basic-time-zone-legend"
     ><span class="pf-v6-c-form__label">
         <span class="pf-v6-c-form__label-text">Time zone</span></span>
     </div>
@@ -141,31 +184,40 @@ subsection: forms
         <input
           class="pf-v6-c-radio__input"
           type="radio"
-          id="-time-zone-radio-1"
-          name="-time-zone-radio"
+          id="form-demo-basic-time-zone-radio-1"
+          name="form-demo-basic-time-zone-radio"
         />
 
-        <label class="pf-v6-c-radio__label" for="-time-zone-radio-1">Eastern</label>
+        <label
+          class="pf-v6-c-radio__label"
+          for="form-demo-basic-time-zone-radio-1"
+        >Eastern</label>
       </div>
       <div class="pf-v6-c-radio">
         <input
           class="pf-v6-c-radio__input"
           type="radio"
-          id="-time-zone-radio-2"
-          name="-time-zone-radio"
+          id="form-demo-basic-time-zone-radio-2"
+          name="form-demo-basic-time-zone-radio"
         />
 
-        <label class="pf-v6-c-radio__label" for="-time-zone-radio-2">Central</label>
+        <label
+          class="pf-v6-c-radio__label"
+          for="form-demo-basic-time-zone-radio-2"
+        >Central</label>
       </div>
       <div class="pf-v6-c-radio">
         <input
           class="pf-v6-c-radio__input"
           type="radio"
-          id="-time-zone-radio-3"
-          name="-time-zone-radio"
+          id="form-demo-basic-time-zone-radio-3"
+          name="form-demo-basic-time-zone-radio"
         />
 
-        <label class="pf-v6-c-radio__label" for="-time-zone-radio-3">Pacific</label>
+        <label
+          class="pf-v6-c-radio__label"
+          for="form-demo-basic-time-zone-radio-3"
+        >Pacific</label>
       </div>
     </div>
   </div>
@@ -1268,7 +1320,7 @@ subsection: forms
                 <div class="pf-v6-c-form__group">
                   <div class="pf-v6-c-form__group-label"><label
                       class="pf-v6-c-form__label"
-                      id="-node-selector-terms-title"
+                      id="form-demo-sections-complex-form-node-selector-terms-title"
                     >
                       <span class="pf-v6-c-form__label-text">Node selector terms</span>&nbsp;<span
                         class="pf-v6-c-form__label-required"
@@ -1282,9 +1334,9 @@ subsection: forms
                           <input
                             required
                             type="text"
-                            id="-node-selector-terms-input-1"
-                            name="-node-selector-terms-input-1"
-                            aria-labelledby="-node-selector-terms -node-selector-terms-title"
+                            id="form-demo-sections-complex-form-node-selector-terms-input-1"
+                            name="form-demo-sections-complex-form-node-selector-terms-input-1"
+                            aria-labelledby="form-demo-sections-complex-form-node-selector-terms form-demo-sections-complex-form-node-selector-terms-title"
                           />
                         </span>
                       </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.3.0-prerelease.76",
+  "version": "6.3.0-prerelease.78",
   "keywords": [],
   "license": "MIT",
   "engines": {