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

package/css/components/TextInputGroup/text-input-group.css

@@ -1,32 +1,31 @@
-:where(:root),
-:where(.pf-v6-c-text-input-group) {
+:where(:root, .pf-v6-c-text-input-group) {
   --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
-  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-text-input-group--c-chip-group__main--PaddingTop: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-text-input-group--c-chip-group__main--PaddingRight: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-text-input-group--c-chip-group__main--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-text-input-group__text-input--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-text-input-group__text-input--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-text-input-group__text-input--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-text-input-group__text-input--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
   --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
   --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
   --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
   --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
-  --pf-v6-c-text-input-group__icon--Left: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-text-input-group__icon--TranslateY: -50%;
-  --pf-v6-c-text-input-group__utilities--child--MarginLeft: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
 }
@@ -71,15 +70,15 @@
   min-width: 0;
 }
 .pf-v6-c-text-input-group__main.pf-m-icon {
-  --pf-v6-c-text-input-group__text-input--PaddingLeft: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingLeft);
+  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
 }
 .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
-  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
 }
-.pf-v6-c-text-input-group__main .pf-v6-c-chip-group__main {
-  padding-block-start: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingTop);
-  padding-block-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBottom);
-  padding-inline-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingRight);
+.pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
+  padding-block-start: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd);
+  padding-inline-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd);
 }
 
 .pf-v6-c-text-input-group__text {
@@ -98,7 +97,7 @@
 .pf-v6-c-text-input-group__icon {
   position: absolute;
   inset-block-start: 50%;
-  inset-inline-start: var(--pf-v6-c-text-input-group__icon--Left);
+  inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
   color: var(--pf-v6-c-text-input-group__icon--Color);
   transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
 }
@@ -110,10 +109,10 @@
   position: relative;
   width: 100%;
   min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
-  padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingTop);
-  padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingRight);
+  padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
   background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
   border: 0;
   outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
@@ -131,11 +130,11 @@
 .pf-v6-c-text-input-group__utilities {
   display: flex;
   align-items: center;
-  margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginLeft);
-  margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginRight);
+  margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
+  margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
 }
 .pf-v6-c-text-input-group__utilities > * + * {
-  margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
 }
 
 .pf-v6-c-text-input-group__group {

package/css/components/TextInputGroup/text-input-group.d.ts

@@ -1,6 +1,6 @@
 import './text-input-group.css';
 declare const _default: {
-  "chipGroupMain": "pf-v6-c-chip-group__main",
+  "labelGroupMain": "pf-v6-c-label-group__main",
   "modifiers": {
     "disabled": "pf-m-disabled",
     "plain": "pf-m-plain",

package/css/components/TextInputGroup/text-input-group.js

@@ -2,7 +2,7 @@
 exports.__esModule = true;
 require('./text-input-group.css');
 exports.default = {
-  "chipGroupMain": "pf-v6-c-chip-group__main",
+  "labelGroupMain": "pf-v6-c-label-group__main",
   "modifiers": {
     "disabled": "pf-m-disabled",
     "plain": "pf-m-plain",

package/css/components/TextInputGroup/text-input-group.mjs

@@ -1,6 +1,6 @@
 import './text-input-group.css';
 export default {
-  "chipGroupMain": "pf-v6-c-chip-group__main",
+  "labelGroupMain": "pf-v6-c-label-group__main",
   "modifiers": {
     "disabled": "pf-m-disabled",
     "plain": "pf-m-plain",

package/css/components/Tile/tile.css

@@ -1,16 +1,15 @@
-:where(:root),
-:where(.pf-v6-c-tile) {
-  --pf-v6-c-tile--PaddingTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-tile--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-tile--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-tile--PaddingLeft: var(--pf-t--global--spacer--lg);
+:where(:root, .pf-v6-c-tile) {
+  --pf-v6-c-tile--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tile--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tile--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tile--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tile--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-tile--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-tile--before--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-tile--before--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-tile--before--BorderRadius: var(--pf-v6-c-tile--BorderRadius);
   --pf-v6-c-tile--after--BackgroundColor: transparent;
-  --pf-v6-c-tile__icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-tile__icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tile__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
   --pf-v6-c-tile__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-tile__title--Color: var(--pf-t--global--text--color--regular);
@@ -24,7 +23,7 @@
   --pf-v6-c-tile--m-disabled__title--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-tile--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
   --pf-v6-c-tile--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled);
-  --pf-v6-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-t--global--spacer--md);
+  --pf-v6-c-tile__header--m-stacked__icon--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-tile__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--xl);
   --pf-v6-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--2xl);
 }
@@ -33,10 +32,10 @@
   position: relative;
   display: inline-grid;
   grid-template-rows: min-content;
-  padding-block-start: var(--pf-v6-c-tile--PaddingTop);
-  padding-block-end: var(--pf-v6-c-tile--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-tile--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-tile--PaddingRight);
+  padding-block-start: var(--pf-v6-c-tile--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-tile--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-tile--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-tile--PaddingInlineEnd);
   cursor: pointer;
   background-color: var(--pf-v6-c-tile--BackgroundColor);
   border-radius: var(--pf-v6-c-tile--BorderRadius);
@@ -75,7 +74,7 @@
   align-items: center;
 }
 .pf-v6-c-tile__header.pf-m-stacked {
-  --pf-v6-c-tile__icon--MarginRight: 0;
+  --pf-v6-c-tile__icon--MarginInlineEnd: 0;
   --pf-v6-c-tile__icon--FontSize: var(--pf-v6-c-tile__header--m-stacked__icon--FontSize);
   flex-direction: column;
   align-items: flex-start;
@@ -83,7 +82,7 @@
 .pf-v6-c-tile__header.pf-m-stacked .pf-v6-c-tile__icon {
   display: flex;
   align-items: center;
-  margin-block-end: var(--pf-v6-c-tile__header--m-stacked__icon--MarginBottom);
+  margin-block-end: var(--pf-v6-c-tile__header--m-stacked__icon--MarginBlockEnd);
 }
 
 .pf-v6-c-tile__title {
@@ -97,7 +96,7 @@
 }
 
 .pf-v6-c-tile__icon {
-  margin-inline-end: var(--pf-v6-c-tile__icon--MarginRight);
+  margin-inline-end: var(--pf-v6-c-tile__icon--MarginInlineEnd);
   font-size: var(--pf-v6-c-tile__icon--FontSize);
   color: var(--pf-v6-c-tile__icon--Color);
 }

package/css/components/Timestamp/timestamp.css

@@ -1,4 +1,4 @@
-:root, .pf-v6-c-timestamp {
+:where(:root, .pf-v6-c-timestamp) {
   --pf-v6-c-timestamp--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-timestamp--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-timestamp--OutlineOffset: 0.1875rem;

package/css/components/Title/title.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root, .pf-v6-c-title) {
   --pf-v6-c-title--FontFamily: var(--pf-t--global--font--family--heading);
   --pf-v6-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);

package/css/components/ToggleGroup/toggle-group.css

@@ -1,9 +1,8 @@
-:where(:root),
-:where(.pf-v6-c-toggle-group) {
-  --pf-v6-c-toggle-group__button--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toggle-group__button--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-toggle-group__button--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toggle-group__button--PaddingLeft: var(--pf-t--global--spacer--md);
+:where(:root, .pf-v6-c-toggle-group) {
+  --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-toggle-group__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
@@ -14,12 +13,12 @@
   --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
   --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--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
-  --pf-v6-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v6-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v6-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v6-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v6-c-toggle-group__icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
+  --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v6-c-toggle-group__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --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);
@@ -30,10 +29,10 @@
   --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--ZIndex: var(--pf-t--global--z-index--xs);
-  --pf-v6-c-toggle-group--m-compact__button--PaddingTop: 0;
-  --pf-v6-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toggle-group--m-compact__button--PaddingBottom: 0;
-  --pf-v6-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --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);
+  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: 0;
+  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
 }
 
@@ -41,33 +40,33 @@
   display: flex;
 }
 .pf-v6-c-toggle-group.pf-m-compact {
-  --pf-v6-c-toggle-group__button--PaddingTop: var(--pf-v6-c-toggle-group--m-compact__button--PaddingTop);
-  --pf-v6-c-toggle-group__button--PaddingRight: var(--pf-v6-c-toggle-group--m-compact__button--PaddingRight);
-  --pf-v6-c-toggle-group__button--PaddingBottom: var(--pf-v6-c-toggle-group--m-compact__button--PaddingBottom);
-  --pf-v6-c-toggle-group__button--PaddingLeft: var(--pf-v6-c-toggle-group--m-compact__button--PaddingLeft);
+  --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart);
+  --pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd);
+  --pf-v6-c-toggle-group__button--PaddingBlockEnd: var(--pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd);
+  --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
   --pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
 }
 
 .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
-  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginLeft);
+  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 {
-  border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderTopLeftRadius);
-  border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderBottomLeftRadius);
+  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 {
-  border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderTopRightRadius);
-  border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderBottomRightRadius);
+  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);
 }
 
 .pf-v6-c-toggle-group__button {
   position: relative;
   z-index: var(--pf-v6-c-toggle-group__button--ZIndex);
   display: inline-flex;
-  padding-block-start: var(--pf-v6-c-toggle-group__button--PaddingTop);
-  padding-block-end: var(--pf-v6-c-toggle-group__button--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-toggle-group__button--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-toggle-group__button--PaddingRight);
+  padding-block-start: var(--pf-v6-c-toggle-group__button--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-toggle-group__button--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-toggle-group__button--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-toggle-group__button--PaddingInlineEnd);
   font-size: var(--pf-v6-c-toggle-group__button--FontSize);
   line-height: var(--pf-v6-c-toggle-group__button--LineHeight);
   color: var(--pf-v6-c-toggle-group__button--Color);
@@ -119,5 +118,5 @@
 
 .pf-v6-c-toggle-group__icon + .pf-v6-c-toggle-group__text,
 .pf-v6-c-toggle-group__text + .pf-v6-c-toggle-group__icon {
-  margin-inline-start: var(--pf-v6-c-toggle-group__icon--text--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-toggle-group__icon--text--MarginInlineStart);
 }

package/css/components/Toolbar/toolbar.css

@@ -1,121 +1,135 @@
+:where(:root, .pf-v6-c-toolbar) {
+  --pf-v6-c-toolbar--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toolbar--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-toolbar--PaddingBlock: var(--pf-t--global--spacer--md);
+  --pf-v6-c-toolbar--PaddingInline: var(--pf-t--global--spacer--md);
+  --pf-v6-c-toolbar--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v6-c-toolbar--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-toolbar--BackgroundColor: transparent;
+  --pf-v6-c-toolbar--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-toolbar--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-toolbar--m-no-background--BackgroundColor: transparent;
+  --pf-v6-c-toolbar__item--Width: auto;
+  --pf-v6-c-toolbar__item--MinWidth: auto;
+  --pf-v6-c-toolbar__item--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toolbar__item--m-overflow-container--MinWidth: 0;
+  --pf-v6-c-toolbar__group--m-overflow-container--MinWidth: 0;
+  --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-t--global--spacer--md);
+  --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-toolbar--PaddingInline);
+  --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
+  --pf-v6-c-toolbar__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
+  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
+  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
+  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-toolbar--m-page-insets--inset: var(--pf-v6-c-page--inset);
+  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
+  --pf-v6-c-toolbar__expand-all-icon--Transition: var(--pf-t--global--transition);
+  --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
+  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
+}
+
 .pf-v6-c-toolbar__content-section,
 .pf-v6-c-toolbar__group,
 .pf-v6-c-toolbar__item,
-.pf-v6-c-toolbar__group.pf-m-chip-group-container,
-.pf-v6-c-toolbar__group.pf-m-chip-group {
+.pf-v6-c-toolbar__group.pf-m-label-group-container,
+.pf-v6-c-toolbar__group.pf-m-label-group {
+  --pf-v6-hidden-visible--visible--Display: flex;
   --pf-v6-hidden-visible--hidden--Display: none;
   --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   display: var(--pf-v6-hidden-visible--Display);
+  flex-wrap: wrap;
 }
-.pf-m-hidden.pf-v6-c-toolbar__content-section,
-.pf-m-hidden.pf-v6-c-toolbar__group,
-.pf-m-hidden.pf-v6-c-toolbar__item {
+.pf-v6-c-toolbar__content-section.pf-m-hidden,
+.pf-v6-c-toolbar__group.pf-m-hidden,
+.pf-v6-c-toolbar__item.pf-m-hidden,
+.pf-v6-c-toolbar__group.pf-m-label-group-container.pf-m-hidden,
+.pf-v6-c-toolbar__group.pf-m-label-group.pf-m-hidden {
   --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
 }
 @media screen and (min-width: 576px) {
-  .pf-m-hidden-on-sm.pf-v6-c-toolbar__content-section,
-  .pf-m-hidden-on-sm.pf-v6-c-toolbar__group,
-  .pf-m-hidden-on-sm.pf-v6-c-toolbar__item {
+  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm,
+  .pf-v6-c-toolbar__group.pf-m-hidden-on-sm,
+  .pf-v6-c-toolbar__item.pf-m-hidden-on-sm,
+  .pf-v6-c-toolbar__group.pf-m-label-group-container.pf-m-hidden-on-sm,
+  .pf-v6-c-toolbar__group.pf-m-label-group.pf-m-hidden-on-sm {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
-  .pf-m-visible-on-sm.pf-v6-c-toolbar__content-section,
-  .pf-m-visible-on-sm.pf-v6-c-toolbar__group,
-  .pf-m-visible-on-sm.pf-v6-c-toolbar__item {
+  .pf-v6-c-toolbar__content-section.pf-m-visible-on-sm,
+  .pf-v6-c-toolbar__group.pf-m-visible-on-sm,
+  .pf-v6-c-toolbar__item.pf-m-visible-on-sm,
+  .pf-v6-c-toolbar__group.pf-m-label-group-container.pf-m-visible-on-sm,
+  .pf-v6-c-toolbar__group.pf-m-label-group.pf-m-visible-on-sm {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 768px) {
-  .pf-m-hidden-on-md.pf-v6-c-toolbar__content-section,
-  .pf-m-hidden-on-md.pf-v6-c-toolbar__group,
-  .pf-m-hidden-on-md.pf-v6-c-toolbar__item {
+  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-md,
+  .pf-v6-c-toolbar__group.pf-m-hidden-on-md,
+  .pf-v6-c-toolbar__item.pf-m-hidden-on-md,
+  .pf-v6-c-toolbar__group.pf-m-label-group-container.pf-m-hidden-on-md,
+  .pf-v6-c-toolbar__group.pf-m-label-group.pf-m-hidden-on-md {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
-  .pf-m-visible-on-md.pf-v6-c-toolbar__content-section,
-  .pf-m-visible-on-md.pf-v6-c-toolbar__group,
-  .pf-m-visible-on-md.pf-v6-c-toolbar__item {
+  .pf-v6-c-toolbar__content-section.pf-m-visible-on-md,
+  .pf-v6-c-toolbar__group.pf-m-visible-on-md,
+  .pf-v6-c-toolbar__item.pf-m-visible-on-md,
+  .pf-v6-c-toolbar__group.pf-m-label-group-container.pf-m-visible-on-md,
+  .pf-v6-c-toolbar__group.pf-m-label-group.pf-m-visible-on-md {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 992px) {
-  .pf-m-hidden-on-lg.pf-v6-c-toolbar__content-section,
-  .pf-m-hidden-on-lg.pf-v6-c-toolbar__group,
-  .pf-m-hidden-on-lg.pf-v6-c-toolbar__item {
+  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-lg,
+  .pf-v6-c-toolbar__group.pf-m-hidden-on-lg,
+  .pf-v6-c-toolbar__item.pf-m-hidden-on-lg,
+  .pf-v6-c-toolbar__group.pf-m-label-group-container.pf-m-hidden-on-lg,
+  .pf-v6-c-toolbar__group.pf-m-label-group.pf-m-hidden-on-lg {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
-  .pf-m-visible-on-lg.pf-v6-c-toolbar__content-section,
-  .pf-m-visible-on-lg.pf-v6-c-toolbar__group,
-  .pf-m-visible-on-lg.pf-v6-c-toolbar__item {
+  .pf-v6-c-toolbar__content-section.pf-m-visible-on-lg,
+  .pf-v6-c-toolbar__group.pf-m-visible-on-lg,
+  .pf-v6-c-toolbar__item.pf-m-visible-on-lg,
+  .pf-v6-c-toolbar__group.pf-m-label-group-container.pf-m-visible-on-lg,
+  .pf-v6-c-toolbar__group.pf-m-label-group.pf-m-visible-on-lg {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-m-hidden-on-xl.pf-v6-c-toolbar__content-section,
-  .pf-m-hidden-on-xl.pf-v6-c-toolbar__group,
-  .pf-m-hidden-on-xl.pf-v6-c-toolbar__item {
+  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-xl,
+  .pf-v6-c-toolbar__group.pf-m-hidden-on-xl,
+  .pf-v6-c-toolbar__item.pf-m-hidden-on-xl,
+  .pf-v6-c-toolbar__group.pf-m-label-group-container.pf-m-hidden-on-xl,
+  .pf-v6-c-toolbar__group.pf-m-label-group.pf-m-hidden-on-xl {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
-  .pf-m-visible-on-xl.pf-v6-c-toolbar__content-section,
-  .pf-m-visible-on-xl.pf-v6-c-toolbar__group,
-  .pf-m-visible-on-xl.pf-v6-c-toolbar__item {
+  .pf-v6-c-toolbar__content-section.pf-m-visible-on-xl,
+  .pf-v6-c-toolbar__group.pf-m-visible-on-xl,
+  .pf-v6-c-toolbar__item.pf-m-visible-on-xl,
+  .pf-v6-c-toolbar__group.pf-m-label-group-container.pf-m-visible-on-xl,
+  .pf-v6-c-toolbar__group.pf-m-label-group.pf-m-visible-on-xl {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 1450px) {
-  .pf-m-hidden-on-2xl.pf-v6-c-toolbar__content-section,
-  .pf-m-hidden-on-2xl.pf-v6-c-toolbar__group,
-  .pf-m-hidden-on-2xl.pf-v6-c-toolbar__item {
+  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-2xl,
+  .pf-v6-c-toolbar__group.pf-m-hidden-on-2xl,
+  .pf-v6-c-toolbar__item.pf-m-hidden-on-2xl,
+  .pf-v6-c-toolbar__group.pf-m-label-group-container.pf-m-hidden-on-2xl,
+  .pf-v6-c-toolbar__group.pf-m-label-group.pf-m-hidden-on-2xl {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
-  .pf-m-visible-on-2xl.pf-v6-c-toolbar__content-section,
-  .pf-m-visible-on-2xl.pf-v6-c-toolbar__group,
-  .pf-m-visible-on-2xl.pf-v6-c-toolbar__item {
+  .pf-v6-c-toolbar__content-section.pf-m-visible-on-2xl,
+  .pf-v6-c-toolbar__group.pf-m-visible-on-2xl,
+  .pf-v6-c-toolbar__item.pf-m-visible-on-2xl,
+  .pf-v6-c-toolbar__group.pf-m-label-group-container.pf-m-visible-on-2xl,
+  .pf-v6-c-toolbar__group.pf-m-label-group.pf-m-visible-on-2xl {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 
-:where(:root),
-:where(.pf-v6-c-toolbar) {
-  --pf-v6-c-toolbar--RowGap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toolbar--ColumnGap: var(--pf-t--global--spacer--md);
-  --pf-v6-c-toolbar--PaddingBlock: var(--pf-t--global--spacer--md);
-  --pf-v6-c-toolbar--PaddingInline: var(--pf-t--global--spacer--md);
-  --pf-v6-c-toolbar--LineHeight: var(--pf-t--global--font--line-height--body);
-  --pf-v6-c-toolbar--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-toolbar--BackgroundColor: transparent;
-  --pf-v6-c-toolbar--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-toolbar--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-toolbar--m-no-background--BackgroundColor: transparent;
-  --pf-v6-c-toolbar__item--Width: auto;
-  --pf-v6-c-toolbar__item--MinWidth: auto;
-  --pf-v6-c-toolbar__item--ColumnGap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toolbar__item--m-overflow-container--MinWidth: 0;
-  --pf-v6-c-toolbar__group--m-overflow-container--MinWidth: 0;
-  --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-t--global--spacer--md);
-  --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-toolbar--PaddingInline);
-  --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
-  --pf-v6-c-toolbar__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
-  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
-  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
-  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-toolbar--m-page-insets--inset: var(--pf-v6-c-page--inset);
-  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
-  --pf-v6-c-toolbar__expand-all-icon--Transition: var(--pf-t--global--transition);
-  --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
-  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
-}
-
-.pf-v6-c-toolbar__content-section,
-.pf-v6-c-toolbar__group,
-.pf-v6-c-toolbar__item,
-.pf-v6-c-toolbar__group.pf-m-chip-group-container,
-.pf-v6-c-toolbar__group.pf-m-chip-group {
-  --pf-v6-hidden-visible--visible--Display: flex;
-  flex-wrap: wrap;
-}
-
 .pf-v6-c-toolbar,
 .pf-v6-c-toolbar__content {
   position: relative;
@@ -275,10 +289,10 @@
 .pf-v6-c-toolbar__group.pf-m-filter-group {
   column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
 }
-.pf-v6-c-toolbar__group.pf-m-filter-group, .pf-v6-c-toolbar__group.pf-m-chip-group-container {
+.pf-v6-c-toolbar__group.pf-m-filter-group, .pf-v6-c-toolbar__group.pf-m-label-group-container {
   flex-wrap: nowrap;
 }
-.pf-v6-c-toolbar__group.pf-m-chip-group {
+.pf-v6-c-toolbar__group.pf-m-label-group {
   flex: 1;
 }
 .pf-v6-c-toolbar__group.pf-m-overflow-container {

package/css/components/Toolbar/toolbar.d.ts

@@ -2,8 +2,8 @@ import './toolbar.css';
 declare const _default: {
   "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
-    "chipGroupContainer": "pf-m-chip-group-container",
-    "chipGroup": "pf-m-chip-group",
+    "labelGroupContainer": "pf-m-label-group-container",
+    "labelGroup": "pf-m-label-group",
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
     "visibleOnSm": "pf-m-visible-on-sm",

package/css/components/Toolbar/toolbar.js

@@ -4,8 +4,8 @@ require('./toolbar.css');
 exports.default = {
   "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
-    "chipGroupContainer": "pf-m-chip-group-container",
-    "chipGroup": "pf-m-chip-group",
+    "labelGroupContainer": "pf-m-label-group-container",
+    "labelGroup": "pf-m-label-group",
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
     "visibleOnSm": "pf-m-visible-on-sm",

package/css/components/Toolbar/toolbar.mjs

@@ -2,8 +2,8 @@ import './toolbar.css';
 export default {
   "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
-    "chipGroupContainer": "pf-m-chip-group-container",
-    "chipGroup": "pf-m-chip-group",
+    "labelGroupContainer": "pf-m-label-group-container",
+    "labelGroup": "pf-m-label-group",
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
     "visibleOnSm": "pf-m-visible-on-sm",