@patternfly/patternfly 6.3.0-prerelease.77 → 6.3.0-prerelease.79

package/docs/components/CodeEditor/examples/CodeEditor.md

@@ -121,7 +121,6 @@ cssPrefix: pf-v6-c-code-editor
 ```html
 <div class="pf-v6-c-code-editor">
   <div class="pf-v6-c-code-editor__header">
-    <div class="pf-v6-c-code-editor__header-main"></div>
     <div class="pf-v6-c-code-editor__tab">
       <span class="pf-v6-c-code-editor__tab-icon">
         <i class="fas fa-code" aria-hidden="true"></i>
@@ -166,12 +165,27 @@ cssPrefix: pf-v6-c-code-editor
 
 ```
 
+### Without language tab
+
+```html
+<div class="pf-v6-c-code-editor">
+  <div class="pf-v6-c-code-editor__header"></div>
+  <div class="pf-v6-c-code-editor__main">
+    <div dir="ltr" class="pf-v6-c-code-editor__code">
+      <pre class="pf-v6-c-code-editor__code-pre">
+                code goes here
+      </pre>
+    </div>
+  </div>
+</div>
+
+```
+
 ### Drag file and hover over component
 
 ```html
 <div class="pf-v6-c-code-editor">
   <div class="pf-v6-c-code-editor__header">
-    <div class="pf-v6-c-code-editor__header-main"></div>
     <div class="pf-v6-c-code-editor__tab">
       <span class="pf-v6-c-code-editor__tab-icon">
         <i class="fas fa-code" aria-hidden="true"></i>
@@ -457,7 +471,7 @@ This is an extra container used in React to prevent event propagation if upload
 | Class                                      | Applied to | Outcome                                                                                       |
 | ------------------------------------------ | ---------- | --------------------------------------------------------------------------------------------- |
 | `.pf-v6-c-code-editor`                     | `<div>`    | Initiates the code editor component. **Required**                                             |
-| `.pf-v6-c-code-editor__header`             | `<div>`    | Initiates the code editor header used for the controls and tab elements. **Required**         |
+| `.pf-v6-c-code-editor__header`             | `<div>`    | Initiates the code editor header used for the controls and tab elements. |
 | `.pf-v6-c-code-editor__header-content`     | `<div>`    | Initiates the code editor header content used for the controls and tab elements. **Required** |
 | `.pf-v6-c-code-editor__main`               | `<div>`    | Initiates the main container for a code editor e.g. Monaco **Required**                       |
 | `.pf-v6-c-code-editor__code`               | `<div>`    | Initiates the container for code without a JS code editor. Comes with PatternFly styling.     |

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.77",
+  "version": "6.3.0-prerelease.79",
   "keywords": [],
   "license": "MIT",
   "engines": {
@@ -114,5 +114,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "packageManager": "yarn@4.9.3"
+  "packageManager": "yarn@4.10.3"
 }

package/patternfly-no-globals.css

@@ -11951,6 +11951,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-code-editor__header-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-code-editor__header-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-code-editor--m-read-only__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
   --pf-v6-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-code-editor__tab--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-code-editor__tab--PaddingInlineEnd: var( --pf-t--global--spacer--sm);
@@ -11970,6 +11971,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   flex-direction: column;
 }
 .pf-v6-c-code-editor.pf-m-read-only {
+  --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__tab--BackgroundColor);
   --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
 }
 .pf-v6-c-code-editor.pf-m-full-height {
@@ -11986,17 +11988,29 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   position: relative;
   display: flex;
 }
-.pf-v6-c-code-editor__header::before {
+.pf-v6-c-code-editor__header::before, .pf-v6-c-code-editor__header::after {
+  position: absolute;
+  pointer-events: none;
+  content: "";
+}
+.pf-v6-c-code-editor__header::after {
   position: absolute;
   inset: 0;
   pointer-events: none;
   content: "";
   border: var(--pf-v6-c-code-editor__header--BorderWidth) solid var(--pf-v6-c-code-editor__header--BorderColor);
-  border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
+  border-block-end-width: 0;
   border-start-start-radius: var(--pf-v6-c-code-editor__header--BorderStartStartRadius);
   border-start-end-radius: var(--pf-v6-c-code-editor__header--BorderStartEndRadius);
 }
+.pf-v6-c-code-editor__header::before {
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
+}
 .pf-v6-c-code-editor__header.pf-m-plain {
+  --pf-v6-c-code-editor__header--BorderWidth: 0;
   --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor);
 }
 
@@ -12093,6 +12107,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   padding-block-end: var(--pf-v6-c-code-editor__tab--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-code-editor__tab--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-code-editor__tab--PaddingInlineEnd);
+  margin-inline-start: auto;
   color: var(--pf-v6-c-code-editor__tab--Color);
   background-color: var(--pf-v6-c-code-editor__tab--BackgroundColor);
   border-color: var(--pf-v6-c-code-editor__tab--BorderColor);
@@ -16434,12 +16449,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);
 }
@@ -17404,7 +17413,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);
@@ -17545,10 +17554,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);
@@ -22297,12 +22306,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);
@@ -22611,7 +22620,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);
@@ -29529,6 +29538,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));
@@ -29540,12 +29550,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);
@@ -29568,11 +29579,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);
 }
@@ -29591,25 +29602,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 {
@@ -29617,6 +29634,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);