@patternfly/patternfly 6.0.0-alpha.97 → 6.0.0-alpha.99

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 (153) hide show
  1. package/components/Card/card.css +1 -0
  2. package/components/Card/card.scss +1 -0
  3. package/components/Check/check.css +10 -3
  4. package/components/Check/check.scss +17 -4
  5. package/components/Masthead/masthead.css +17 -9
  6. package/components/Masthead/masthead.scss +18 -9
  7. package/components/MenuToggle/menu-toggle.css +20 -6
  8. package/components/MenuToggle/menu-toggle.scss +32 -6
  9. package/components/ModalBox/modal-box.css +11 -7
  10. package/components/ModalBox/modal-box.scss +27 -12
  11. package/components/Nav/nav.css +64 -110
  12. package/components/Nav/nav.scss +70 -143
  13. package/components/Page/page.css +9 -17
  14. package/components/Page/page.scss +10 -23
  15. package/components/Radio/radio.css +12 -5
  16. package/components/Radio/radio.scss +21 -6
  17. package/components/Table/table-grid.css +30 -35
  18. package/components/Table/table-grid.scss +44 -32
  19. package/components/Table/table-scrollable.css +14 -6
  20. package/components/Table/table-scrollable.scss +6 -1
  21. package/components/Table/table-tree-view.css +5 -5
  22. package/components/Table/table-tree-view.scss +14 -8
  23. package/components/Table/table.css +90 -254
  24. package/components/Table/table.scss +158 -347
  25. package/components/Toolbar/toolbar.css +66 -2
  26. package/components/Toolbar/toolbar.scss +21 -2
  27. package/docs/components/AboutModalBox/examples/AboutModalBox.md +12 -12
  28. package/docs/components/Accordion/examples/Accordion.md +19 -19
  29. package/docs/components/ActionList/examples/ActionList.md +5 -5
  30. package/docs/components/Alert/examples/Alert.md +26 -26
  31. package/docs/components/AppLauncher/deprecated/application-launcher.md +31 -31
  32. package/docs/components/Avatar/examples/Avatar.md +8 -8
  33. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  34. package/docs/components/Backdrop/examples/Backdrop.md +3 -3
  35. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  36. package/docs/components/Badge/examples/Badge.md +6 -6
  37. package/docs/components/Banner/examples/Banner.md +17 -17
  38. package/docs/components/Brand/examples/Brand.css +3 -3
  39. package/docs/components/Brand/examples/Brand.md +7 -7
  40. package/docs/components/Breadcrumb/examples/Breadcrumb.md +12 -12
  41. package/docs/components/Button/examples/Button.css +2 -2
  42. package/docs/components/Button/examples/Button.md +35 -35
  43. package/docs/components/CalendarMonth/examples/CalendarMonth.md +29 -29
  44. package/docs/components/Card/examples/Card.md +30 -30
  45. package/docs/components/Check/examples/Check.md +12 -12
  46. package/docs/components/Chip/examples/Chip.md +21 -21
  47. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +19 -19
  48. package/docs/components/CodeBlock/examples/CodeBlock.md +8 -8
  49. package/docs/components/CodeEditor/examples/CodeEditor.md +14 -14
  50. package/docs/components/Content/examples/Content.md +5 -5
  51. package/docs/components/ContextSelector/deprecated/context-selector.md +23 -23
  52. package/docs/components/DataList/examples/DataList.md +177 -112
  53. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  54. package/docs/components/DescriptionList/examples/DescriptionList.md +29 -29
  55. package/docs/components/Divider/examples/Divider.md +7 -7
  56. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  57. package/docs/components/Drawer/examples/Drawer.md +36 -36
  58. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  59. package/docs/components/Dropdown/deprecated/Dropdown.md +47 -47
  60. package/docs/components/DualListSelector/examples/DualListSelector.md +41 -41
  61. package/docs/components/EmptyState/examples/EmptyState.md +21 -21
  62. package/docs/components/ExpandableSection/examples/ExpandableSection.md +18 -18
  63. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  64. package/docs/components/Form/examples/Form.md +52 -52
  65. package/docs/components/FormControl/examples/FormControl.md +22 -22
  66. package/docs/components/HelperText/examples/HelperText.md +11 -11
  67. package/docs/components/Hint/examples/Hint.md +6 -6
  68. package/docs/components/Icon/examples/Icon.md +13 -13
  69. package/docs/components/InlineEdit/examples/InlineEdit.md +54 -138
  70. package/docs/components/InputGroup/examples/InputGroup.md +10 -10
  71. package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
  72. package/docs/components/Label/examples/Label.css +4 -4
  73. package/docs/components/Label/examples/Label.md +45 -45
  74. package/docs/components/List/examples/List.md +6 -6
  75. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  76. package/docs/components/LogViewer/examples/LogViewer.md +35 -35
  77. package/docs/components/Login/examples/Login.md +21 -21
  78. package/docs/components/Masthead/examples/masthead.md +7 -7
  79. package/docs/components/Menu/examples/Menu.md +60 -60
  80. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -22
  81. package/docs/components/ModalBox/examples/ModalBox.md +75 -34
  82. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +21 -21
  83. package/docs/components/Nav/examples/Navigation.css +20 -3
  84. package/docs/components/Nav/examples/Navigation.md +44 -50
  85. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  86. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +36 -36
  87. package/docs/components/NumberInput/examples/NumberInput.md +13 -13
  88. package/docs/components/OptionsMenu/deprecated/options-menu.md +22 -22
  89. package/docs/components/OverflowMenu/examples/overflow-menu.md +20 -20
  90. package/docs/components/Page/deprecated/PageHeader.md +30 -30
  91. package/docs/components/Page/examples/Page.md +55 -54
  92. package/docs/components/Pagination/examples/Pagination.md +25 -25
  93. package/docs/components/Panel/examples/Panel.md +10 -10
  94. package/docs/components/Popover/examples/Popover.md +30 -30
  95. package/docs/components/Progress/examples/Progress.md +31 -31
  96. package/docs/components/ProgressStepper/examples/ProgressStepper.md +17 -17
  97. package/docs/components/Radio/examples/Radio.md +9 -9
  98. package/docs/components/Select/deprecated/Select.md +110 -110
  99. package/docs/components/Sidebar/examples/Sidebar.md +16 -16
  100. package/docs/components/SimpleList/examples/SimpleList.md +9 -9
  101. package/docs/components/Skeleton/examples/Skeleton.md +14 -14
  102. package/docs/components/SkipToContent/examples/SkipToContent.md +4 -4
  103. package/docs/components/Slider/examples/Slider.md +33 -33
  104. package/docs/components/Spinner/examples/Spinner.md +14 -14
  105. package/docs/components/Switch/examples/Switch.md +14 -14
  106. package/docs/components/TabContent/examples/TabContent.md +10 -10
  107. package/docs/components/Table/examples/Table.md +5395 -15077
  108. package/docs/components/Tabs/examples/Tabs.md +39 -39
  109. package/docs/components/TextInputGroup/examples/TextInputGroup.md +1 -1
  110. package/docs/components/Tile/examples/Tile.md +12 -12
  111. package/docs/components/Timestamp/examples/Timestamp.md +4 -4
  112. package/docs/components/Title/examples/Title.md +20 -20
  113. package/docs/components/ToggleGroup/examples/toggle-group.md +10 -10
  114. package/docs/components/Toolbar/examples/Toolbar.md +57 -57
  115. package/docs/components/Tooltip/examples/Tooltip.md +9 -9
  116. package/docs/components/TreeView/examples/TreeView.md +31 -31
  117. package/docs/components/Truncate/examples/Truncate.md +8 -8
  118. package/docs/components/Wizard/examples/Wizard.md +46 -46
  119. package/docs/demos/Banner/examples/Banner.md +1 -1
  120. package/docs/demos/Card/examples/Card.md +12 -19
  121. package/docs/demos/DataList/examples/DataList.md +179 -280
  122. package/docs/demos/DescriptionList/examples/DescriptionList.md +6 -0
  123. package/docs/demos/Masthead/examples/Masthead.md +4 -8
  124. package/docs/demos/Nav/examples/Nav.md +45 -149
  125. package/docs/demos/Page/examples/Page.md +3 -37
  126. package/docs/demos/Page/examples/Penta.md +119 -40
  127. package/docs/demos/Table/examples/Table.md +1531 -4970
  128. package/docs/demos/Tabs/examples/Tabs.md +118 -174
  129. package/docs/demos/Toolbar/examples/Toolbar.md +220 -600
  130. package/docs/layouts/Bullseye/examples/Bullseye.md +3 -3
  131. package/docs/layouts/Flex/examples/Flex.md +76 -76
  132. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  133. package/docs/layouts/Grid/examples/Grid.md +8 -8
  134. package/docs/layouts/Level/examples/Level.md +4 -4
  135. package/docs/layouts/Split/examples/Split.md +6 -6
  136. package/docs/layouts/Stack/examples/Stack.md +5 -5
  137. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  138. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  139. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +10 -10
  140. package/docs/utilities/BoxShadow/examples/box-shadow.md +20 -20
  141. package/docs/utilities/Display/examples/Display.md +9 -9
  142. package/docs/utilities/Flex/examples/Flex.md +32 -32
  143. package/docs/utilities/Float/examples/Float.md +2 -2
  144. package/docs/utilities/Sizing/examples/Sizing.md +41 -41
  145. package/docs/utilities/Spacing/examples/Spacing.md +11 -11
  146. package/docs/utilities/Text/examples/Text.md +28 -28
  147. package/package.json +2 -1
  148. package/patternfly-no-globals.css +363 -465
  149. package/patternfly-theme-dark-unversioned.css +363 -465
  150. package/patternfly.css +363 -465
  151. package/patternfly.min.css +1 -1
  152. package/patternfly.min.css.map +1 -1
  153. package/components/Table/themes/dark/table.scss +0 -16
package/components/Nav/nav.css CHANGED
@@ -1,4 +1,4 @@
1
- :root,
1
+ :where(:root),
2
2
  :where(.pf-v6-c-nav) {
3
3
  --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4
4
  --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -11,64 +11,65 @@
11
11
  --pf-v6-c-nav--PaddingInlineStart: var(--pf-t--global--spacer--md);
12
12
  --pf-v6-c-nav--PaddingInlineEnd: var(--pf-t--global--spacer--md);
13
13
  --pf-v6-c-nav--RowGap: var(--pf-t--global--spacer--lg);
14
- --pf-v6-c-nav--ColumnGap: var(--pf-t--global--spacer--sm);
14
+ --pf-v6-c-nav--ColumnGap: 0;
15
15
  --pf-v6-c-nav--AlignItems: baseline;
16
16
  --pf-v6-c-nav--FontSize: var(--pf-t--global--font--size--body--default);
17
17
  --pf-v6-c-nav--FontWeight: var(--pf-t--global--font--weight--body);
18
18
  --pf-v6-c-nav--LineHeight: var(--pf-t--global--font--line-height--body);
19
- --pf-v6-c-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
20
19
  --pf-v6-c-nav--OutlineOffset: calc(var(--pf-v6-global--spacer--xs) * -1);
20
+ --pf-v6-c-nav--BackgroundColor: transparent;
21
21
  --pf-v6-c-nav__list--ScrollSnapTypeAxis: x;
22
22
  --pf-v6-c-nav__list--ScrollSnapTypeStrictness: proximity;
23
23
  --pf-v6-c-nav__list--ScrollSnapType: var(--pf-v6-c-nav__list--ScrollSnapTypeAxis) var(--pf-v6-c-nav__list--ScrollSnapTypeStrictness);
24
24
  --pf-v6-c-nav__item--ScrollSnapAlign: end;
25
25
  --pf-v6-c-nav__section-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
26
26
  --pf-v6-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
27
+ --pf-v6-c-nav__section-title--PaddingBlockStart: var(--pf-v6-c-nav__link--PaddingBlockStart);
28
+ --pf-v6-c-nav__section-title--PaddingBlockEnd: var(--pf-v6-c-nav__link--PaddingBlockEnd);
29
+ --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
30
+ --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
27
31
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
28
32
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
29
33
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
34
+ --pf-v6-c-nav__link--ColumnGap: var(--pf-t--global--spacer--sm);
35
+ --pf-v6-c-nav__link--AlignItems: baseline;
30
36
  --pf-v6-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
31
37
  --pf-v6-c-nav__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
32
38
  --pf-v6-c-nav__link--WhiteSpace: normal;
33
39
  --pf-v6-c-nav__link--Color: var(--pf-t--global--text--color--subtle);
34
40
  --pf-v6-c-nav__link--hover--Color: var(--pf-t--global--text--color--regular);
35
- --pf-v6-c-nav__link--focus--Color: var(--pf-t--global--text--color--regular);
36
- --pf-v6-c-nav__link--active--Color: var(--pf-t--global--text--color--regular);
37
41
  --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
38
- --pf-v6-c-nav__link--focus--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
39
- --pf-v6-c-nav__link--active--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
40
42
  --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
41
43
  --pf-v6-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
42
44
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
43
45
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
44
46
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
45
47
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
46
- --pf-v6-c-nav__scroll-button--BorderRadius: var(--pf-t--global--border--radius--pill);
47
- --pf-v6-c-nav__scroll-button--button--InlinePadding: var(--pf-t--global--spacer--sm);
48
- --pf-v6-c-nav__scroll-button--button--icon--InlinePadding: var(--pf-t--global--spacer--sm);
49
- --pf-v6-c-nav__scroll-button--button--icon--IconSize: var(--pf-t--global--icon--size--md);
48
+ --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
49
+ --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderEndStartRadius: var(--pf-t--global--border--radius--pill);
50
+ --pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderStartEndRadius: var(--pf-t--global--border--radius--pill);
51
+ --pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderEndEndRadius: var(--pf-t--global--border--radius--pill);
50
52
  --pf-v6-c-nav__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
51
53
  --pf-v6-c-nav__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
52
54
  --pf-v6-c-nav__toggle--TranslateY: calc((var(--pf-v6-c-nav--LineHeight) * var(--pf-v6-c-nav--FontSize) / 2) - 50%);
53
- --pf-v6-c-nav__link--clickable-inset--InlineStart: 0;
54
- --pf-v6-c-nav__link--clickable-inset--InlineEnd: 0;
55
- --pf-v6-c-nav__link--clickable-inset--Inline: var(--pf-v6-c-nav__link--clickable-inset--InlineStart) var(--pf-v6-c-nav__link--clickable-inset--InlineEnd);
56
- --pf-v6-c-nav--m-horizontal--BorderRadius: var(--pf-t--global--border--radius--pill);
57
- --pf-v6-c-nav--m-horizontal__list--ColumnGap: var(--pf-t--global--spacer--xs);
58
- --pf-v6-c-nav--m-horizontal__list--PaddingBlockStart: var(--pf-t--global--spacer--sm);
59
- --pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
60
- --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: var(--pf-t--global--spacer--md);
61
- --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);
62
- --pf-v6-c-nav--m-horizontal__list--PaddingBlock: var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockStart) var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd);
63
- --pf-v6-c-nav--m-horizontal__list--PaddingInline: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineStart) var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd);
55
+ --pf-v6-c-nav--m-horizontal__list--PaddingBlockStart: 0;
56
+ --pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd: 0;
57
+ --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: 0;
58
+ --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: 0;
59
+ --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart: var(--pf-v6-c-nav__list--ColumnGap);
60
+ --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd: var(--pf-v6-c-nav__list--ColumnGap);
61
+ --pf-v6-c-nav--m-horizontal--m-subnav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
62
+ --pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius: var(--pf-t--global--border--radius--pill);
63
+ --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart: var(--pf-t--global--spacer--xs);
64
+ --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
65
+ --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart: var(--pf-t--global--spacer--md);
66
+ --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);
67
+ --pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineStart: var(--pf-v6-c-nav__list--ColumnGap);
68
+ --pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd: var(--pf-v6-c-nav__list--ColumnGap);
64
69
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
65
70
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
66
71
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
67
72
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
68
- --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlock: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart) var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
69
- --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInline: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart) var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd);
70
- --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlock: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart) var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
71
- --pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart: var(--pf-t--global--border--width--extra-strong);
72
73
  }
73
74
 
74
75
  .pf-v6-c-nav,
@@ -83,6 +84,7 @@
83
84
  --pf-v6-c-menu--MinWidth: 100%;
84
85
  position: relative;
85
86
  row-gap: var(--pf-v6-c-nav--RowGap);
87
+ column-gap: var(--pf-v6-c-nav--ColumnGap);
86
88
  max-width: 100%;
87
89
  padding-block-start: var(--pf-v6-c-nav--PaddingBlockStart);
88
90
  padding-block-end: var(--pf-v6-c-nav--PaddingBlockEnd);
@@ -93,9 +95,6 @@
93
95
  line-height: var(--pf-v6-c-nav--LineHeight);
94
96
  background-color: var(--pf-v6-c-nav--BackgroundColor);
95
97
  }
96
- .pf-v6-c-nav:where(.pf-m-scrollable) {
97
- padding-inline: var(--pf-v6-c-nav--m-scrollable__list--PaddingInline);
98
- }
99
98
  .pf-v6-c-nav.pf-m-overflow-hidden {
100
99
  overflow: hidden;
101
100
  }
@@ -147,10 +146,10 @@
147
146
  }
148
147
 
149
148
  .pf-v6-c-nav__section-title {
150
- padding-block-start: var(--pf-v6-c-nav__section-title--PaddingBlock, var(--pf-v6-c-nav__link--PaddingBlockStart));
151
- padding-block-end: var(--pf-v6-c-nav__section-title--PaddingBlock, var(--pf-v6-c-nav__link--PaddingBlockEnd));
152
- padding-inline-start: var(--pf-v6-c-nav__section-title--PaddingInline, var(--pf-v6-c-nav__link--PaddingInlineStart));
153
- padding-inline-end: var(--pf-v6-c-nav__section-title--PaddingInline, var(--pf-v6-c-nav__link--PaddingInlineEnd));
149
+ padding-block-start: var(--pf-v6-c-nav__section-title--PaddingBlockStart);
150
+ padding-block-end: var(--pf-v6-c-nav__section-title--PaddingBlockEnd);
151
+ padding-inline-start: var(--pf-v6-c-nav__section-title--PaddingInlineStart);
152
+ padding-inline-end: var(--pf-v6-c-nav__section-title--PaddingInlineEnd);
154
153
  font-size: var(--pf-v6-c-nav__section-title--FontSize, inherit);
155
154
  font-weight: var(--pf-v6-c-nav__section-title--FontWeight);
156
155
  color: var(--pf-v6-c-nav__section-title--Color);
@@ -159,8 +158,8 @@
159
158
  .pf-v6-c-nav__link {
160
159
  position: relative;
161
160
  display: flex;
162
- column-gap: var(--pf-v6-c-nav__link--ColumnGap, var(--pf-v6-c-nav--ColumnGap));
163
- align-items: var(--pf-v6-c-nav__link--AlignItems, var(--pf-v6-c-nav--AlignItems));
161
+ column-gap: var(--pf-v6-c-nav__link--ColumnGap);
162
+ align-items: var(--pf-v6-c-nav__link--AlignItems);
164
163
  padding-block-start: var(--pf-v6-c-nav__link--PaddingBlockStart);
165
164
  padding-block-end: var(--pf-v6-c-nav__link--PaddingBlockEnd);
166
165
  padding-inline-start: var(--pf-v6-c-nav__link--PaddingInlineStart);
@@ -174,27 +173,13 @@
174
173
  border: none;
175
174
  border-radius: var(--pf-v6-c-nav__link--BorderRadius);
176
175
  }
177
- .pf-v6-c-nav__link::before {
178
- position: absolute;
179
- inset-block: var(--pf-v6-c-nav__link--clickable-inset--Block);
180
- inset-inline: var(--pf-v6-c-nav__link--clickable-inset--Inline);
181
- content: "";
182
- }
183
176
  .pf-v6-c-nav__link[aria-expanded=true]::before {
184
177
  inset-block-end: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
185
178
  }
186
- .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover {
179
+ .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus {
187
180
  color: var(--pf-v6-c-nav__link--hover--Color);
188
181
  background-color: var(--pf-v6-c-nav__link--hover--BackgroundColor);
189
182
  }
190
- .pf-v6-c-nav__link:focus {
191
- color: var(--pf-v6-c-nav__link--focus--Color);
192
- background-color: var(--pf-v6-c-nav__link--focus--BackgroundColor);
193
- }
194
- .pf-v6-c-nav__link:active {
195
- color: var(--pf-v6-c-nav__link--active--Color);
196
- background-color: var(--pf-v6-c-nav__link--active--BackgroundColor);
197
- }
198
183
  .pf-v6-c-nav__link.pf-m-current, .pf-v6-c-nav__link.pf-m-current:hover {
199
184
  color: var(--pf-v6-c-nav__link--m-current--Color);
200
185
  background-color: var(--pf-v6-c-nav__link--m-current--BackgroundColor);
@@ -224,68 +209,36 @@
224
209
 
225
210
  .pf-v6-c-nav__scroll-button {
226
211
  position: relative;
227
- display: flex;
228
- flex: none;
229
- align-items: stretch;
230
- justify-items: stretch;
231
- min-width: var(--pf-v6-c-nav__scroll-button--MinWidth);
232
- }
233
- .pf-v6-c-nav__scroll-button :is(button) {
234
- --pf-v6-c-button--Display: flex;
235
- --pf-v6-c-button--Flex: 1;
236
- --pf-v6-c-button--AlignItems: center;
237
- --pf-v6-c-button--JustifyContent: center;
238
- padding-inline: var(--pf-v6-c-nav__scroll-button--button--InlinePadding);
239
- }
240
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__scroll-button :is(button) .pf-v6-c-button__icon {
241
- scale: -1 1;
242
- }
243
-
244
- .pf-v6-c-nav__scroll-button :is(button) > * {
245
- display: inline-block;
246
- padding-inline: var(--pf-v6-c-nav__scroll-button--button--icon--InlinePadding);
247
- }
248
- .pf-v6-c-nav__scroll-button :is(button) > * > * {
249
- min-width: var(--pf-v6-c-nav__scroll-button--button--icon--IconSize);
250
212
  }
251
213
  .pf-v6-c-nav__scroll-button::before {
252
214
  position: absolute;
253
- inset-block: 0;
254
- inset-inline: 0;
215
+ inset: 0;
255
216
  content: "";
256
- outline-offset: var(--pf-v6-c-nav--OutlineOffset);
257
217
  }
258
- .pf-v6-c-nav__scroll-button:first-of-type {
259
- border-start-start-radius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
260
- border-end-start-radius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
261
- }
262
- .pf-v6-c-nav__scroll-button:first-of-type button {
263
- --pf-v6-c-button--BorderStartStartRadius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
264
- --pf-v6-c-button--BorderStartEndRadius: 0;
265
- --pf-v6-c-button--BorderEndStartRadius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
266
- --pf-v6-c-button--BorderEndEndRadius: 0;
218
+ .pf-v6-c-nav__scroll-button:first-of-type .pf-v6-c-button {
219
+ --pf-v6-c-button--BorderStartStartRadius: var(--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius);
220
+ --pf-v6-c-button--BorderEndStartRadius: var(--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderEndStartRadius);
267
221
  }
268
222
  .pf-v6-c-nav__scroll-button:first-of-type::before {
269
223
  border-inline-end: var(--pf-v6-c-nav__scroll-button--BorderWidth) solid var(--pf-v6-c-nav__scroll-button--BorderColor);
270
224
  }
271
- .pf-v6-c-nav__scroll-button:last-of-type {
272
- border-start-end-radius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
273
- border-end-end-radius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
274
- }
275
- .pf-v6-c-nav__scroll-button:last-of-type button {
276
- --pf-v6-c-button--BorderStartStartRadius: 0;
277
- --pf-v6-c-button--BorderStartEndRadius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
278
- --pf-v6-c-button--BorderEndStartRadius: 0;
279
- --pf-v6-c-button--BorderEndEndRadius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
225
+ .pf-v6-c-nav__scroll-button:last-of-type .pf-v6-c-button {
226
+ --pf-v6-c-button--BorderStartEndRadius: var(--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderStartEndRadius);
227
+ --pf-v6-c-button--BorderEndEndRadius: var(--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderEndEndRadius);
280
228
  }
281
229
  .pf-v6-c-nav__scroll-button:last-of-type::before {
282
230
  border-inline-start: var(--pf-v6-c-nav__scroll-button--BorderWidth) solid var(--pf-v6-c-nav__scroll-button--BorderColor);
283
231
  }
232
+ .pf-v6-c-nav__scroll-button .pf-v6-c-button {
233
+ outline-offset: var(--pf-v6-c-nav--OutlineOffset);
234
+ }
235
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__scroll-button .pf-v6-c-button > * {
236
+ scale: -1 1;
237
+ }
284
238
 
285
239
  .pf-v6-c-nav:where(.pf-m-horizontal) {
286
240
  padding: 0;
287
241
  overflow: hidden;
288
- border-radius: var(--pf-v6-c-nav--m-horizontal--BorderRadius);
289
242
  }
290
243
  .pf-v6-c-nav:where(.pf-m-horizontal),
291
244
  .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__section,
@@ -295,11 +248,14 @@
295
248
  display: flex;
296
249
  }
297
250
  .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list {
298
- padding-block: var(--pf-v6-c-nav--m-horizontal__list--PaddingBlock);
299
- padding-inline: var(--pf-v6-c-nav--m-horizontal__list--PaddingInline);
251
+ padding-block-start: var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockStart);
252
+ padding-block-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd);
253
+ padding-inline-start: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineStart);
254
+ padding-inline-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd);
300
255
  overflow-x: auto;
301
256
  white-space: nowrap;
302
257
  scroll-snap-type: var(--pf-v6-c-nav__list--ScrollSnapType);
258
+ scroll-padding-inline-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd);
303
259
  -webkit-overflow-scrolling: touch;
304
260
  scrollbar-width: none;
305
261
  -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -310,21 +266,19 @@
310
266
  .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__link {
311
267
  outline-offset: var(--pf-v6-c-nav--OutlineOffset);
312
268
  }
313
- .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__link::before {
314
- inset-block-start: calc(var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockStart) * -1);
315
- inset-block-end: calc(var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd) * -1);
316
- inset-inline-start: calc(var(--pf-v6-c-nav--m-horizontal__list--ColumnGap) / 2 * -1);
317
- inset-inline-end: calc(var(--pf-v6-c-nav--m-horizontal__list--ColumnGap) / 2 * -1);
318
- }
319
269
  .pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav {
270
+ --pf-v6-c-nav--BackgroundColor: var(--pf-v6-c-nav--m-horizontal--m-subnav--BackgroundColor);
271
+ --pf-v6-c-nav--m-horizontal__list--PaddingBlockStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart);
272
+ --pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
273
+ --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart);
274
+ --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd);
275
+ --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart: var(--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineStart);
276
+ --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd);
320
277
  --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart);
321
278
  --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd);
322
- --pf-v6-c-nav__list--PaddingBlock: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart) var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
323
- --pf-v6-c-nav__list--PaddingInline: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart) var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart);
324
- }
325
- .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__scroll-button + .pf-v6-c-nav__list {
326
- padding-inline-start: var(--pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart);
279
+ border-radius: var(--pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius);
327
280
  }
328
- .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__scroll-button + .pf-v6-c-nav__list > :first-child .pf-v6-c-nav__link::before {
329
- inset-inline-start: calc(var(--pf-v6-c-nav--m-horizontal__list--ColumnGap) / 2 * -1 - var(--pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart));
281
+ .pf-v6-c-nav:where(.pf-m-horizontal).pf-m-scrollable {
282
+ --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart);
283
+ --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd);
330
284
  }