@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (340) hide show
  1. package/RELEASE-NOTES.md +18 -1
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/images/pfbg-icon.svg +1 -0
  4. package/assets/pficon/pficon.scss +7 -2
  5. package/assets/pficon/pficon.woff2 +0 -0
  6. package/base/_base.scss +0 -18
  7. package/base/_chart-globals.scss +0 -4
  8. package/base/_common.scss +0 -22
  9. package/base/_fa-icons.scss +1 -2
  10. package/base/_fonts.scss +22 -27
  11. package/base/_globals.scss +92 -86
  12. package/base/_icons.scss +1 -28
  13. package/base/_svg-icons.scss +6 -0
  14. package/base/_variables.scss +4 -4
  15. package/base/patternfly-common.css +0 -10
  16. package/base/patternfly-fa-icons.css +1 -1
  17. package/base/patternfly-fonts.css +17 -17
  18. package/base/patternfly-globals.css +35 -41
  19. package/base/patternfly-icons.css +8 -22
  20. package/base/patternfly-pf-icons.css +6 -2
  21. package/base/patternfly-themes.css +0 -42
  22. package/base/patternfly-variables.css +3 -3
  23. package/base/themes/dark/_globals.scss +1 -1
  24. package/base/themes/dark/_variables.scss +1 -1
  25. package/components/AboutModalBox/about-modal-box.css +20 -50
  26. package/components/AboutModalBox/about-modal-box.scss +22 -14
  27. package/components/Accordion/accordion.css +2 -0
  28. package/components/Accordion/accordion.scss +2 -0
  29. package/components/Alert/alert.css +17 -8
  30. package/components/Alert/alert.scss +21 -7
  31. package/components/Alert/themes/dark/alert.scss +1 -1
  32. package/components/AppLauncher/app-launcher.css +2 -0
  33. package/components/AppLauncher/app-launcher.scss +2 -0
  34. package/components/Avatar/avatar.scss +2 -2
  35. package/components/BackgroundImage/background-image.css +8 -35
  36. package/components/BackgroundImage/background-image.scss +17 -43
  37. package/components/Banner/banner.css +14 -52
  38. package/components/Banner/banner.scss +9 -13
  39. package/components/Breadcrumb/breadcrumb.css +2 -0
  40. package/components/Breadcrumb/breadcrumb.scss +2 -0
  41. package/components/CalendarMonth/calendar-month.css +2 -2
  42. package/components/CalendarMonth/calendar-month.scss +3 -3
  43. package/components/Card/card.css +115 -50
  44. package/components/Card/card.scss +164 -63
  45. package/components/Chip/chip.css +33 -24
  46. package/components/Chip/chip.scss +40 -31
  47. package/components/ChipGroup/chip-group.css +27 -17
  48. package/components/ChipGroup/chip-group.scss +36 -22
  49. package/components/Content/content.css +11 -5
  50. package/components/Content/content.scss +17 -9
  51. package/components/ContextSelector/context-selector.css +13 -6
  52. package/components/ContextSelector/context-selector.scss +14 -7
  53. package/components/DataList/data-list-grid.css +7 -7
  54. package/components/DataList/data-list-grid.scss +1 -1
  55. package/components/DataList/data-list.css +46 -40
  56. package/components/DataList/data-list.scss +37 -28
  57. package/components/DatePicker/date-picker.css +0 -8
  58. package/components/DatePicker/date-picker.scss +0 -9
  59. package/components/DescriptionList/description-list.css +7 -7
  60. package/components/DescriptionList/description-list.scss +7 -7
  61. package/components/Divider/divider.css +2 -2
  62. package/components/Divider/divider.scss +3 -3
  63. package/components/Drawer/drawer.css +15 -16
  64. package/components/Drawer/drawer.scss +2 -3
  65. package/components/Dropdown/dropdown.css +26 -25
  66. package/components/Dropdown/dropdown.scss +17 -18
  67. package/components/DualListSelector/dual-list-selector.css +1 -1
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/EmptyState/empty-state.css +46 -52
  70. package/components/EmptyState/empty-state.scss +58 -57
  71. package/components/ExpandableSection/expandable-section.css +2 -0
  72. package/components/ExpandableSection/expandable-section.scss +2 -0
  73. package/components/Form/form.css +14 -12
  74. package/components/Form/form.scss +9 -7
  75. package/components/FormControl/form-control.css +2 -5
  76. package/components/FormControl/themes/dark/form-control.scss +2 -6
  77. package/components/HelperText/helper-text.css +4 -0
  78. package/components/HelperText/helper-text.scss +5 -0
  79. package/components/Hint/hint.css +2 -2
  80. package/components/Hint/hint.scss +2 -2
  81. package/components/Icon/icon.css +3 -3
  82. package/components/Icon/icon.scss +3 -3
  83. package/components/InputGroup/input-group.css +61 -85
  84. package/components/InputGroup/input-group.scss +55 -61
  85. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  86. package/components/Label/label.css +49 -36
  87. package/components/Label/label.scss +53 -38
  88. package/components/Label/themes/dark/label.scss +2 -2
  89. package/components/LabelGroup/label-group.css +26 -22
  90. package/components/LabelGroup/label-group.scss +31 -26
  91. package/components/LogViewer/log-viewer.css +0 -38
  92. package/components/Login/login.css +20 -60
  93. package/components/Login/login.scss +16 -18
  94. package/components/Login/themes/dark/login.scss +4 -0
  95. package/components/Masthead/masthead.css +4 -42
  96. package/components/Masthead/masthead.scss +4 -4
  97. package/components/Menu/menu.css +9 -6
  98. package/components/Menu/menu.scss +34 -31
  99. package/components/MenuToggle/menu-toggle.css +3 -1
  100. package/components/MenuToggle/menu-toggle.scss +3 -1
  101. package/components/ModalBox/modal-box.css +12 -11
  102. package/components/ModalBox/modal-box.scss +14 -14
  103. package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
  104. package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
  105. package/components/Nav/nav.css +1 -1
  106. package/components/Nav/nav.scss +2 -2
  107. package/components/NotificationDrawer/notification-drawer.css +8 -8
  108. package/components/NotificationDrawer/notification-drawer.scss +8 -8
  109. package/components/OptionsMenu/options-menu.css +8 -10
  110. package/components/OptionsMenu/options-menu.scss +9 -11
  111. package/components/Page/page.css +101 -122
  112. package/components/Page/page.scss +49 -21
  113. package/components/Pagination/pagination.css +2 -110
  114. package/components/Pagination/pagination.scss +0 -6
  115. package/components/Popover/popover.css +31 -37
  116. package/components/Popover/popover.scss +32 -37
  117. package/components/Popover/themes/dark/popover.scss +3 -9
  118. package/components/Progress/progress.css +13 -10
  119. package/components/Progress/progress.scss +13 -10
  120. package/components/ProgressStepper/progress-stepper.css +5 -5
  121. package/components/ProgressStepper/progress-stepper.scss +5 -5
  122. package/components/SearchInput/search-input.css +4 -2
  123. package/components/SearchInput/search-input.scss +4 -2
  124. package/components/Select/select.css +1 -1
  125. package/components/Select/select.scss +1 -1
  126. package/components/Sidebar/sidebar.css +69 -26
  127. package/components/Sidebar/sidebar.scss +84 -27
  128. package/components/SimpleList/simple-list.css +1 -1
  129. package/components/SimpleList/simple-list.scss +2 -2
  130. package/components/Spinner/spinner.css +4 -4
  131. package/components/Spinner/spinner.scss +4 -4
  132. package/components/Table/table-grid.css +28 -28
  133. package/components/Table/table-scrollable.css +31 -26
  134. package/components/Table/table-scrollable.scss +33 -28
  135. package/components/Table/table-tree-view.css +14 -4
  136. package/components/Table/table-tree-view.scss +15 -0
  137. package/components/Table/table.css +67 -65
  138. package/components/Table/table.scss +65 -62
  139. package/components/Tabs/tabs.css +0 -4
  140. package/components/Tabs/tabs.scss +0 -7
  141. package/components/TextInputGroup/text-input-group.css +6 -4
  142. package/components/TextInputGroup/text-input-group.scss +6 -5
  143. package/components/Tile/tile.css +1 -1
  144. package/components/Tile/tile.scss +1 -1
  145. package/components/Timestamp/timestamp.css +3 -3
  146. package/components/Timestamp/timestamp.scss +3 -3
  147. package/components/Toolbar/toolbar.css +78 -43
  148. package/components/Toolbar/toolbar.scss +50 -10
  149. package/components/Tooltip/themes/dark/tooltip.scss +1 -11
  150. package/components/Tooltip/tooltip.css +7 -12
  151. package/components/Tooltip/tooltip.scss +6 -3
  152. package/components/TreeView/tree-view.css +7 -15
  153. package/components/TreeView/tree-view.scss +7 -18
  154. package/components/Wizard/wizard.css +16 -39
  155. package/components/Wizard/wizard.scss +20 -2
  156. package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
  157. package/docs/components/Accordion/examples/Accordion.md +12 -12
  158. package/docs/components/ActionList/examples/ActionList.md +6 -6
  159. package/docs/components/Alert/examples/Alert.md +29 -29
  160. package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
  161. package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
  162. package/docs/components/Avatar/examples/Avatar.md +11 -11
  163. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  164. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  165. package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
  166. package/docs/components/Badge/examples/Badge.md +5 -5
  167. package/docs/components/Banner/examples/Banner.md +8 -8
  168. package/docs/components/Brand/examples/Brand.md +9 -9
  169. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  170. package/docs/components/Button/examples/Button.md +35 -35
  171. package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
  172. package/docs/components/Card/examples/Card.md +676 -116
  173. package/docs/components/Check/examples/Check.md +16 -19
  174. package/docs/components/Chip/examples/Chip.md +70 -52
  175. package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
  176. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  177. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  178. package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
  179. package/docs/components/Content/examples/Content.md +37 -9
  180. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  181. package/docs/components/ContextSelector/examples/context-selector.md +87 -80
  182. package/docs/components/DataList/examples/DataList.md +239 -202
  183. package/docs/components/DatePicker/examples/DatePicker.md +139 -104
  184. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  185. package/docs/components/Divider/examples/Divider.md +10 -10
  186. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  187. package/docs/components/Drawer/examples/Drawer.md +43 -43
  188. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  189. package/docs/components/Dropdown/examples/Dropdown.md +125 -100
  190. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  191. package/docs/components/EmptyState/examples/EmptyState.md +130 -82
  192. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  193. package/docs/components/FileUpload/examples/FileUpload.md +146 -105
  194. package/docs/components/Form/examples/Form.md +152 -130
  195. package/docs/components/FormControl/examples/FormControl.md +21 -20
  196. package/docs/components/HelperText/examples/HelperText.md +24 -35
  197. package/docs/components/Hint/examples/Hint.md +7 -7
  198. package/docs/components/Icon/examples/Icon.md +11 -12
  199. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
  200. package/docs/components/InputGroup/examples/InputGroup.md +229 -179
  201. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  202. package/docs/components/Label/examples/Label.md +1427 -746
  203. package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
  204. package/docs/components/List/examples/List.md +18 -18
  205. package/docs/components/LogViewer/examples/LogViewer.md +79 -74
  206. package/docs/components/Login/examples/Login.md +103 -181
  207. package/docs/components/Masthead/examples/masthead.md +9 -9
  208. package/docs/components/Menu/examples/Menu.md +83 -80
  209. package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
  210. package/docs/components/ModalBox/examples/ModalBox.md +113 -92
  211. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
  212. package/docs/components/Nav/examples/Navigation.md +69 -69
  213. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  214. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
  215. package/docs/components/NumberInput/examples/NumberInput.md +311 -239
  216. package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
  217. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  218. package/docs/components/Page/examples/Page.css +7 -1
  219. package/docs/components/Page/examples/Page.md +81 -54
  220. package/docs/components/Pagination/examples/Pagination.md +27 -27
  221. package/docs/components/Panel/examples/Panel.md +10 -10
  222. package/docs/components/Popover/examples/Popover.md +206 -149
  223. package/docs/components/Progress/examples/Progress.md +32 -61
  224. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
  225. package/docs/components/Radio/examples/Radio.md +12 -11
  226. package/docs/components/SearchInput/examples/SearchInput.md +185 -148
  227. package/docs/components/Select/examples/Select.md +368 -313
  228. package/docs/components/Sidebar/examples/Sidebar.md +70 -14
  229. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  230. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  231. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  232. package/docs/components/Slider/examples/Slider.md +84 -62
  233. package/docs/components/Spinner/examples/Spinner.md +24 -24
  234. package/docs/components/Switch/examples/Switch.md +19 -19
  235. package/docs/components/TabContent/examples/TabContent.md +13 -13
  236. package/docs/components/Table/examples/Table.css +4 -0
  237. package/docs/components/Table/examples/Table.md +5212 -5750
  238. package/docs/components/Tabs/examples/Tabs.md +155 -155
  239. package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
  240. package/docs/components/Tile/examples/Tile.md +16 -17
  241. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  242. package/docs/components/Title/examples/Title.md +17 -17
  243. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  244. package/docs/components/Toolbar/examples/Toolbar.md +848 -726
  245. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  246. package/docs/components/TreeView/examples/TreeView.md +34 -34
  247. package/docs/components/Truncate/examples/Truncate.md +4 -5
  248. package/docs/components/Wizard/examples/Wizard.md +119 -127
  249. package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
  250. package/docs/demos/Alert/examples/Alert.md +118 -71
  251. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  252. package/docs/demos/Banner/examples/Banner.md +8 -9
  253. package/docs/demos/Card/examples/Card.md +216 -153
  254. package/docs/demos/CardView/examples/CardView.md +57 -30
  255. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  256. package/docs/demos/Dashboard/examples/Dashboard.md +51 -33
  257. package/docs/demos/DataList/examples/DataList.md +312 -255
  258. package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
  259. package/docs/demos/Drawer/examples/Drawer.md +24 -22
  260. package/docs/demos/Form/examples/BasicForms.md +220 -213
  261. package/docs/demos/HelperText/examples/HelperText.md +16 -14
  262. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  263. package/docs/demos/Masthead/examples/Masthead.md +302 -284
  264. package/docs/demos/Modal/examples/Modal.md +54 -66
  265. package/docs/demos/Nav/examples/Nav.md +47 -47
  266. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
  267. package/docs/demos/Page/examples/Page.md +982 -51
  268. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
  269. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
  270. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
  271. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  272. package/docs/demos/Table/examples/Table.md +3323 -1288
  273. package/docs/demos/Tabs/examples/Tabs.md +141 -90
  274. package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
  275. package/docs/demos/Wizard/examples/Wizard.md +289 -266
  276. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  277. package/docs/layouts/Flex/examples/Flex.md +98 -98
  278. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  279. package/docs/layouts/Grid/examples/Grid.md +9 -9
  280. package/docs/layouts/Level/examples/Level.md +5 -5
  281. package/docs/layouts/Split/examples/Split.md +7 -7
  282. package/docs/layouts/Stack/examples/Stack.md +6 -6
  283. package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
  284. package/docs/utilities/Alignment/examples/Alignment.md +7 -7
  285. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
  286. package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
  287. package/docs/utilities/Display/examples/Display.md +12 -12
  288. package/docs/utilities/Flex/examples/Flex.md +35 -35
  289. package/docs/utilities/Float/examples/Float.md +5 -5
  290. package/docs/utilities/Sizing/examples/Sizing.md +51 -51
  291. package/docs/utilities/Spacing/examples/Spacing.md +35 -35
  292. package/docs/utilities/Text/examples/Text.md +31 -31
  293. package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
  294. package/layouts/Gallery/gallery.css +1 -1
  295. package/layouts/Gallery/gallery.scss +1 -1
  296. package/layouts/Grid/grid.css +7 -7
  297. package/layouts/Grid/grid.scss +2 -2
  298. package/package.json +59 -65
  299. package/patternfly-addons.css +48 -48
  300. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
  301. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  302. package/patternfly-base.css +63 -114
  303. package/{patternfly-no-reset.css → patternfly-no-globals.css} +1179 -2293
  304. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  305. package/patternfly.css +1207 -2327
  306. package/patternfly.min.css +1 -1
  307. package/patternfly.min.css.map +1 -1
  308. package/sass-utilities/functions.scss +8 -24
  309. package/sass-utilities/mixins.scss +15 -39
  310. package/sass-utilities/placeholders.scss +0 -23
  311. package/sass-utilities/scss-variables.scss +5 -6
  312. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  313. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
  314. package/utilities/Spacing/spacing.scss +2 -2
  315. package/utilities/Text/text.css +48 -48
  316. package/utilities/Text/text.scss +6 -6
  317. package/utilities/Text/themes/dark/text.scss +2 -2
  318. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  319. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  320. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  321. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  322. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  323. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  324. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  325. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  326. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  327. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  328. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  329. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  330. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  331. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  332. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  333. package/assets/pficon/pficon.woff +0 -0
  334. package/base/_shield-inheritable.scss +0 -69
  335. package/base/_shield-noninheritable.scss +0 -13
  336. package/base/patternfly-shield-inheritable.css +0 -66
  337. package/base/patternfly-shield-inheritable.scss +0 -4
  338. package/base/patternfly-shield-noninheritable.css +0 -9
  339. package/base/patternfly-shield-noninheritable.scss +0 -4
  340. package/sass-utilities/bs-variables.scss +0 -709
package/docs/components/CalendarMonth/examples/CalendarMonth.md CHANGED
@@ -1,6 +1,7 @@
1
1
  ---
2
2
  id: 'Calendar month'
3
3
  section: components
4
+ subsection: date-and-time
4
5
  cssPrefix: pf-c-calendar-month
5
6
  ---## Examples
6
7
 
@@ -19,73 +20,77 @@ cssPrefix: pf-c-calendar-month
19
20
  </button>
20
21
  </div>
21
22
  <div class="pf-c-input-group">
22
- <div class="pf-c-calendar-month__header-month">
23
- <div class="pf-c-select">
24
- <span
25
- id="calendar-month-date-selected-month-select-label"
26
- hidden
27
- >Month</span>
23
+ <div class="pf-c-input-group__item pf-m-fill">
24
+ <div class="pf-c-calendar-month__header-month">
25
+ <div class="pf-c-select">
26
+ <span
27
+ id="calendar-month-date-selected-month-select-label"
28
+ hidden
29
+ >Month</span>
28
30
 
29
- <button
30
- class="pf-c-select__toggle"
31
- type="button"
32
- id="calendar-month-date-selected-month-select-toggle"
33
- aria-haspopup="true"
34
- aria-expanded="false"
35
- aria-labelledby="calendar-month-date-selected-month-select-label calendar-month-date-selected-month-select-toggle"
36
- >
37
- <div class="pf-c-select__toggle-wrapper">
38
- <span class="pf-c-select__toggle-text">October</span>
39
- </div>
40
- <span class="pf-c-select__toggle-arrow">
41
- <i class="fas fa-caret-down" aria-hidden="true"></i>
42
- </span>
43
- </button>
31
+ <button
32
+ class="pf-c-select__toggle"
33
+ type="button"
34
+ id="calendar-month-date-selected-month-select-toggle"
35
+ aria-haspopup="true"
36
+ aria-expanded="false"
37
+ aria-labelledby="calendar-month-date-selected-month-select-label calendar-month-date-selected-month-select-toggle"
38
+ >
39
+ <div class="pf-c-select__toggle-wrapper">
40
+ <span class="pf-c-select__toggle-text">October</span>
41
+ </div>
42
+ <span class="pf-c-select__toggle-arrow">
43
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
44
+ </span>
45
+ </button>
44
46
 
45
- <ul
46
- class="pf-c-select__menu"
47
- role="listbox"
48
- aria-labelledby="calendar-month-date-selected-month-select-label"
49
- hidden
50
- >
51
- <li role="presentation">
52
- <button class="pf-c-select__menu-item" role="option">Running</button>
53
- </li>
54
- <li role="presentation">
55
- <button
56
- class="pf-c-select__menu-item pf-m-selected"
57
- role="option"
58
- aria-selected="true"
59
- >
60
- Stopped
61
- <span class="pf-c-select__menu-item-icon">
62
- <i class="fas fa-check" aria-hidden="true"></i>
63
- </span>
64
- </button>
65
- </li>
66
- <li role="presentation">
67
- <button class="pf-c-select__menu-item" role="option">Down</button>
68
- </li>
69
- <li role="presentation">
70
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
71
- </li>
72
- <li role="presentation">
73
- <button
74
- class="pf-c-select__menu-item"
75
- role="option"
76
- >Needs maintenance</button>
77
- </li>
78
- </ul>
47
+ <ul
48
+ class="pf-c-select__menu"
49
+ role="listbox"
50
+ aria-labelledby="calendar-month-date-selected-month-select-label"
51
+ hidden
52
+ >
53
+ <li role="presentation">
54
+ <button class="pf-c-select__menu-item" role="option">Running</button>
55
+ </li>
56
+ <li role="presentation">
57
+ <button
58
+ class="pf-c-select__menu-item pf-m-selected"
59
+ role="option"
60
+ aria-selected="true"
61
+ >
62
+ Stopped
63
+ <span class="pf-c-select__menu-item-icon">
64
+ <i class="fas fa-check" aria-hidden="true"></i>
65
+ </span>
66
+ </button>
67
+ </li>
68
+ <li role="presentation">
69
+ <button class="pf-c-select__menu-item" role="option">Down</button>
70
+ </li>
71
+ <li role="presentation">
72
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
73
+ </li>
74
+ <li role="presentation">
75
+ <button
76
+ class="pf-c-select__menu-item"
77
+ role="option"
78
+ >Needs maintenance</button>
79
+ </li>
80
+ </ul>
81
+ </div>
79
82
  </div>
80
83
  </div>
81
- <div class="pf-c-calendar-month__header-year">
82
- <input
83
- class="pf-c-form-control"
84
- type="number"
85
- value="2020"
86
- id="calendar-month-date-selected-year"
87
- aria-label="Select year"
88
- />
84
+ <div class="pf-c-input-group__item">
85
+ <div class="pf-c-calendar-month__header-year">
86
+ <input
87
+ class="pf-c-form-control"
88
+ type="number"
89
+ value="2020"
90
+ id="calendar-month-date-selected-year"
91
+ aria-label="Select year"
92
+ />
93
+ </div>
89
94
  </div>
90
95
  </div>
91
96
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">
@@ -408,73 +413,77 @@ cssPrefix: pf-c-calendar-month
408
413
  </button>
409
414
  </div>
410
415
  <div class="pf-c-input-group">
411
- <div class="pf-c-calendar-month__header-month">
412
- <div class="pf-c-select">
413
- <span
414
- id="calendar-month-range-start-date-selected-month-select-label"
415
- hidden
416
- >Month</span>
416
+ <div class="pf-c-input-group__item pf-m-fill">
417
+ <div class="pf-c-calendar-month__header-month">
418
+ <div class="pf-c-select">
419
+ <span
420
+ id="calendar-month-range-start-date-selected-month-select-label"
421
+ hidden
422
+ >Month</span>
417
423
 
418
- <button
419
- class="pf-c-select__toggle"
420
- type="button"
421
- id="calendar-month-range-start-date-selected-month-select-toggle"
422
- aria-haspopup="true"
423
- aria-expanded="false"
424
- aria-labelledby="calendar-month-range-start-date-selected-month-select-label calendar-month-range-start-date-selected-month-select-toggle"
425
- >
426
- <div class="pf-c-select__toggle-wrapper">
427
- <span class="pf-c-select__toggle-text">October</span>
428
- </div>
429
- <span class="pf-c-select__toggle-arrow">
430
- <i class="fas fa-caret-down" aria-hidden="true"></i>
431
- </span>
432
- </button>
424
+ <button
425
+ class="pf-c-select__toggle"
426
+ type="button"
427
+ id="calendar-month-range-start-date-selected-month-select-toggle"
428
+ aria-haspopup="true"
429
+ aria-expanded="false"
430
+ aria-labelledby="calendar-month-range-start-date-selected-month-select-label calendar-month-range-start-date-selected-month-select-toggle"
431
+ >
432
+ <div class="pf-c-select__toggle-wrapper">
433
+ <span class="pf-c-select__toggle-text">October</span>
434
+ </div>
435
+ <span class="pf-c-select__toggle-arrow">
436
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
437
+ </span>
438
+ </button>
433
439
 
434
- <ul
435
- class="pf-c-select__menu"
436
- role="listbox"
437
- aria-labelledby="calendar-month-range-start-date-selected-month-select-label"
438
- hidden
439
- >
440
- <li role="presentation">
441
- <button class="pf-c-select__menu-item" role="option">Running</button>
442
- </li>
443
- <li role="presentation">
444
- <button
445
- class="pf-c-select__menu-item pf-m-selected"
446
- role="option"
447
- aria-selected="true"
448
- >
449
- Stopped
450
- <span class="pf-c-select__menu-item-icon">
451
- <i class="fas fa-check" aria-hidden="true"></i>
452
- </span>
453
- </button>
454
- </li>
455
- <li role="presentation">
456
- <button class="pf-c-select__menu-item" role="option">Down</button>
457
- </li>
458
- <li role="presentation">
459
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
460
- </li>
461
- <li role="presentation">
462
- <button
463
- class="pf-c-select__menu-item"
464
- role="option"
465
- >Needs maintenance</button>
466
- </li>
467
- </ul>
440
+ <ul
441
+ class="pf-c-select__menu"
442
+ role="listbox"
443
+ aria-labelledby="calendar-month-range-start-date-selected-month-select-label"
444
+ hidden
445
+ >
446
+ <li role="presentation">
447
+ <button class="pf-c-select__menu-item" role="option">Running</button>
448
+ </li>
449
+ <li role="presentation">
450
+ <button
451
+ class="pf-c-select__menu-item pf-m-selected"
452
+ role="option"
453
+ aria-selected="true"
454
+ >
455
+ Stopped
456
+ <span class="pf-c-select__menu-item-icon">
457
+ <i class="fas fa-check" aria-hidden="true"></i>
458
+ </span>
459
+ </button>
460
+ </li>
461
+ <li role="presentation">
462
+ <button class="pf-c-select__menu-item" role="option">Down</button>
463
+ </li>
464
+ <li role="presentation">
465
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
466
+ </li>
467
+ <li role="presentation">
468
+ <button
469
+ class="pf-c-select__menu-item"
470
+ role="option"
471
+ >Needs maintenance</button>
472
+ </li>
473
+ </ul>
474
+ </div>
468
475
  </div>
469
476
  </div>
470
- <div class="pf-c-calendar-month__header-year">
471
- <input
472
- class="pf-c-form-control"
473
- type="number"
474
- value="2020"
475
- id="calendar-month-range-start-date-selected-year"
476
- aria-label="Select year"
477
- />
477
+ <div class="pf-c-input-group__item">
478
+ <div class="pf-c-calendar-month__header-year">
479
+ <input
480
+ class="pf-c-form-control"
481
+ type="number"
482
+ value="2020"
483
+ id="calendar-month-range-start-date-selected-year"
484
+ aria-label="Select year"
485
+ />
486
+ </div>
478
487
  </div>
479
488
  </div>
480
489
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">
@@ -808,73 +817,77 @@ cssPrefix: pf-c-calendar-month
808
817
  </button>
809
818
  </div>
810
819
  <div class="pf-c-input-group">
811
- <div class="pf-c-calendar-month__header-month">
812
- <div class="pf-c-select">
813
- <span
814
- id="calendar-month-range-end-date-selected-month-select-label"
815
- hidden
816
- >Month</span>
820
+ <div class="pf-c-input-group__item pf-m-fill">
821
+ <div class="pf-c-calendar-month__header-month">
822
+ <div class="pf-c-select">
823
+ <span
824
+ id="calendar-month-range-end-date-selected-month-select-label"
825
+ hidden
826
+ >Month</span>
817
827
 
818
- <button
819
- class="pf-c-select__toggle"
820
- type="button"
821
- id="calendar-month-range-end-date-selected-month-select-toggle"
822
- aria-haspopup="true"
823
- aria-expanded="false"
824
- aria-labelledby="calendar-month-range-end-date-selected-month-select-label calendar-month-range-end-date-selected-month-select-toggle"
825
- >
826
- <div class="pf-c-select__toggle-wrapper">
827
- <span class="pf-c-select__toggle-text">October</span>
828
- </div>
829
- <span class="pf-c-select__toggle-arrow">
830
- <i class="fas fa-caret-down" aria-hidden="true"></i>
831
- </span>
832
- </button>
828
+ <button
829
+ class="pf-c-select__toggle"
830
+ type="button"
831
+ id="calendar-month-range-end-date-selected-month-select-toggle"
832
+ aria-haspopup="true"
833
+ aria-expanded="false"
834
+ aria-labelledby="calendar-month-range-end-date-selected-month-select-label calendar-month-range-end-date-selected-month-select-toggle"
835
+ >
836
+ <div class="pf-c-select__toggle-wrapper">
837
+ <span class="pf-c-select__toggle-text">October</span>
838
+ </div>
839
+ <span class="pf-c-select__toggle-arrow">
840
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
841
+ </span>
842
+ </button>
833
843
 
834
- <ul
835
- class="pf-c-select__menu"
836
- role="listbox"
837
- aria-labelledby="calendar-month-range-end-date-selected-month-select-label"
838
- hidden
839
- >
840
- <li role="presentation">
841
- <button class="pf-c-select__menu-item" role="option">Running</button>
842
- </li>
843
- <li role="presentation">
844
- <button
845
- class="pf-c-select__menu-item pf-m-selected"
846
- role="option"
847
- aria-selected="true"
848
- >
849
- Stopped
850
- <span class="pf-c-select__menu-item-icon">
851
- <i class="fas fa-check" aria-hidden="true"></i>
852
- </span>
853
- </button>
854
- </li>
855
- <li role="presentation">
856
- <button class="pf-c-select__menu-item" role="option">Down</button>
857
- </li>
858
- <li role="presentation">
859
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
860
- </li>
861
- <li role="presentation">
862
- <button
863
- class="pf-c-select__menu-item"
864
- role="option"
865
- >Needs maintenance</button>
866
- </li>
867
- </ul>
844
+ <ul
845
+ class="pf-c-select__menu"
846
+ role="listbox"
847
+ aria-labelledby="calendar-month-range-end-date-selected-month-select-label"
848
+ hidden
849
+ >
850
+ <li role="presentation">
851
+ <button class="pf-c-select__menu-item" role="option">Running</button>
852
+ </li>
853
+ <li role="presentation">
854
+ <button
855
+ class="pf-c-select__menu-item pf-m-selected"
856
+ role="option"
857
+ aria-selected="true"
858
+ >
859
+ Stopped
860
+ <span class="pf-c-select__menu-item-icon">
861
+ <i class="fas fa-check" aria-hidden="true"></i>
862
+ </span>
863
+ </button>
864
+ </li>
865
+ <li role="presentation">
866
+ <button class="pf-c-select__menu-item" role="option">Down</button>
867
+ </li>
868
+ <li role="presentation">
869
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
870
+ </li>
871
+ <li role="presentation">
872
+ <button
873
+ class="pf-c-select__menu-item"
874
+ role="option"
875
+ >Needs maintenance</button>
876
+ </li>
877
+ </ul>
878
+ </div>
868
879
  </div>
869
880
  </div>
870
- <div class="pf-c-calendar-month__header-year">
871
- <input
872
- class="pf-c-form-control"
873
- type="number"
874
- value="2020"
875
- id="calendar-month-range-end-date-selected-year"
876
- aria-label="Select year"
877
- />
881
+ <div class="pf-c-input-group__item">
882
+ <div class="pf-c-calendar-month__header-year">
883
+ <input
884
+ class="pf-c-form-control"
885
+ type="number"
886
+ value="2020"
887
+ id="calendar-month-range-end-date-selected-year"
888
+ aria-label="Select year"
889
+ />
890
+ </div>
878
891
  </div>
879
892
  </div>
880
893
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">
@@ -1208,73 +1221,77 @@ cssPrefix: pf-c-calendar-month
1208
1221
  </button>
1209
1222
  </div>
1210
1223
  <div class="pf-c-input-group">
1211
- <div class="pf-c-calendar-month__header-month">
1212
- <div class="pf-c-select">
1213
- <span
1214
- id="calendar-month-range-start-and-end-dates-selected-month-select-label"
1215
- hidden
1216
- >Month</span>
1224
+ <div class="pf-c-input-group__item pf-m-fill">
1225
+ <div class="pf-c-calendar-month__header-month">
1226
+ <div class="pf-c-select">
1227
+ <span
1228
+ id="calendar-month-range-start-and-end-dates-selected-month-select-label"
1229
+ hidden
1230
+ >Month</span>
1217
1231
 
1218
- <button
1219
- class="pf-c-select__toggle"
1220
- type="button"
1221
- id="calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1222
- aria-haspopup="true"
1223
- aria-expanded="false"
1224
- aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1225
- >
1226
- <div class="pf-c-select__toggle-wrapper">
1227
- <span class="pf-c-select__toggle-text">October</span>
1228
- </div>
1229
- <span class="pf-c-select__toggle-arrow">
1230
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1231
- </span>
1232
- </button>
1232
+ <button
1233
+ class="pf-c-select__toggle"
1234
+ type="button"
1235
+ id="calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1236
+ aria-haspopup="true"
1237
+ aria-expanded="false"
1238
+ aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1239
+ >
1240
+ <div class="pf-c-select__toggle-wrapper">
1241
+ <span class="pf-c-select__toggle-text">October</span>
1242
+ </div>
1243
+ <span class="pf-c-select__toggle-arrow">
1244
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1245
+ </span>
1246
+ </button>
1233
1247
 
1234
- <ul
1235
- class="pf-c-select__menu"
1236
- role="listbox"
1237
- aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label"
1238
- hidden
1239
- >
1240
- <li role="presentation">
1241
- <button class="pf-c-select__menu-item" role="option">Running</button>
1242
- </li>
1243
- <li role="presentation">
1244
- <button
1245
- class="pf-c-select__menu-item pf-m-selected"
1246
- role="option"
1247
- aria-selected="true"
1248
- >
1249
- Stopped
1250
- <span class="pf-c-select__menu-item-icon">
1251
- <i class="fas fa-check" aria-hidden="true"></i>
1252
- </span>
1253
- </button>
1254
- </li>
1255
- <li role="presentation">
1256
- <button class="pf-c-select__menu-item" role="option">Down</button>
1257
- </li>
1258
- <li role="presentation">
1259
- <button class="pf-c-select__menu-item" role="option">Degraded</button>
1260
- </li>
1261
- <li role="presentation">
1262
- <button
1263
- class="pf-c-select__menu-item"
1264
- role="option"
1265
- >Needs maintenance</button>
1266
- </li>
1267
- </ul>
1248
+ <ul
1249
+ class="pf-c-select__menu"
1250
+ role="listbox"
1251
+ aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label"
1252
+ hidden
1253
+ >
1254
+ <li role="presentation">
1255
+ <button class="pf-c-select__menu-item" role="option">Running</button>
1256
+ </li>
1257
+ <li role="presentation">
1258
+ <button
1259
+ class="pf-c-select__menu-item pf-m-selected"
1260
+ role="option"
1261
+ aria-selected="true"
1262
+ >
1263
+ Stopped
1264
+ <span class="pf-c-select__menu-item-icon">
1265
+ <i class="fas fa-check" aria-hidden="true"></i>
1266
+ </span>
1267
+ </button>
1268
+ </li>
1269
+ <li role="presentation">
1270
+ <button class="pf-c-select__menu-item" role="option">Down</button>
1271
+ </li>
1272
+ <li role="presentation">
1273
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
1274
+ </li>
1275
+ <li role="presentation">
1276
+ <button
1277
+ class="pf-c-select__menu-item"
1278
+ role="option"
1279
+ >Needs maintenance</button>
1280
+ </li>
1281
+ </ul>
1282
+ </div>
1268
1283
  </div>
1269
1284
  </div>
1270
- <div class="pf-c-calendar-month__header-year">
1271
- <input
1272
- class="pf-c-form-control"
1273
- type="number"
1274
- value="2020"
1275
- id="calendar-month-range-start-and-end-dates-selected-year"
1276
- aria-label="Select year"
1277
- />
1285
+ <div class="pf-c-input-group__item">
1286
+ <div class="pf-c-calendar-month__header-year">
1287
+ <input
1288
+ class="pf-c-form-control"
1289
+ type="number"
1290
+ value="2020"
1291
+ id="calendar-month-range-start-and-end-dates-selected-year"
1292
+ aria-label="Select year"
1293
+ />
1294
+ </div>
1278
1295
  </div>
1279
1296
  </div>
1280
1297
  <div class="pf-c-calendar-month__header-nav-control pf-m-next-month">
@@ -1597,38 +1614,38 @@ cssPrefix: pf-c-calendar-month
1597
1614
 
1598
1615
  ### Accessibility
1599
1616
 
1600
- | Attribute | Applied to | Outcome |
1601
- | ------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
1602
- | `aria-hidden="true"` | `.pf-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required** |
1603
- | `aria-hidden="true"` | `.pf-c-calendar-month__day > span` | Hides the visual day of the month label from assistive technologies. **Required** |
1604
- | `.pf-screen-reader` | `.pf-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
1605
- | `aria-label="[Prev/Next] month"` | `.pf-c-calendar-month__header-nav-control` | Provides an accessible label for the nav controls. **Required** |
1606
- | `disabled` | `.pf-c-calendar-month__date` | Indicates that a date is selected. **Required when the parent is `.pf-c-calendar-month__dates-cell.pf-m-disabled`** |
1607
- | `aria-label="[date] [month] [year]"` | `.pf-c-calendar-month__date` | Provides an accessible label for the date button. **Required** |
1617
+ | Attribute | Applied to | Outcome |
1618
+ | -- | -- | -- |
1619
+ | `aria-hidden="true"` | `.pf-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required** |
1620
+ | `aria-hidden="true"` | `.pf-c-calendar-month__day > span` | Hides the visual day of the month label from assistive technologies. **Required** |
1621
+ | `.pf-screen-reader` | `.pf-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
1622
+ | `aria-label="[Prev/Next] month"` | `.pf-c-calendar-month__header-nav-control` | Provides an accessible label for the nav controls. **Required** |
1623
+ | `disabled` | `.pf-c-calendar-month__date` | Indicates that a date is selected. **Required when the parent is `.pf-c-calendar-month__dates-cell.pf-m-disabled`** |
1624
+ | `aria-label="[date] [month] [year]"` | `.pf-c-calendar-month__date` | Provides an accessible label for the date button. **Required** |
1608
1625
 
1609
1626
  ### Usage
1610
1627
 
1611
- | Class | Applied to | Outcome |
1612
- | ------------------------------------------ | ------------------------------------------ | ------------------------------------------------------------- |
1613
- | `.pf-c-calendar-month` | `<div>` | Initiates the calendar month component. **Required** |
1614
- | `.pf-c-calendar-month__header` | `<div>` | Initiates the calendar month header. **Required** |
1615
- | `.pf-c-calendar-month__header-nav-control` | `<div>` | Initiates a nav control for navigating by month. **Required** |
1616
- | `.pf-c-calendar-month__header-month` | `<div>` | Initiates the month select. **Required** |
1617
- | `.pf-c-calendar-month__header-year` | `<div>` | Initiates the year input. **Required** |
1618
- | `.pf-c-calendar-month__calendar` | `<table>` | Initiates the calendar. **Required** |
1619
- | `.pf-c-calendar-month__days` | `<thead>` | Initiates the calendar days section. **Required** |
1620
- | `.pf-c-calendar-month__days-row` | `<tr>` | Initiates the calendar days row. **Required** |
1621
- | `.pf-c-calendar-month__day` | `<th>` | Initiates a calendar day. **Required** |
1622
- | `.pf-c-calendar-month__dates` | `<tbody>` | Initiates the calendar dates section. **Required** |
1623
- | `.pf-c-calendar-month__dates-row` | `<tr>` | Initiates a calendar dates row. **Required** |
1624
- | `.pf-c-calendar-month__dates-cell` | `<td>` | Initiates a calendar date cell. **Required** |
1625
- | `.pf-c-calendar-month__date` | `<button>` | Initiates a calendar date. **Required** |
1626
- | `.pf-m-prev-month` | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the previous month. **Required** |
1627
- | `.pf-m-next-month` | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the next month. **Required** |
1628
- | `.pf-m-current` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the current day. **Required** |
1629
- | `.pf-m-selected` | `.pf-c-calendar-month__dates-cell` | Indicates a date is selected. |
1630
- | `.pf-m-start-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the start of a range. |
1631
- | `.pf-m-in-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is in a range. |
1632
- | `.pf-m-end-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the end of a range. |
1633
- | `.pf-m-adjacent-month` | `.pf-c-calendar-month__dates-cell` | Indicates a date is in an adjacent month. |
1634
- | `.pf-m-disabled` | `.pf-c-calendar-month__dates-cell` | Indicates a date is disabled and unavailable. |
1628
+ | Class | Applied to | Outcome |
1629
+ | -- | -- | -- |
1630
+ | `.pf-c-calendar-month` | `<div>` | Initiates the calendar month component. **Required** |
1631
+ | `.pf-c-calendar-month__header` | `<div>` | Initiates the calendar month header. **Required** |
1632
+ | `.pf-c-calendar-month__header-nav-control` | `<div>` | Initiates a nav control for navigating by month. **Required** |
1633
+ | `.pf-c-calendar-month__header-month` | `<div>` | Initiates the month select. **Required** |
1634
+ | `.pf-c-calendar-month__header-year` | `<div>` | Initiates the year input. **Required** |
1635
+ | `.pf-c-calendar-month__calendar` | `<table>` | Initiates the calendar. **Required** |
1636
+ | `.pf-c-calendar-month__days` | `<thead>` | Initiates the calendar days section. **Required** |
1637
+ | `.pf-c-calendar-month__days-row` | `<tr>` | Initiates the calendar days row. **Required** |
1638
+ | `.pf-c-calendar-month__day` | `<th>` | Initiates a calendar day. **Required** |
1639
+ | `.pf-c-calendar-month__dates` | `<tbody>` | Initiates the calendar dates section. **Required** |
1640
+ | `.pf-c-calendar-month__dates-row` | `<tr>` | Initiates a calendar dates row. **Required** |
1641
+ | `.pf-c-calendar-month__dates-cell` | `<td>` | Initiates a calendar date cell. **Required** |
1642
+ | `.pf-c-calendar-month__date` | `<button>` | Initiates a calendar date. **Required** |
1643
+ | `.pf-m-prev-month` | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the previous month. **Required** |
1644
+ | `.pf-m-next-month` | `.pf-c-calendar-month__header-nav-control` | Indicates a nav control is the next month. **Required** |
1645
+ | `.pf-m-current` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the current day. **Required** |
1646
+ | `.pf-m-selected` | `.pf-c-calendar-month__dates-cell` | Indicates a date is selected. |
1647
+ | `.pf-m-start-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the start of a range. |
1648
+ | `.pf-m-in-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is in a range. |
1649
+ | `.pf-m-end-range` | `.pf-c-calendar-month__dates-cell` | Indicates a date is the end of a range. |
1650
+ | `.pf-m-adjacent-month` | `.pf-c-calendar-month__dates-cell` | Indicates a date is in an adjacent month. |
1651
+ | `.pf-m-disabled` | `.pf-c-calendar-month__dates-cell` | Indicates a date is disabled and unavailable. |