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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (205) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/css/components/AboutModalBox/about-modal-box.css +64 -64
  3. package/css/components/Accordion/accordion.css +40 -40
  4. package/css/components/ActionList/action-list.css +1 -1
  5. package/css/components/Alert/alert-group.css +15 -15
  6. package/css/components/Alert/alert.css +47 -47
  7. package/css/components/Avatar/avatar.css +1 -1
  8. package/css/components/BackToTop/back-to-top.css +16 -16
  9. package/css/components/Backdrop/backdrop.css +1 -2
  10. package/css/components/BackgroundImage/background-image.css +1 -2
  11. package/css/components/Badge/badge.css +7 -7
  12. package/css/components/Banner/banner.css +14 -14
  13. package/css/components/Breadcrumb/breadcrumb.css +16 -17
  14. package/css/components/Breadcrumb/breadcrumb.d.ts +1 -1
  15. package/css/components/Breadcrumb/breadcrumb.js +1 -1
  16. package/css/components/Breadcrumb/breadcrumb.mjs +1 -1
  17. package/css/components/Button/button.css +94 -95
  18. package/css/components/CalendarMonth/calendar-month.css +43 -44
  19. package/css/components/Card/card.css +60 -61
  20. package/css/components/Check/check.css +3 -4
  21. package/css/components/ClipboardCopy/clipboard-copy.css +37 -38
  22. package/css/components/CodeBlock/code-block.css +20 -20
  23. package/css/components/CodeEditor/code-editor.css +34 -34
  24. package/css/components/Content/content.css +155 -130
  25. package/css/components/Content/content.d.ts +19 -0
  26. package/css/components/Content/content.js +19 -0
  27. package/css/components/Content/content.mjs +19 -0
  28. package/css/components/DataList/data-list-grid.css +98 -98
  29. package/css/components/DataList/data-list.css +282 -285
  30. package/css/components/DataList/data-list.d.ts +11 -11
  31. package/css/components/DataList/data-list.js +11 -11
  32. package/css/components/DataList/data-list.mjs +11 -11
  33. package/css/components/DatePicker/date-picker.css +15 -16
  34. package/css/components/DescriptionList/description-list.css +13 -13
  35. package/css/components/Divider/divider.css +27 -31
  36. package/css/components/DragDrop/drag-drop.css +2 -2
  37. package/css/components/Drawer/drawer.css +87 -90
  38. package/css/components/DualListSelector/dual-list-selector.css +60 -59
  39. package/css/components/EmptyState/empty-state.css +33 -33
  40. package/css/components/ExpandableSection/expandable-section.css +49 -49
  41. package/css/components/FileUpload/file-upload.css +1 -2
  42. package/css/components/Form/form.css +107 -108
  43. package/css/components/FormControl/form-control.css +45 -46
  44. package/css/components/HelperText/helper-text.css +3 -3
  45. package/css/components/Hint/hint.css +19 -18
  46. package/css/components/Hint/hint.d.ts +1 -2
  47. package/css/components/Hint/hint.js +1 -2
  48. package/css/components/Hint/hint.mjs +1 -2
  49. package/css/components/Icon/icon.css +1 -2
  50. package/css/components/InlineEdit/inline-edit.css +11 -12
  51. package/css/components/InputGroup/input-group.css +17 -18
  52. package/css/components/JumpLinks/jump-links.css +76 -77
  53. package/css/components/Label/label-group.css +27 -28
  54. package/css/components/Label/label.css +31 -32
  55. package/css/components/List/list.css +27 -27
  56. package/css/components/LogViewer/log-viewer.css +53 -77
  57. package/css/components/LogViewer/log-viewer.d.ts +0 -2
  58. package/css/components/LogViewer/log-viewer.js +0 -2
  59. package/css/components/LogViewer/log-viewer.mjs +0 -2
  60. package/css/components/Login/login.css +99 -104
  61. package/css/components/Login/login.d.ts +1 -1
  62. package/css/components/Login/login.js +1 -1
  63. package/css/components/Login/login.mjs +1 -1
  64. package/css/components/Masthead/masthead.css +1 -2
  65. package/css/components/Menu/menu.css +128 -84
  66. package/css/components/MenuToggle/menu-toggle.css +59 -60
  67. package/css/components/ModalBox/modal-box.css +41 -41
  68. package/css/components/MultipleFileUpload/multiple-file-upload.css +33 -34
  69. package/css/components/Nav/nav.css +1 -2
  70. package/css/components/NotificationBadge/notification-badge.css +17 -17
  71. package/css/components/NotificationDrawer/notification-drawer.css +42 -43
  72. package/css/components/NumberInput/number-input.css +8 -12
  73. package/css/components/OverflowMenu/overflow-menu.css +1 -1
  74. package/css/components/Page/page.css +146 -365
  75. package/css/components/Page/page.d.ts +0 -25
  76. package/css/components/Page/page.js +0 -25
  77. package/css/components/Page/page.mjs +0 -25
  78. package/css/components/Pagination/pagination.css +35 -38
  79. package/css/components/Panel/panel.css +25 -26
  80. package/css/components/Popover/popover.css +48 -48
  81. package/css/components/Progress/progress.css +5 -6
  82. package/css/components/ProgressStepper/progress-stepper.css +227 -229
  83. package/css/components/Radio/radio.css +7 -8
  84. package/css/components/Sidebar/sidebar.css +45 -46
  85. package/css/components/SimpleList/simple-list.css +19 -19
  86. package/css/components/Skeleton/skeleton.css +5 -6
  87. package/css/components/SkipToContent/skip-to-content.css +5 -5
  88. package/css/components/Slider/slider.css +26 -27
  89. package/css/components/Spinner/spinner.css +1 -2
  90. package/css/components/Switch/switch.css +5 -6
  91. package/css/components/TabContent/tab-content.css +25 -26
  92. package/css/components/Table/table-grid.css +404 -404
  93. package/css/components/Table/table-scrollable.css +17 -18
  94. package/css/components/Table/table-tree-view.css +257 -258
  95. package/css/components/Table/table-tree-view.d.ts +1 -1
  96. package/css/components/Table/table-tree-view.js +1 -1
  97. package/css/components/Table/table-tree-view.mjs +1 -1
  98. package/css/components/Table/table.css +174 -173
  99. package/css/components/Table/table.d.ts +7 -7
  100. package/css/components/Table/table.js +7 -7
  101. package/css/components/Table/table.mjs +7 -7
  102. package/css/components/Tabs/tabs.css +119 -120
  103. package/css/components/TextInputGroup/text-input-group.css +28 -29
  104. package/css/components/TextInputGroup/text-input-group.d.ts +1 -1
  105. package/css/components/TextInputGroup/text-input-group.js +1 -1
  106. package/css/components/TextInputGroup/text-input-group.mjs +1 -1
  107. package/css/components/Tile/tile.css +14 -15
  108. package/css/components/Timestamp/timestamp.css +1 -1
  109. package/css/components/Title/title.css +1 -1
  110. package/css/components/ToggleGroup/toggle-group.css +29 -30
  111. package/css/components/Toolbar/toolbar.css +250 -132
  112. package/css/components/Toolbar/toolbar.d.ts +2 -2
  113. package/css/components/Toolbar/toolbar.js +2 -2
  114. package/css/components/Toolbar/toolbar.mjs +2 -2
  115. package/css/components/Tooltip/tooltip.css +27 -27
  116. package/css/components/TreeView/tree-view.css +182 -183
  117. package/css/components/Truncate/truncate.css +1 -2
  118. package/css/components/Wizard/wizard.css +158 -140
  119. package/css/components/Wizard/wizard.d.ts +5 -2
  120. package/css/components/Wizard/wizard.js +5 -2
  121. package/css/components/Wizard/wizard.mjs +5 -2
  122. package/css/components/_index.css +23505 -0
  123. package/css/components/_index.d.ts +1497 -0
  124. package/css/components/_index.js +1498 -0
  125. package/css/components/_index.mjs +1496 -0
  126. package/css/docs/components/LogViewer/examples/LogViewer.css +9 -2
  127. package/css/docs/components/LogViewer/examples/LogViewer.d.ts +2 -0
  128. package/css/docs/components/LogViewer/examples/LogViewer.js +2 -0
  129. package/css/docs/components/LogViewer/examples/LogViewer.mjs +2 -0
  130. package/css/docs/components/Nav/examples/Navigation.css +0 -5
  131. package/css/docs/components/Nav/examples/Navigation.d.ts +0 -1
  132. package/css/docs/components/Nav/examples/Navigation.js +0 -1
  133. package/css/docs/components/Nav/examples/Navigation.mjs +0 -1
  134. package/css/docs/components/OverflowMenu/examples/overflow-menu.css +3 -27
  135. package/css/docs/components/Table/examples/Table.css +7 -0
  136. package/css/docs/components/Table/examples/Table.d.ts +2 -0
  137. package/css/docs/components/Table/examples/Table.js +2 -0
  138. package/css/docs/components/Table/examples/Table.mjs +2 -0
  139. package/css/docs/demos/Card/examples/Card.css +2 -2
  140. package/css/docs/demos/Toolbar/examples/Toolbar.css +1 -17
  141. package/css/docs/utilities/Alignment/examples/Alignment.css +2 -2
  142. package/css/docs/utilities/Display/examples/Display.css +3 -10
  143. package/css/docs/utilities/Display/examples/Display.d.ts +0 -8
  144. package/css/docs/utilities/Display/examples/Display.js +0 -8
  145. package/css/docs/utilities/Display/examples/Display.mjs +0 -8
  146. package/css/docs/utilities/Flex/examples/Flex.css +2 -2
  147. package/css/docs/utilities/Float/examples/Float.css +3 -3
  148. package/css/docs/utilities/Sizing/examples/Sizing.css +2 -2
  149. package/css/docs/utilities/Spacing/examples/Spacing.css +2 -2
  150. package/css/layouts/Bullseye/bullseye.css +1 -2
  151. package/css/layouts/Flex/flex.css +1 -2
  152. package/css/layouts/Gallery/gallery.css +1 -2
  153. package/css/layouts/Grid/grid.css +1 -2
  154. package/css/layouts/Level/level.css +1 -2
  155. package/css/layouts/Split/split.css +1 -2
  156. package/css/layouts/Stack/stack.css +1 -2
  157. package/css/layouts/_index.css +3454 -0
  158. package/css/layouts/_index.d.ts +846 -0
  159. package/css/layouts/_index.js +847 -0
  160. package/css/layouts/_index.mjs +845 -0
  161. package/css/utilities/BackgroundColor/{BackgroundColor.d.ts → background-color.d.ts} +1 -1
  162. package/css/utilities/BackgroundColor/{BackgroundColor.js → background-color.js} +1 -1
  163. package/css/utilities/BackgroundColor/{BackgroundColor.mjs → background-color.mjs} +1 -1
  164. package/css/utilities/Display/display.css +38 -0
  165. package/css/utilities/Display/display.d.ts +12 -0
  166. package/css/utilities/Display/display.js +12 -0
  167. package/css/utilities/Display/display.mjs +12 -0
  168. package/css/utilities/_index.css +7815 -0
  169. package/css/utilities/_index.d.ts +1671 -0
  170. package/css/utilities/_index.js +1672 -0
  171. package/css/utilities/_index.mjs +1670 -0
  172. package/package.json +3 -3
  173. package/css/components/AppLauncher/app-launcher.css +0 -244
  174. package/css/components/AppLauncher/app-launcher.d.ts +0 -29
  175. package/css/components/AppLauncher/app-launcher.js +0 -30
  176. package/css/components/AppLauncher/app-launcher.mjs +0 -28
  177. package/css/components/Chip/chip-group.css +0 -93
  178. package/css/components/Chip/chip-group.d.ts +0 -13
  179. package/css/components/Chip/chip-group.js +0 -14
  180. package/css/components/Chip/chip-group.mjs +0 -12
  181. package/css/components/Chip/chip.css +0 -122
  182. package/css/components/Chip/chip.d.ts +0 -16
  183. package/css/components/Chip/chip.js +0 -17
  184. package/css/components/Chip/chip.mjs +0 -15
  185. package/css/components/ContextSelector/context-selector.css +0 -336
  186. package/css/components/ContextSelector/context-selector.d.ts +0 -25
  187. package/css/components/ContextSelector/context-selector.js +0 -26
  188. package/css/components/ContextSelector/context-selector.mjs +0 -24
  189. package/css/components/Dropdown/dropdown.css +0 -686
  190. package/css/components/Dropdown/dropdown.d.ts +0 -55
  191. package/css/components/Dropdown/dropdown.js +0 -56
  192. package/css/components/Dropdown/dropdown.mjs +0 -54
  193. package/css/components/OptionsMenu/options-menu.css +0 -279
  194. package/css/components/OptionsMenu/options-menu.d.ts +0 -27
  195. package/css/components/OptionsMenu/options-menu.js +0 -28
  196. package/css/components/OptionsMenu/options-menu.mjs +0 -26
  197. package/css/components/Select/select.css +0 -599
  198. package/css/components/Select/select.d.ts +0 -61
  199. package/css/components/Select/select.js +0 -62
  200. package/css/components/Select/select.mjs +0 -60
  201. package/css/docs/components/Page/deprecated/PageHeader.css +0 -17
  202. package/css/docs/components/Page/deprecated/PageHeader.d.ts +0 -12
  203. package/css/docs/components/Page/deprecated/PageHeader.js +0 -13
  204. package/css/docs/components/Page/deprecated/PageHeader.mjs +0 -11
  205. /package/css/utilities/BackgroundColor/{BackgroundColor.css → background-color.css} +0 -0
package/css/components/DataList/data-list.d.ts CHANGED
@@ -18,17 +18,6 @@ declare const _default: {
18
18
  "dataListToggleIcon": "pf-v6-c-data-list__toggle-icon",
19
19
  "dirRtl": "pf-v6-m-dir-rtl",
20
20
  "modifiers": {
21
- "hidden": "pf-m-hidden",
22
- "hiddenOnSm": "pf-m-hidden-on-sm",
23
- "visibleOnSm": "pf-m-visible-on-sm",
24
- "hiddenOnMd": "pf-m-hidden-on-md",
25
- "visibleOnMd": "pf-m-visible-on-md",
26
- "hiddenOnLg": "pf-m-hidden-on-lg",
27
- "visibleOnLg": "pf-m-visible-on-lg",
28
- "hiddenOnXl": "pf-m-hidden-on-xl",
29
- "visibleOnXl": "pf-m-visible-on-xl",
30
- "hiddenOn_2xl": "pf-m-hidden-on-2xl",
31
- "visibleOn_2xl": "pf-m-visible-on-2xl",
32
21
  "icon": "pf-m-icon",
33
22
  "alignRight": "pf-m-align-right",
34
23
  "noFill": "pf-m-no-fill",
@@ -52,6 +41,17 @@ declare const _default: {
52
41
  "ghostRow": "pf-m-ghost-row",
53
42
  "expanded": "pf-m-expanded",
54
43
  "disabled": "pf-m-disabled",
44
+ "hidden": "pf-m-hidden",
45
+ "hiddenOnSm": "pf-m-hidden-on-sm",
46
+ "visibleOnSm": "pf-m-visible-on-sm",
47
+ "hiddenOnMd": "pf-m-hidden-on-md",
48
+ "visibleOnMd": "pf-m-visible-on-md",
49
+ "hiddenOnLg": "pf-m-hidden-on-lg",
50
+ "visibleOnLg": "pf-m-visible-on-lg",
51
+ "hiddenOnXl": "pf-m-hidden-on-xl",
52
+ "visibleOnXl": "pf-m-visible-on-xl",
53
+ "hiddenOn_2xl": "pf-m-hidden-on-2xl",
54
+ "visibleOn_2xl": "pf-m-visible-on-2xl",
55
55
  "noPadding": "pf-m-no-padding"
56
56
  }
57
57
  };
package/css/components/DataList/data-list.js CHANGED
@@ -20,17 +20,6 @@ exports.default = {
20
20
  "dataListToggleIcon": "pf-v6-c-data-list__toggle-icon",
21
21
  "dirRtl": "pf-v6-m-dir-rtl",
22
22
  "modifiers": {
23
- "hidden": "pf-m-hidden",
24
- "hiddenOnSm": "pf-m-hidden-on-sm",
25
- "visibleOnSm": "pf-m-visible-on-sm",
26
- "hiddenOnMd": "pf-m-hidden-on-md",
27
- "visibleOnMd": "pf-m-visible-on-md",
28
- "hiddenOnLg": "pf-m-hidden-on-lg",
29
- "visibleOnLg": "pf-m-visible-on-lg",
30
- "hiddenOnXl": "pf-m-hidden-on-xl",
31
- "visibleOnXl": "pf-m-visible-on-xl",
32
- "hiddenOn_2xl": "pf-m-hidden-on-2xl",
33
- "visibleOn_2xl": "pf-m-visible-on-2xl",
34
23
  "icon": "pf-m-icon",
35
24
  "alignRight": "pf-m-align-right",
36
25
  "noFill": "pf-m-no-fill",
@@ -54,6 +43,17 @@ exports.default = {
54
43
  "ghostRow": "pf-m-ghost-row",
55
44
  "expanded": "pf-m-expanded",
56
45
  "disabled": "pf-m-disabled",
46
+ "hidden": "pf-m-hidden",
47
+ "hiddenOnSm": "pf-m-hidden-on-sm",
48
+ "visibleOnSm": "pf-m-visible-on-sm",
49
+ "hiddenOnMd": "pf-m-hidden-on-md",
50
+ "visibleOnMd": "pf-m-visible-on-md",
51
+ "hiddenOnLg": "pf-m-hidden-on-lg",
52
+ "visibleOnLg": "pf-m-visible-on-lg",
53
+ "hiddenOnXl": "pf-m-hidden-on-xl",
54
+ "visibleOnXl": "pf-m-visible-on-xl",
55
+ "hiddenOn_2xl": "pf-m-hidden-on-2xl",
56
+ "visibleOn_2xl": "pf-m-visible-on-2xl",
57
57
  "noPadding": "pf-m-no-padding"
58
58
  }
59
59
  };
package/css/components/DataList/data-list.mjs CHANGED
@@ -18,17 +18,6 @@ export default {
18
18
  "dataListToggleIcon": "pf-v6-c-data-list__toggle-icon",
19
19
  "dirRtl": "pf-v6-m-dir-rtl",
20
20
  "modifiers": {
21
- "hidden": "pf-m-hidden",
22
- "hiddenOnSm": "pf-m-hidden-on-sm",
23
- "visibleOnSm": "pf-m-visible-on-sm",
24
- "hiddenOnMd": "pf-m-hidden-on-md",
25
- "visibleOnMd": "pf-m-visible-on-md",
26
- "hiddenOnLg": "pf-m-hidden-on-lg",
27
- "visibleOnLg": "pf-m-visible-on-lg",
28
- "hiddenOnXl": "pf-m-hidden-on-xl",
29
- "visibleOnXl": "pf-m-visible-on-xl",
30
- "hiddenOn_2xl": "pf-m-hidden-on-2xl",
31
- "visibleOn_2xl": "pf-m-visible-on-2xl",
32
21
  "icon": "pf-m-icon",
33
22
  "alignRight": "pf-m-align-right",
34
23
  "noFill": "pf-m-no-fill",
@@ -52,6 +41,17 @@ export default {
52
41
  "ghostRow": "pf-m-ghost-row",
53
42
  "expanded": "pf-m-expanded",
54
43
  "disabled": "pf-m-disabled",
44
+ "hidden": "pf-m-hidden",
45
+ "hiddenOnSm": "pf-m-hidden-on-sm",
46
+ "visibleOnSm": "pf-m-visible-on-sm",
47
+ "hiddenOnMd": "pf-m-hidden-on-md",
48
+ "visibleOnMd": "pf-m-visible-on-md",
49
+ "hiddenOnLg": "pf-m-hidden-on-lg",
50
+ "visibleOnLg": "pf-m-visible-on-lg",
51
+ "hiddenOnXl": "pf-m-hidden-on-xl",
52
+ "visibleOnXl": "pf-m-visible-on-xl",
53
+ "hiddenOn_2xl": "pf-m-hidden-on-2xl",
54
+ "visibleOn_2xl": "pf-m-visible-on-2xl",
55
55
  "noPadding": "pf-m-no-padding"
56
56
  }
57
57
  };
package/css/components/DatePicker/date-picker.css CHANGED
@@ -1,19 +1,18 @@
1
- :where(:root),
2
- :where(.pf-v6-c-date-picker) {
3
- --pf-v6-c-date-picker--m-top__calendar--Top: 0;
1
+ :where(:root, .pf-v6-c-date-picker) {
2
+ --pf-v6-c-date-picker--m-top__calendar--InsetBlockStart: 0;
4
3
  --pf-v6-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-t--global--spacer--xs));
5
- --pf-v6-c-date-picker__helper-text--MarginTop: var(--pf-t--global--spacer--sm);
4
+ --pf-v6-c-date-picker__helper-text--MarginBlockStart: var(--pf-t--global--spacer--sm);
6
5
  --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));
7
6
  --pf-v6-c-date-picker__input--c-form-control--width-base: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
8
7
  --pf-v6-c-date-picker__input--c-form-control--width-chars: 11;
9
8
  --pf-v6-c-date-picker__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
10
9
  --pf-v6-c-date-picker__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
11
10
  --pf-v6-c-date-picker__calendar--ZIndex: var(--pf-t--global--z-index--sm);
12
- --pf-v6-c-date-picker__calendar--Top: calc(100% + var(--pf-t--global--spacer--xs));
13
- --pf-v6-c-date-picker__calendar--Right: auto;
14
- --pf-v6-c-date-picker__calendar--Left: 0;
15
- --pf-v6-c-date-picker__calendar--m-align-right--Right: 0;
16
- --pf-v6-c-date-picker__calendar--m-align-right--Left: auto;
11
+ --pf-v6-c-date-picker__calendar--InsetBlockStart: calc(100% + var(--pf-t--global--spacer--xs));
12
+ --pf-v6-c-date-picker__calendar--InsetInlineEnd: auto;
13
+ --pf-v6-c-date-picker__calendar--InsetInlineStart: 0;
14
+ --pf-v6-c-date-picker__calendar--m-align-right--InsetInlineEnd: 0;
15
+ --pf-v6-c-date-picker__calendar--m-align-right--InsetInlineStart: auto;
17
16
  }
18
17
 
19
18
  .pf-v6-c-date-picker {
@@ -22,7 +21,7 @@
22
21
  }
23
22
 
24
23
  .pf-v6-c-date-picker__helper-text {
25
- margin-block-start: var(--pf-v6-c-date-picker__helper-text--MarginTop);
24
+ margin-block-start: var(--pf-v6-c-date-picker__helper-text--MarginBlockStart);
26
25
  }
27
26
 
28
27
  .pf-v6-c-date-picker__input .pf-v6-c-form-control {
@@ -31,19 +30,19 @@
31
30
 
32
31
  .pf-v6-c-date-picker__calendar {
33
32
  position: absolute;
34
- inset-block-start: var(--pf-v6-c-date-picker__calendar--Top);
35
- inset-inline-start: var(--pf-v6-c-date-picker__calendar--Left);
36
- inset-inline-end: var(--pf-v6-c-date-picker__calendar--Right);
33
+ inset-block-start: var(--pf-v6-c-date-picker__calendar--InsetBlockStart);
34
+ inset-inline-start: var(--pf-v6-c-date-picker__calendar--InsetInlineStart);
35
+ inset-inline-end: var(--pf-v6-c-date-picker__calendar--InsetInlineEnd);
37
36
  z-index: var(--pf-v6-c-date-picker__calendar--ZIndex);
38
37
  background-color: var(--pf-v6-c-date-picker__calendar--BackgroundColor);
39
38
  box-shadow: var(--pf-v6-c-date-picker__calendar--BoxShadow);
40
39
  }
41
40
  .pf-v6-c-date-picker__calendar.pf-m-align-right {
42
- --pf-v6-c-date-picker__calendar--Right: var(--pf-v6-c-date-picker__calendar--m-align-right--Right);
43
- --pf-v6-c-date-picker__calendar--Left: var(--pf-v6-c-date-picker__calendar--m-align-right--Left);
41
+ --pf-v6-c-date-picker__calendar--InsetInlineEnd: var(--pf-v6-c-date-picker__calendar--m-align-right--InsetInlineEnd);
42
+ --pf-v6-c-date-picker__calendar--InsetInlineStart: var(--pf-v6-c-date-picker__calendar--m-align-right--InsetInlineStart);
44
43
  }
45
44
  .pf-v6-c-date-picker.pf-m-top .pf-v6-c-date-picker__calendar {
46
- --pf-v6-c-date-picker__calendar--Top: var(--pf-v6-c-date-picker--m-top__calendar--Top);
45
+ --pf-v6-c-date-picker__calendar--InsetBlockStart: var(--pf-v6-c-date-picker--m-top__calendar--InsetBlockStart);
47
46
  transform: translateY(var(--pf-v6-c-date-picker--m-top__calendar--TranslateY));
48
47
  }
49
48
  .pf-v6-c-date-picker__calendar.pf-m-static {
package/css/components/DescriptionList/description-list.css CHANGED
@@ -1,4 +1,4 @@
1
- :where(:root), :where(.pf-v6-c-description-list) {
1
+ :where(:root, .pf-v6-c-description-list) {
2
2
  --pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--lg);
3
3
  --pf-v6-c-description-list--ColumnGap: var(--pf-t--global--spacer--lg);
4
4
  --pf-v6-c-description-list--GridTemplateColumns--count: 1;
@@ -17,7 +17,7 @@
17
17
  --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--sm);
18
18
  --pf-v6-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
19
19
  --pf-v6-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
20
- --pf-v6-c-description-list__term-icon--MarginRight: var(--pf-t--global--spacer--sm);
20
+ --pf-v6-c-description-list__term-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
21
21
  --pf-v6-c-description-list__term-icon--Color: var(--pf-t--global--icon--color--subtle);
22
22
  --pf-v6-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-v6-c-description-list--GridTemplateColumns--count));
23
23
  --pf-v6-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
@@ -45,32 +45,32 @@
45
45
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width);
46
46
  }
47
47
  @media screen and (min-width: 576px) {
48
- :where(:root), :where(.pf-v6-c-description-list) {
48
+ :where(:root, .pf-v6-c-description-list) {
49
49
  --pf-v6-c-description-list__term--Display: var(--pf-v6-c-description-list__term--sm--Display);
50
50
  }
51
51
  }
52
52
  @media (min-width: 576px) {
53
- :where(:root), :where(.pf-v6-c-description-list) {
53
+ :where(:root, .pf-v6-c-description-list) {
54
54
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width));
55
55
  }
56
56
  }
57
57
  @media (min-width: 768px) {
58
- :where(:root), :where(.pf-v6-c-description-list) {
58
+ :where(:root, .pf-v6-c-description-list) {
59
59
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width)));
60
60
  }
61
61
  }
62
62
  @media (min-width: 992px) {
63
- :where(:root), :where(.pf-v6-c-description-list) {
63
+ :where(:root, .pf-v6-c-description-list) {
64
64
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width))));
65
65
  }
66
66
  }
67
67
  @media (min-width: 1200px) {
68
- :where(:root), :where(.pf-v6-c-description-list) {
68
+ :where(:root, .pf-v6-c-description-list) {
69
69
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width)))));
70
70
  }
71
71
  }
72
72
  @media (min-width: 1450px) {
73
- :where(:root), :where(.pf-v6-c-description-list) {
73
+ :where(:root, .pf-v6-c-description-list) {
74
74
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width))))));
75
75
  }
76
76
  }
@@ -147,10 +147,10 @@
147
147
  }
148
148
  .pf-v6-c-description-list > .pf-v6-c-card {
149
149
  align-self: stretch;
150
- padding-block-start: var(--pf-v6-c-card--first-child--PaddingTop);
151
- padding-block-end: var(--pf-v6-c-card--child--PaddingBottom);
152
- padding-inline-start: var(--pf-v6-c-card--child--PaddingLeft);
153
- padding-inline-end: var(--pf-v6-c-card--child--PaddingRight);
150
+ padding-block-start: var(--pf-v6-c-card--first-child--PaddingBlockStart);
151
+ padding-block-end: var(--pf-v6-c-card--child--PaddingBlockEnd);
152
+ padding-inline-start: var(--pf-v6-c-card--child--PaddingInlineStart);
153
+ padding-inline-end: var(--pf-v6-c-card--child--PaddingInlineEnd);
154
154
  }
155
155
 
156
156
  .pf-v6-c-description-list__group,
@@ -184,7 +184,7 @@
184
184
  .pf-v6-c-description-list__term-icon {
185
185
  flex-shrink: 0;
186
186
  min-width: var(--pf-v6-c-description-list__term-icon--MinWidth);
187
- margin-inline-end: var(--pf-v6-c-description-list__term-icon--MarginRight);
187
+ margin-inline-end: var(--pf-v6-c-description-list__term-icon--MarginInlineEnd);
188
188
  color: var(--pf-v6-c-description-list__term-icon--Color);
189
189
  }
190
190
 
package/css/components/Divider/divider.css CHANGED
@@ -1,71 +1,67 @@
1
+ :where(:root, .pf-v6-c-divider) {
2
+ --pf-v6-c-divider--Display: flex;
3
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
4
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
5
+ --pf-v6-c-divider--before--FlexBasis: 100%;
6
+ }
7
+
1
8
  .pf-v6-c-divider {
9
+ flex-direction: row;
10
+ width: 100%;
11
+ height: var(--pf-v6-c-divider--Size);
12
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2
13
  --pf-v6-hidden-visible--hidden--Display: none;
3
14
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4
15
  display: var(--pf-v6-hidden-visible--Display);
16
+ flex-shrink: 0;
17
+ align-items: stretch;
18
+ align-self: stretch;
19
+ justify-content: center;
20
+ border: 0;
5
21
  }
6
- .pf-m-hidden.pf-v6-c-divider {
22
+ .pf-v6-c-divider.pf-m-hidden {
7
23
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
8
24
  }
9
25
  @media screen and (min-width: 576px) {
10
- .pf-m-hidden-on-sm.pf-v6-c-divider {
26
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
11
27
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
12
28
  }
13
- .pf-m-visible-on-sm.pf-v6-c-divider {
29
+ .pf-v6-c-divider.pf-m-visible-on-sm {
14
30
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
15
31
  }
16
32
  }
17
33
  @media screen and (min-width: 768px) {
18
- .pf-m-hidden-on-md.pf-v6-c-divider {
34
+ .pf-v6-c-divider.pf-m-hidden-on-md {
19
35
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
20
36
  }
21
- .pf-m-visible-on-md.pf-v6-c-divider {
37
+ .pf-v6-c-divider.pf-m-visible-on-md {
22
38
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
23
39
  }
24
40
  }
25
41
  @media screen and (min-width: 992px) {
26
- .pf-m-hidden-on-lg.pf-v6-c-divider {
42
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
27
43
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
28
44
  }
29
- .pf-m-visible-on-lg.pf-v6-c-divider {
45
+ .pf-v6-c-divider.pf-m-visible-on-lg {
30
46
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
31
47
  }
32
48
  }
33
49
  @media screen and (min-width: 1200px) {
34
- .pf-m-hidden-on-xl.pf-v6-c-divider {
50
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
35
51
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
36
52
  }
37
- .pf-m-visible-on-xl.pf-v6-c-divider {
53
+ .pf-v6-c-divider.pf-m-visible-on-xl {
38
54
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
39
55
  }
40
56
  }
41
57
  @media screen and (min-width: 1450px) {
42
- .pf-m-hidden-on-2xl.pf-v6-c-divider {
58
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
43
59
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
44
60
  }
45
- .pf-m-visible-on-2xl.pf-v6-c-divider {
61
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
46
62
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
47
63
  }
48
64
  }
49
-
50
- :root,
51
- :where(.pf-v6-c-divider) {
52
- --pf-v6-c-divider--Display: flex;
53
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
54
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
55
- --pf-v6-c-divider--before--FlexBasis: 100%;
56
- }
57
-
58
- .pf-v6-c-divider {
59
- flex-direction: row;
60
- width: 100%;
61
- height: var(--pf-v6-c-divider--Size);
62
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
63
- flex-shrink: 0;
64
- align-items: stretch;
65
- align-self: stretch;
66
- justify-content: center;
67
- border: 0;
68
- }
69
65
  .pf-v6-c-divider::before {
70
66
  flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
71
67
  content: "";
package/css/components/DragDrop/drag-drop.css CHANGED
@@ -1,4 +1,4 @@
1
- :where(:root), :where(.pf-v6-c-draggable) {
1
+ :where(:root, .pf-v6-c-draggable) {
2
2
  --pf-v6-c-draggable--Cursor: auto;
3
3
  --pf-v6-c-draggable--m-dragging--Cursor: grabbing;
4
4
  --pf-v6-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -34,7 +34,7 @@
34
34
  --pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-v6-c-draggable--m-drag-outside--after--BorderColor);
35
35
  }
36
36
 
37
- :where(:root), :where(.pf-v6-c-droppable) {
37
+ :where(:root, .pf-v6-c-droppable) {
38
38
  --pf-v6-c-droppable--before--BackgroundColor: transparent;
39
39
  --pf-v6-c-droppable--before--Opacity: 0;
40
40
  --pf-v6-c-droppable--after--BorderWidth: 0;