@patternfly/react-styles 6.0.0-alpha.9 → 6.0.0-prerelease.1

package/css/components/DataList/data-list.d.ts

@@ -1,34 +1,23 @@
 import './data-list.css';
 declare const _default: {
-  "dataList": "pf-v5-c-data-list",
-  "dataListAction": "pf-v5-c-data-list__action",
-  "dataListCell": "pf-v5-c-data-list__cell",
-  "dataListCheck": "pf-v5-c-data-list__check",
-  "dataListExpandableContent": "pf-v5-c-data-list__expandable-content",
-  "dataListExpandableContentBody": "pf-v5-c-data-list__expandable-content-body",
-  "dataListItem": "pf-v5-c-data-list__item",
-  "dataListItemAction": "pf-v5-c-data-list__item-action",
-  "dataListItemContent": "pf-v5-c-data-list__item-content",
-  "dataListItemControl": "pf-v5-c-data-list__item-control",
-  "dataListItemDraggableButton": "pf-v5-c-data-list__item-draggable-button",
-  "dataListItemDraggableIcon": "pf-v5-c-data-list__item-draggable-icon",
-  "dataListItemRow": "pf-v5-c-data-list__item-row",
-  "dataListText": "pf-v5-c-data-list__text",
-  "dataListToggle": "pf-v5-c-data-list__toggle",
-  "dataListToggleIcon": "pf-v5-c-data-list__toggle-icon",
-  "dirRtl": "pf-v5-m-dir-rtl",
+  "dataList": "pf-v6-c-data-list",
+  "dataListAction": "pf-v6-c-data-list__action",
+  "dataListCell": "pf-v6-c-data-list__cell",
+  "dataListCheck": "pf-v6-c-data-list__check",
+  "dataListExpandableContent": "pf-v6-c-data-list__expandable-content",
+  "dataListExpandableContentBody": "pf-v6-c-data-list__expandable-content-body",
+  "dataListItem": "pf-v6-c-data-list__item",
+  "dataListItemAction": "pf-v6-c-data-list__item-action",
+  "dataListItemContent": "pf-v6-c-data-list__item-content",
+  "dataListItemControl": "pf-v6-c-data-list__item-control",
+  "dataListItemDraggableButton": "pf-v6-c-data-list__item-draggable-button",
+  "dataListItemDraggableIcon": "pf-v6-c-data-list__item-draggable-icon",
+  "dataListItemRow": "pf-v6-c-data-list__item-row",
+  "dataListText": "pf-v6-c-data-list__text",
+  "dataListToggle": "pf-v6-c-data-list__toggle",
+  "dataListToggleIcon": "pf-v6-c-data-list__toggle-icon",
+  "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
-    "hidden": "pf-m-hidden",
-    "hiddenOnSm": "pf-m-hidden-on-sm",
-    "visibleOnSm": "pf-m-visible-on-sm",
-    "hiddenOnMd": "pf-m-hidden-on-md",
-    "visibleOnMd": "pf-m-visible-on-md",
-    "hiddenOnLg": "pf-m-hidden-on-lg",
-    "visibleOnLg": "pf-m-visible-on-lg",
-    "hiddenOnXl": "pf-m-hidden-on-xl",
-    "visibleOnXl": "pf-m-visible-on-xl",
-    "hiddenOn_2xl": "pf-m-hidden-on-2xl",
-    "visibleOn_2xl": "pf-m-visible-on-2xl",
     "icon": "pf-m-icon",
     "alignRight": "pf-m-align-right",
     "noFill": "pf-m-no-fill",
@@ -52,6 +41,17 @@ declare const _default: {
     "ghostRow": "pf-m-ghost-row",
     "expanded": "pf-m-expanded",
     "disabled": "pf-m-disabled",
+    "hidden": "pf-m-hidden",
+    "hiddenOnSm": "pf-m-hidden-on-sm",
+    "visibleOnSm": "pf-m-visible-on-sm",
+    "hiddenOnMd": "pf-m-hidden-on-md",
+    "visibleOnMd": "pf-m-visible-on-md",
+    "hiddenOnLg": "pf-m-hidden-on-lg",
+    "visibleOnLg": "pf-m-visible-on-lg",
+    "hiddenOnXl": "pf-m-hidden-on-xl",
+    "visibleOnXl": "pf-m-visible-on-xl",
+    "hiddenOn_2xl": "pf-m-hidden-on-2xl",
+    "visibleOn_2xl": "pf-m-visible-on-2xl",
     "noPadding": "pf-m-no-padding"
   }
 };

package/css/components/DataList/data-list.js

@@ -2,35 +2,24 @@
 exports.__esModule = true;
 require('./data-list.css');
 exports.default = {
-  "dataList": "pf-v5-c-data-list",
-  "dataListAction": "pf-v5-c-data-list__action",
-  "dataListCell": "pf-v5-c-data-list__cell",
-  "dataListCheck": "pf-v5-c-data-list__check",
-  "dataListExpandableContent": "pf-v5-c-data-list__expandable-content",
-  "dataListExpandableContentBody": "pf-v5-c-data-list__expandable-content-body",
-  "dataListItem": "pf-v5-c-data-list__item",
-  "dataListItemAction": "pf-v5-c-data-list__item-action",
-  "dataListItemContent": "pf-v5-c-data-list__item-content",
-  "dataListItemControl": "pf-v5-c-data-list__item-control",
-  "dataListItemDraggableButton": "pf-v5-c-data-list__item-draggable-button",
-  "dataListItemDraggableIcon": "pf-v5-c-data-list__item-draggable-icon",
-  "dataListItemRow": "pf-v5-c-data-list__item-row",
-  "dataListText": "pf-v5-c-data-list__text",
-  "dataListToggle": "pf-v5-c-data-list__toggle",
-  "dataListToggleIcon": "pf-v5-c-data-list__toggle-icon",
-  "dirRtl": "pf-v5-m-dir-rtl",
+  "dataList": "pf-v6-c-data-list",
+  "dataListAction": "pf-v6-c-data-list__action",
+  "dataListCell": "pf-v6-c-data-list__cell",
+  "dataListCheck": "pf-v6-c-data-list__check",
+  "dataListExpandableContent": "pf-v6-c-data-list__expandable-content",
+  "dataListExpandableContentBody": "pf-v6-c-data-list__expandable-content-body",
+  "dataListItem": "pf-v6-c-data-list__item",
+  "dataListItemAction": "pf-v6-c-data-list__item-action",
+  "dataListItemContent": "pf-v6-c-data-list__item-content",
+  "dataListItemControl": "pf-v6-c-data-list__item-control",
+  "dataListItemDraggableButton": "pf-v6-c-data-list__item-draggable-button",
+  "dataListItemDraggableIcon": "pf-v6-c-data-list__item-draggable-icon",
+  "dataListItemRow": "pf-v6-c-data-list__item-row",
+  "dataListText": "pf-v6-c-data-list__text",
+  "dataListToggle": "pf-v6-c-data-list__toggle",
+  "dataListToggleIcon": "pf-v6-c-data-list__toggle-icon",
+  "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
-    "hidden": "pf-m-hidden",
-    "hiddenOnSm": "pf-m-hidden-on-sm",
-    "visibleOnSm": "pf-m-visible-on-sm",
-    "hiddenOnMd": "pf-m-hidden-on-md",
-    "visibleOnMd": "pf-m-visible-on-md",
-    "hiddenOnLg": "pf-m-hidden-on-lg",
-    "visibleOnLg": "pf-m-visible-on-lg",
-    "hiddenOnXl": "pf-m-hidden-on-xl",
-    "visibleOnXl": "pf-m-visible-on-xl",
-    "hiddenOn_2xl": "pf-m-hidden-on-2xl",
-    "visibleOn_2xl": "pf-m-visible-on-2xl",
     "icon": "pf-m-icon",
     "alignRight": "pf-m-align-right",
     "noFill": "pf-m-no-fill",
@@ -54,6 +43,17 @@ exports.default = {
     "ghostRow": "pf-m-ghost-row",
     "expanded": "pf-m-expanded",
     "disabled": "pf-m-disabled",
+    "hidden": "pf-m-hidden",
+    "hiddenOnSm": "pf-m-hidden-on-sm",
+    "visibleOnSm": "pf-m-visible-on-sm",
+    "hiddenOnMd": "pf-m-hidden-on-md",
+    "visibleOnMd": "pf-m-visible-on-md",
+    "hiddenOnLg": "pf-m-hidden-on-lg",
+    "visibleOnLg": "pf-m-visible-on-lg",
+    "hiddenOnXl": "pf-m-hidden-on-xl",
+    "visibleOnXl": "pf-m-visible-on-xl",
+    "hiddenOn_2xl": "pf-m-hidden-on-2xl",
+    "visibleOn_2xl": "pf-m-visible-on-2xl",
     "noPadding": "pf-m-no-padding"
   }
 };

package/css/components/DataList/data-list.mjs

@@ -1,34 +1,23 @@
 import './data-list.css';
 export default {
-  "dataList": "pf-v5-c-data-list",
-  "dataListAction": "pf-v5-c-data-list__action",
-  "dataListCell": "pf-v5-c-data-list__cell",
-  "dataListCheck": "pf-v5-c-data-list__check",
-  "dataListExpandableContent": "pf-v5-c-data-list__expandable-content",
-  "dataListExpandableContentBody": "pf-v5-c-data-list__expandable-content-body",
-  "dataListItem": "pf-v5-c-data-list__item",
-  "dataListItemAction": "pf-v5-c-data-list__item-action",
-  "dataListItemContent": "pf-v5-c-data-list__item-content",
-  "dataListItemControl": "pf-v5-c-data-list__item-control",
-  "dataListItemDraggableButton": "pf-v5-c-data-list__item-draggable-button",
-  "dataListItemDraggableIcon": "pf-v5-c-data-list__item-draggable-icon",
-  "dataListItemRow": "pf-v5-c-data-list__item-row",
-  "dataListText": "pf-v5-c-data-list__text",
-  "dataListToggle": "pf-v5-c-data-list__toggle",
-  "dataListToggleIcon": "pf-v5-c-data-list__toggle-icon",
-  "dirRtl": "pf-v5-m-dir-rtl",
+  "dataList": "pf-v6-c-data-list",
+  "dataListAction": "pf-v6-c-data-list__action",
+  "dataListCell": "pf-v6-c-data-list__cell",
+  "dataListCheck": "pf-v6-c-data-list__check",
+  "dataListExpandableContent": "pf-v6-c-data-list__expandable-content",
+  "dataListExpandableContentBody": "pf-v6-c-data-list__expandable-content-body",
+  "dataListItem": "pf-v6-c-data-list__item",
+  "dataListItemAction": "pf-v6-c-data-list__item-action",
+  "dataListItemContent": "pf-v6-c-data-list__item-content",
+  "dataListItemControl": "pf-v6-c-data-list__item-control",
+  "dataListItemDraggableButton": "pf-v6-c-data-list__item-draggable-button",
+  "dataListItemDraggableIcon": "pf-v6-c-data-list__item-draggable-icon",
+  "dataListItemRow": "pf-v6-c-data-list__item-row",
+  "dataListText": "pf-v6-c-data-list__text",
+  "dataListToggle": "pf-v6-c-data-list__toggle",
+  "dataListToggleIcon": "pf-v6-c-data-list__toggle-icon",
+  "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
-    "hidden": "pf-m-hidden",
-    "hiddenOnSm": "pf-m-hidden-on-sm",
-    "visibleOnSm": "pf-m-visible-on-sm",
-    "hiddenOnMd": "pf-m-hidden-on-md",
-    "visibleOnMd": "pf-m-visible-on-md",
-    "hiddenOnLg": "pf-m-hidden-on-lg",
-    "visibleOnLg": "pf-m-visible-on-lg",
-    "hiddenOnXl": "pf-m-hidden-on-xl",
-    "visibleOnXl": "pf-m-visible-on-xl",
-    "hiddenOn_2xl": "pf-m-hidden-on-2xl",
-    "visibleOn_2xl": "pf-m-visible-on-2xl",
     "icon": "pf-m-icon",
     "alignRight": "pf-m-align-right",
     "noFill": "pf-m-no-fill",
@@ -52,6 +41,17 @@ export default {
     "ghostRow": "pf-m-ghost-row",
     "expanded": "pf-m-expanded",
     "disabled": "pf-m-disabled",
+    "hidden": "pf-m-hidden",
+    "hiddenOnSm": "pf-m-hidden-on-sm",
+    "visibleOnSm": "pf-m-visible-on-sm",
+    "hiddenOnMd": "pf-m-hidden-on-md",
+    "visibleOnMd": "pf-m-visible-on-md",
+    "hiddenOnLg": "pf-m-hidden-on-lg",
+    "visibleOnLg": "pf-m-visible-on-lg",
+    "hiddenOnXl": "pf-m-hidden-on-xl",
+    "visibleOnXl": "pf-m-visible-on-xl",
+    "hiddenOn_2xl": "pf-m-hidden-on-2xl",
+    "visibleOn_2xl": "pf-m-visible-on-2xl",
     "noPadding": "pf-m-no-padding"
   }
 };

package/css/components/DatePicker/date-picker.css

@@ -1,49 +1,52 @@
-.pf-v5-c-date-picker {
-  --pf-v5-c-date-picker--m-top__calendar--Top: 0;
-  --pf-v5-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-v5-global--spacer--xs));
-  --pf-v5-c-date-picker__helper-text--MarginTop: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-date-picker__input--c-form-control--Width: calc(var(--pf-v5-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-v5-c-date-picker__input--c-form-control--width-base));
-  --pf-v5-c-date-picker__input--c-form-control--width-base: calc(var(--pf-v5-global--spacer--xl) + var(--pf-v5-global--spacer--sm));
-  --pf-v5-c-date-picker__input--c-form-control--width-chars: 10;
-  --pf-v5-c-date-picker__calendar--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-c-date-picker__calendar--BoxShadow: var(--pf-v5-global--BoxShadow--md);
-  --pf-v5-c-date-picker__calendar--ZIndex: var(--pf-v5-global--ZIndex--sm);
-  --pf-v5-c-date-picker__calendar--Top: calc(100% + var(--pf-v5-global--spacer--xs));
-  --pf-v5-c-date-picker__calendar--Right: auto;
-  --pf-v5-c-date-picker__calendar--Left: 0;
-  --pf-v5-c-date-picker__calendar--m-align-right--Right: 0;
-  --pf-v5-c-date-picker__calendar--m-align-right--Left: auto;
+:where(:root, .pf-v6-c-date-picker) {
+  --pf-v6-c-date-picker--m-top__calendar--InsetBlockStart: 0;
+  --pf-v6-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-t--global--spacer--xs));
+  --pf-v6-c-date-picker__helper-text--MarginBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-date-picker__input--c-form-control--Width: calc(var(--pf-v6-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-v6-c-date-picker__input--c-form-control--width-base));
+  --pf-v6-c-date-picker__input--c-form-control--width-base: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
+  --pf-v6-c-date-picker__input--c-form-control--width-chars: 11;
+  --pf-v6-c-date-picker__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v6-c-date-picker__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v6-c-date-picker__calendar--ZIndex: var(--pf-t--global--z-index--sm);
+  --pf-v6-c-date-picker__calendar--InsetBlockStart: calc(100% + var(--pf-t--global--spacer--xs));
+  --pf-v6-c-date-picker__calendar--InsetInlineEnd: auto;
+  --pf-v6-c-date-picker__calendar--InsetInlineStart: 0;
+  --pf-v6-c-date-picker__calendar--m-align-right--InsetInlineEnd: 0;
+  --pf-v6-c-date-picker__calendar--m-align-right--InsetInlineStart: auto;
+}
+
+.pf-v6-c-date-picker {
   position: relative;
   display: inline-block;
 }
 
-.pf-v5-c-date-picker__helper-text {
-  margin-block-start: var(--pf-v5-c-date-picker__helper-text--MarginTop);
+.pf-v6-c-date-picker__helper-text {
+  margin-block-start: var(--pf-v6-c-date-picker__helper-text--MarginBlockStart);
 }
 
-.pf-v5-c-date-picker__input .pf-v5-c-form-control {
-  width: var(--pf-v5-c-date-picker__input--c-form-control--Width);
+.pf-v6-c-date-picker__input .pf-v6-c-form-control {
+  width: var(--pf-v6-c-date-picker__input--c-form-control--Width);
 }
 
-.pf-v5-c-date-picker__calendar {
+.pf-v6-c-date-picker__calendar {
   position: absolute;
-  inset-block-start: var(--pf-v5-c-date-picker__calendar--Top);
-  inset-inline-start: var(--pf-v5-c-date-picker__calendar--Left);
-  inset-inline-end: var(--pf-v5-c-date-picker__calendar--Right);
-  z-index: var(--pf-v5-c-date-picker__calendar--ZIndex);
-  background-color: var(--pf-v5-c-date-picker__calendar--BackgroundColor);
-  box-shadow: var(--pf-v5-c-date-picker__calendar--BoxShadow);
+  inset-block-start: var(--pf-v6-c-date-picker__calendar--InsetBlockStart);
+  inset-inline-start: var(--pf-v6-c-date-picker__calendar--InsetInlineStart);
+  inset-inline-end: var(--pf-v6-c-date-picker__calendar--InsetInlineEnd);
+  z-index: var(--pf-v6-c-date-picker__calendar--ZIndex);
+  background-color: var(--pf-v6-c-date-picker__calendar--BackgroundColor);
+  box-shadow: var(--pf-v6-c-date-picker__calendar--BoxShadow);
 }
-.pf-v5-c-date-picker__calendar.pf-m-align-right {
-  --pf-v5-c-date-picker__calendar--Right: var(--pf-v5-c-date-picker__calendar--m-align-right--Right);
-  --pf-v5-c-date-picker__calendar--Left: var(--pf-v5-c-date-picker__calendar--m-align-right--Left);
+.pf-v6-c-date-picker__calendar.pf-m-align-right {
+  --pf-v6-c-date-picker__calendar--InsetInlineEnd: var(--pf-v6-c-date-picker__calendar--m-align-right--InsetInlineEnd);
+  --pf-v6-c-date-picker__calendar--InsetInlineStart: var(--pf-v6-c-date-picker__calendar--m-align-right--InsetInlineStart);
 }
-.pf-v5-c-date-picker.pf-m-top .pf-v5-c-date-picker__calendar {
-  --pf-v5-c-date-picker__calendar--Top: var(--pf-v5-c-date-picker--m-top__calendar--Top);
-  transform: translateY(var(--pf-v5-c-date-picker--m-top__calendar--TranslateY));
+.pf-v6-c-date-picker.pf-m-top .pf-v6-c-date-picker__calendar {
+  --pf-v6-c-date-picker__calendar--InsetBlockStart: var(--pf-v6-c-date-picker--m-top__calendar--InsetBlockStart);
+  transform: translateY(var(--pf-v6-c-date-picker--m-top__calendar--TranslateY));
 }
-.pf-v5-c-date-picker__calendar.pf-m-static {
-  --pf-v5-c-date-picker--m-top__calendar--TranslateY: 0;
+.pf-v6-c-date-picker__calendar.pf-m-static {
+  --pf-v6-c-date-picker--m-top__calendar--TranslateY: 0;
   position: static;
   inset-block-start: auto;
   inset-block-end: auto;
@@ -51,9 +54,4 @@
   inset-inline-end: auto;
   z-index: auto;
   min-width: min-content;
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-date-picker {
-  --pf-v5-c-date-picker__calendar--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-date-picker__calendar--Top: 100%;
 }

package/css/components/DatePicker/date-picker.d.ts

@@ -1,15 +1,14 @@
 import './date-picker.css';
 declare const _default: {
-  "datePicker": "pf-v5-c-date-picker",
-  "datePickerCalendar": "pf-v5-c-date-picker__calendar",
-  "datePickerHelperText": "pf-v5-c-date-picker__helper-text",
-  "datePickerInput": "pf-v5-c-date-picker__input",
-  "formControl": "pf-v5-c-form-control",
+  "datePicker": "pf-v6-c-date-picker",
+  "datePickerCalendar": "pf-v6-c-date-picker__calendar",
+  "datePickerHelperText": "pf-v6-c-date-picker__helper-text",
+  "datePickerInput": "pf-v6-c-date-picker__input",
+  "formControl": "pf-v6-c-form-control",
   "modifiers": {
     "alignRight": "pf-m-align-right",
     "top": "pf-m-top",
     "static": "pf-m-static"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };
 export default _default;

package/css/components/DatePicker/date-picker.js

@@ -2,15 +2,14 @@
 exports.__esModule = true;
 require('./date-picker.css');
 exports.default = {
-  "datePicker": "pf-v5-c-date-picker",
-  "datePickerCalendar": "pf-v5-c-date-picker__calendar",
-  "datePickerHelperText": "pf-v5-c-date-picker__helper-text",
-  "datePickerInput": "pf-v5-c-date-picker__input",
-  "formControl": "pf-v5-c-form-control",
+  "datePicker": "pf-v6-c-date-picker",
+  "datePickerCalendar": "pf-v6-c-date-picker__calendar",
+  "datePickerHelperText": "pf-v6-c-date-picker__helper-text",
+  "datePickerInput": "pf-v6-c-date-picker__input",
+  "formControl": "pf-v6-c-form-control",
   "modifiers": {
     "alignRight": "pf-m-align-right",
     "top": "pf-m-top",
     "static": "pf-m-static"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/components/DatePicker/date-picker.mjs

@@ -1,14 +1,13 @@
 import './date-picker.css';
 export default {
-  "datePicker": "pf-v5-c-date-picker",
-  "datePickerCalendar": "pf-v5-c-date-picker__calendar",
-  "datePickerHelperText": "pf-v5-c-date-picker__helper-text",
-  "datePickerInput": "pf-v5-c-date-picker__input",
-  "formControl": "pf-v5-c-form-control",
+  "datePicker": "pf-v6-c-date-picker",
+  "datePickerCalendar": "pf-v6-c-date-picker__calendar",
+  "datePickerHelperText": "pf-v6-c-date-picker__helper-text",
+  "datePickerInput": "pf-v6-c-date-picker__input",
+  "formControl": "pf-v6-c-form-control",
   "modifiers": {
     "alignRight": "pf-m-align-right",
     "top": "pf-m-top",
     "static": "pf-m-static"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };