@patternfly/patternfly 6.5.0-prerelease.62 → 6.5.0-prerelease.64

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 (55) hide show
  1. package/components/Button/button.css +2 -2
  2. package/components/Button/button.scss +3 -3
  3. package/components/ClipboardCopy/clipboard-copy.css +7 -1
  4. package/components/ClipboardCopy/clipboard-copy.scss +10 -1
  5. package/components/Menu/menu.css +26 -19
  6. package/components/Menu/menu.scss +26 -19
  7. package/components/MenuToggle/menu-toggle.css +9 -5
  8. package/components/MenuToggle/menu-toggle.scss +12 -5
  9. package/components/_index.css +44 -27
  10. package/docs/components/Breadcrumb/examples/Breadcrumb.md +13 -1
  11. package/docs/components/CalendarMonth/examples/CalendarMonth.md +52 -4
  12. package/docs/components/Card/examples/Card.md +130 -10
  13. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +39 -38
  14. package/docs/components/DataList/examples/DataList.md +221 -17
  15. package/docs/components/DualListSelector/examples/DualListSelector.md +234 -18
  16. package/docs/components/Hint/examples/Hint.md +39 -3
  17. package/docs/components/InlineEdit/examples/InlineEdit.md +26 -2
  18. package/docs/components/InputGroup/examples/InputGroup.md +13 -1
  19. package/docs/components/Login/examples/Login.md +13 -1
  20. package/docs/components/Menu/examples/Menu.md +195 -15
  21. package/docs/components/MenuToggle/examples/MenuToggle.md +1331 -100
  22. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +481 -37
  23. package/docs/components/OverflowMenu/examples/overflow-menu.md +65 -5
  24. package/docs/components/Page/examples/Page.md +62 -15
  25. package/docs/components/Pagination/examples/Pagination.md +169 -13
  26. package/docs/components/Table/examples/Table.md +3461 -269
  27. package/docs/components/Toolbar/examples/Toolbar.md +507 -39
  28. package/docs/demos/AboutModal/examples/AboutModal.md +34 -4
  29. package/docs/demos/Alert/examples/Alert.md +102 -12
  30. package/docs/demos/BackToTop/examples/BackToTop.md +34 -4
  31. package/docs/demos/Banner/examples/Banner.md +68 -8
  32. package/docs/demos/Card/examples/Card.md +78 -6
  33. package/docs/demos/CardView/examples/CardView.md +214 -22
  34. package/docs/demos/Compass/examples/Compass.md +431 -56
  35. package/docs/demos/Dashboard/examples/Dashboard.md +71 -11
  36. package/docs/demos/DataList/examples/DataList.md +401 -53
  37. package/docs/demos/DescriptionList/examples/DescriptionList.md +115 -13
  38. package/docs/demos/Drawer/examples/Drawer.md +167 -17
  39. package/docs/demos/JumpLinks/examples/JumpLinks.md +188 -20
  40. package/docs/demos/Masthead/examples/Masthead.md +228 -30
  41. package/docs/demos/Modal/examples/Modal.md +204 -24
  42. package/docs/demos/Nav/examples/Nav.md +184 -28
  43. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1015 -85
  44. package/docs/demos/Page/examples/Page.md +503 -58
  45. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +649 -97
  46. package/docs/demos/Skeleton/examples/Skeleton.md +34 -4
  47. package/docs/demos/Table/examples/Table.md +2641 -349
  48. package/docs/demos/Tabs/examples/Tabs.md +295 -31
  49. package/docs/demos/Toolbar/examples/Toolbar.md +675 -63
  50. package/docs/demos/Wizard/examples/Wizard.md +306 -36
  51. package/package.json +1 -1
  52. package/patternfly-no-globals.css +44 -27
  53. package/patternfly.css +44 -27
  54. package/patternfly.min.css +1 -1
  55. package/patternfly.min.css.map +1 -1
@@ -1806,13 +1806,13 @@ button.pf-v6-c-breadcrumb__link {
1806
1806
  --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
1807
1807
  --pf-v6-c-button--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1808
1808
  --pf-v6-c-button--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1809
- --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
1809
+ --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
1810
1810
  --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1811
1811
  --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1812
1812
  --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1813
1813
  --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1814
1814
  --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
1815
- --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
1815
+ --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--control--default);
1816
1816
  --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
1817
1817
  --pf-v6-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
1818
1818
  --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -3291,7 +3291,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3291
3291
  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3292
3292
  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
3293
3293
  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
3294
- --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3294
+ --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--default);
3295
3295
  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth: var(--pf-t--global--border--width--control--default);
3296
3296
  --pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
3297
3297
  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
@@ -3299,6 +3299,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3299
3299
  --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--control--default);
3300
3300
  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
3301
3301
  --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
3302
+ --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
3303
+ --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor: var(--pf-t--global--border--color--control--read-only);
3302
3304
  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
3303
3305
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
3304
3306
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -3327,6 +3329,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3327
3329
  .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-truncate {
3328
3330
  display: inline-flex;
3329
3331
  }
3332
+ .pf-v6-c-clipboard-copy.pf-m-readonly {
3333
+ --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor);
3334
+ --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor);
3335
+ }
3330
3336
 
3331
3337
  .pf-v6-c-clipboard-copy__group {
3332
3338
  display: flex;
@@ -11151,17 +11157,19 @@ ul.pf-v6-c-list {
11151
11157
  }
11152
11158
 
11153
11159
  .pf-v6-c-menu {
11154
- --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
11160
+ --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--xs);
11155
11161
  --pf-v6-c-menu--Width: auto;
11156
11162
  --pf-v6-c-menu--MinWidth: auto;
11157
- --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11158
- --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11163
+ --pf-v6-c-menu--PaddingBlockStart: var(--pf-t--global--spacer--xs);
11164
+ --pf-v6-c-menu--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
11165
+ --pf-v6-c-menu--PaddingInlineStart: var(--pf-t--global--spacer--xs);
11166
+ --pf-v6-c-menu--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
11159
11167
  --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11160
11168
  --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
11161
11169
  --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
11162
11170
  --pf-v6-c-menu--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11163
11171
  --pf-v6-c-menu--BorderColor: var(--pf-t--global--border--color--high-contrast);
11164
- --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
11172
+ --pf-v6-c-menu--BorderRadius: calc(var(--pf-v6-c-menu__item--BorderRadius) + var(--pf-v6-c-menu--PaddingBlockStart));
11165
11173
  --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
11166
11174
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
11167
11175
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -11202,12 +11210,13 @@ ul.pf-v6-c-list {
11202
11210
  --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
11203
11211
  --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
11204
11212
  --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11205
- --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--sm);
11206
- --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--sm);
11213
+ --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--xs);
11214
+ --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--xs);
11215
+ --pf-v6-c-menu__item--BorderRadius: var(--pf-t--global--border--radius--small);
11207
11216
  --pf-v6-c-menu__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11208
11217
  --pf-v6-c-menu__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11209
- --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11210
- --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11218
+ --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--md);
11219
+ --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11211
11220
  --pf-v6-c-menu__item--FontSize: var(--pf-t--global--font--size--body--default);
11212
11221
  --pf-v6-c-menu__item--LineHeight: var(--pf-t--global--font--line-height--body);
11213
11222
  --pf-v6-c-menu__item--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -11216,22 +11225,23 @@ ul.pf-v6-c-list {
11216
11225
  --pf-v6-c-menu__item--m-disabled--Color: var(--pf-t--global--text--color--disabled);
11217
11226
  --pf-v6-c-menu__header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11218
11227
  --pf-v6-c-menu__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11219
- --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11220
- --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11228
+ --pf-v6-c-menu__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
11229
+ --pf-v6-c-menu__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11221
11230
  --pf-v6-c-menu__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11222
11231
  --pf-v6-c-menu__group-title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11223
- --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11224
- --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11232
+ --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--md);
11233
+ --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11225
11234
  --pf-v6-c-menu__breadcrumb--PaddingBlockStart: 0;
11226
11235
  --pf-v6-c-menu__breadcrumb--PaddingBlockEnd: 0;
11227
- --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11228
- --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11236
+ --pf-v6-c-menu__breadcrumb--PaddingInlineStart: var(--pf-t--global--spacer--md);
11237
+ --pf-v6-c-menu__breadcrumb--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11229
11238
  --pf-v6-c-menu__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11230
11239
  --pf-v6-c-menu__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11231
- --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11232
- --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11240
+ --pf-v6-c-menu__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
11241
+ --pf-v6-c-menu__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
11233
11242
  --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--sm);
11234
- --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--subtle);
11243
+ --pf-v6-c-menu__group-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
11244
+ --pf-v6-c-menu__group-title--Color: var(--pf-t--global--text--color--regular);
11235
11245
  --pf-v6-c-menu__item-description--FontSize: var(--pf-t--global--font--size--body--sm);
11236
11246
  --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
11237
11247
  --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
@@ -11393,6 +11403,8 @@ ul.pf-v6-c-list {
11393
11403
  min-width: var(--pf-v6-c-menu--MinWidth);
11394
11404
  padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
11395
11405
  padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
11406
+ padding-inline-start: var(--pf-v6-c-menu--PaddingInlineStart);
11407
+ padding-inline-end: var(--pf-v6-c-menu--PaddingInlineEnd);
11396
11408
  overflow: hidden;
11397
11409
  color: var(--pf-v6-c-menu--Color);
11398
11410
  background-color: var(--pf-v6-c-menu--BackgroundColor);
@@ -11587,8 +11599,8 @@ ul.pf-v6-c-list {
11587
11599
  inset: 0;
11588
11600
  content: "";
11589
11601
  background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
11590
- border-block-start: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
11591
- border-block-end: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
11602
+ border: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
11603
+ border-radius: var(--pf-v6-c-menu__item--BorderRadius);
11592
11604
  transition: inherit;
11593
11605
  }
11594
11606
  .pf-v6-c-menu__list-item.pf-m-load {
@@ -11638,6 +11650,7 @@ ul.pf-v6-c-list {
11638
11650
  text-decoration-line: none;
11639
11651
  background-color: var(--pf-v6-c-menu__item--BackgroundColor);
11640
11652
  border: 0;
11653
+ border-radius: var(--pf-v6-c-menu__item--BorderRadius);
11641
11654
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
11642
11655
  --pf-v6-hidden-visible--visible--Display: flex;
11643
11656
  --pf-v6-hidden-visible--hidden--Display: none;
@@ -11801,7 +11814,7 @@ ul.pf-v6-c-list {
11801
11814
  --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
11802
11815
  --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
11803
11816
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
11804
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
11817
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--control--default);
11805
11818
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default);
11806
11819
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
11807
11820
  --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
@@ -11839,7 +11852,7 @@ ul.pf-v6-c-list {
11839
11852
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
11840
11853
  --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
11841
11854
  --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
11842
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
11855
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--action--default);
11843
11856
  --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
11844
11857
  --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
11845
11858
  --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -11857,7 +11870,7 @@ ul.pf-v6-c-list {
11857
11870
  --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
11858
11871
  --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
11859
11872
  --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
11860
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
11873
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--action--default);
11861
11874
  --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
11862
11875
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
11863
11876
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
@@ -11872,11 +11885,12 @@ ul.pf-v6-c-list {
11872
11885
  --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
11873
11886
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
11874
11887
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
11888
+ --pf-v6-c-menu-toggle--m-form--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
11875
11889
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
11876
11890
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
11877
11891
  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
11878
11892
  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
11879
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
11893
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--action--default);
11880
11894
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
11881
11895
  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
11882
11896
  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
@@ -11906,7 +11920,7 @@ ul.pf-v6-c-list {
11906
11920
  --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
11907
11921
  --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
11908
11922
  --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
11909
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
11923
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--control--default);
11910
11924
  --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
11911
11925
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
11912
11926
  --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -12026,6 +12040,9 @@ ul.pf-v6-c-list {
12026
12040
  .pf-v6-c-menu-toggle.pf-m-full-width {
12027
12041
  width: 100%;
12028
12042
  }
12043
+ .pf-v6-c-menu-toggle.pf-m-form {
12044
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-form--BorderRadius);
12045
+ }
12029
12046
  .pf-v6-c-menu-toggle.pf-m-plain {
12030
12047
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
12031
12048
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
@@ -389,7 +389,19 @@ cssPrefix: pf-v6-c-breadcrumb
389
389
  </span>
390
390
  <span class="pf-v6-c-menu-toggle__controls">
391
391
  <span class="pf-v6-c-menu-toggle__toggle-icon">
392
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
392
+ <svg
393
+ class="pf-v6-svg"
394
+ viewBox="0 0 20 20"
395
+ fill="currentColor"
396
+ aria-hidden="true"
397
+ role="img"
398
+ width="1em"
399
+ height="1em"
400
+ >
401
+ <path
402
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
403
+ />
404
+ </svg>
393
405
  </span>
394
406
  </span>
395
407
  </button>
@@ -45,7 +45,19 @@ cssPrefix: pf-v6-c-calendar-month
45
45
  <span class="pf-v6-c-menu-toggle__text">October</span>
46
46
  <span class="pf-v6-c-menu-toggle__controls">
47
47
  <span class="pf-v6-c-menu-toggle__toggle-icon">
48
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
48
+ <svg
49
+ class="pf-v6-svg"
50
+ viewBox="0 0 20 20"
51
+ fill="currentColor"
52
+ aria-hidden="true"
53
+ role="img"
54
+ width="1em"
55
+ height="1em"
56
+ >
57
+ <path
58
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
59
+ />
60
+ </svg>
49
61
  </span>
50
62
  </span>
51
63
  </button>
@@ -423,7 +435,19 @@ cssPrefix: pf-v6-c-calendar-month
423
435
  <span class="pf-v6-c-menu-toggle__text">October</span>
424
436
  <span class="pf-v6-c-menu-toggle__controls">
425
437
  <span class="pf-v6-c-menu-toggle__toggle-icon">
426
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
438
+ <svg
439
+ class="pf-v6-svg"
440
+ viewBox="0 0 20 20"
441
+ fill="currentColor"
442
+ aria-hidden="true"
443
+ role="img"
444
+ width="1em"
445
+ height="1em"
446
+ >
447
+ <path
448
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
449
+ />
450
+ </svg>
427
451
  </span>
428
452
  </span>
429
453
  </button>
@@ -826,7 +850,19 @@ cssPrefix: pf-v6-c-calendar-month
826
850
  <span class="pf-v6-c-menu-toggle__text">October</span>
827
851
  <span class="pf-v6-c-menu-toggle__controls">
828
852
  <span class="pf-v6-c-menu-toggle__toggle-icon">
829
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
853
+ <svg
854
+ class="pf-v6-svg"
855
+ viewBox="0 0 20 20"
856
+ fill="currentColor"
857
+ aria-hidden="true"
858
+ role="img"
859
+ width="1em"
860
+ height="1em"
861
+ >
862
+ <path
863
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
864
+ />
865
+ </svg>
830
866
  </span>
831
867
  </span>
832
868
  </button>
@@ -1229,7 +1265,19 @@ cssPrefix: pf-v6-c-calendar-month
1229
1265
  <span class="pf-v6-c-menu-toggle__text">October</span>
1230
1266
  <span class="pf-v6-c-menu-toggle__controls">
1231
1267
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1232
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1268
+ <svg
1269
+ class="pf-v6-svg"
1270
+ viewBox="0 0 20 20"
1271
+ fill="currentColor"
1272
+ aria-hidden="true"
1273
+ role="img"
1274
+ width="1em"
1275
+ height="1em"
1276
+ >
1277
+ <path
1278
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
1279
+ />
1280
+ </svg>
1233
1281
  </span>
1234
1282
  </span>
1235
1283
  </button>
@@ -105,7 +105,19 @@ cssPrefix: pf-v6-c-card
105
105
  id="card-action-example-1-menu-toggle-kebab"
106
106
  >
107
107
  <span class="pf-v6-c-menu-toggle__icon">
108
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
108
+ <svg
109
+ class="pf-v6-svg"
110
+ viewBox="0 0 32 32"
111
+ fill="currentColor"
112
+ aria-hidden="true"
113
+ role="img"
114
+ width="1em"
115
+ height="1em"
116
+ >
117
+ <path
118
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
119
+ />
120
+ </svg>
109
121
  </span>
110
122
  </button>
111
123
  <div class="pf-v6-c-check pf-m-standalone">
@@ -146,7 +158,19 @@ cssPrefix: pf-v6-c-card
146
158
  id="card-action-example-2-menu-toggle-kebab"
147
159
  >
148
160
  <span class="pf-v6-c-menu-toggle__icon">
149
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
161
+ <svg
162
+ class="pf-v6-svg"
163
+ viewBox="0 0 32 32"
164
+ fill="currentColor"
165
+ aria-hidden="true"
166
+ role="img"
167
+ width="1em"
168
+ height="1em"
169
+ >
170
+ <path
171
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
172
+ />
173
+ </svg>
150
174
  </span>
151
175
  </button>
152
176
  <div class="pf-v6-c-check pf-m-standalone">
@@ -189,7 +213,19 @@ cssPrefix: pf-v6-c-card
189
213
  id="card-subtitle-menu-toggle-kebab"
190
214
  >
191
215
  <span class="pf-v6-c-menu-toggle__icon">
192
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
216
+ <svg
217
+ class="pf-v6-svg"
218
+ viewBox="0 0 32 32"
219
+ fill="currentColor"
220
+ aria-hidden="true"
221
+ role="img"
222
+ width="1em"
223
+ height="1em"
224
+ >
225
+ <path
226
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
227
+ />
228
+ </svg>
193
229
  </span>
194
230
  </button>
195
231
  <div class="pf-v6-c-check pf-m-standalone">
@@ -300,7 +336,19 @@ cssPrefix: pf-v6-c-card
300
336
  id="card-image-action-subtitle-menu-toggle-kebab"
301
337
  >
302
338
  <span class="pf-v6-c-menu-toggle__icon">
303
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
339
+ <svg
340
+ class="pf-v6-svg"
341
+ viewBox="0 0 32 32"
342
+ fill="currentColor"
343
+ aria-hidden="true"
344
+ role="img"
345
+ width="1em"
346
+ height="1em"
347
+ >
348
+ <path
349
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
350
+ />
351
+ </svg>
304
352
  </span>
305
353
  </button>
306
354
  <div class="pf-v6-c-check pf-m-standalone">
@@ -342,7 +390,19 @@ cssPrefix: pf-v6-c-card
342
390
  id="card-action-example-3-menu-toggle-kebab"
343
391
  >
344
392
  <span class="pf-v6-c-menu-toggle__icon">
345
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
393
+ <svg
394
+ class="pf-v6-svg"
395
+ viewBox="0 0 32 32"
396
+ fill="currentColor"
397
+ aria-hidden="true"
398
+ role="img"
399
+ width="1em"
400
+ height="1em"
401
+ >
402
+ <path
403
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
404
+ />
405
+ </svg>
346
406
  </span>
347
407
  </button>
348
408
  <div class="pf-v6-c-check pf-m-standalone">
@@ -1605,7 +1665,19 @@ cssPrefix: pf-v6-c-card
1605
1665
  id="card-expandable-example-menu-toggle-kebab"
1606
1666
  >
1607
1667
  <span class="pf-v6-c-menu-toggle__icon">
1608
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1668
+ <svg
1669
+ class="pf-v6-svg"
1670
+ viewBox="0 0 32 32"
1671
+ fill="currentColor"
1672
+ aria-hidden="true"
1673
+ role="img"
1674
+ width="1em"
1675
+ height="1em"
1676
+ >
1677
+ <path
1678
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1679
+ />
1680
+ </svg>
1609
1681
  </span>
1610
1682
  </button>
1611
1683
  <div class="pf-v6-c-check pf-m-standalone">
@@ -1680,7 +1752,19 @@ cssPrefix: pf-v6-c-card
1680
1752
  id="card-expandable-image-example-menu-toggle-kebab"
1681
1753
  >
1682
1754
  <span class="pf-v6-c-menu-toggle__icon">
1683
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1755
+ <svg
1756
+ class="pf-v6-svg"
1757
+ viewBox="0 0 32 32"
1758
+ fill="currentColor"
1759
+ aria-hidden="true"
1760
+ role="img"
1761
+ width="1em"
1762
+ height="1em"
1763
+ >
1764
+ <path
1765
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1766
+ />
1767
+ </svg>
1684
1768
  </span>
1685
1769
  </button>
1686
1770
  <div class="pf-v6-c-check pf-m-standalone">
@@ -1740,7 +1824,19 @@ cssPrefix: pf-v6-c-card
1740
1824
  id="card-expanded-example-menu-toggle-kebab"
1741
1825
  >
1742
1826
  <span class="pf-v6-c-menu-toggle__icon">
1743
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1827
+ <svg
1828
+ class="pf-v6-svg"
1829
+ viewBox="0 0 32 32"
1830
+ fill="currentColor"
1831
+ aria-hidden="true"
1832
+ role="img"
1833
+ width="1em"
1834
+ height="1em"
1835
+ >
1836
+ <path
1837
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1838
+ />
1839
+ </svg>
1744
1840
  </span>
1745
1841
  </button>
1746
1842
  <div class="pf-v6-c-check pf-m-standalone">
@@ -1783,7 +1879,19 @@ cssPrefix: pf-v6-c-card
1783
1879
  id="card-full-height-example-menu-toggle-kebab"
1784
1880
  >
1785
1881
  <span class="pf-v6-c-menu-toggle__icon">
1786
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1882
+ <svg
1883
+ class="pf-v6-svg"
1884
+ viewBox="0 0 32 32"
1885
+ fill="currentColor"
1886
+ aria-hidden="true"
1887
+ role="img"
1888
+ width="1em"
1889
+ height="1em"
1890
+ >
1891
+ <path
1892
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1893
+ />
1894
+ </svg>
1787
1895
  </span>
1788
1896
  </button>
1789
1897
  <div class="pf-v6-c-check pf-m-standalone">
@@ -1826,7 +1934,19 @@ cssPrefix: pf-v6-c-card
1826
1934
  id="card-toggle-on-right-example-menu-toggle-kebab"
1827
1935
  >
1828
1936
  <span class="pf-v6-c-menu-toggle__icon">
1829
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1937
+ <svg
1938
+ class="pf-v6-svg"
1939
+ viewBox="0 0 32 32"
1940
+ fill="currentColor"
1941
+ aria-hidden="true"
1942
+ role="img"
1943
+ width="1em"
1944
+ height="1em"
1945
+ >
1946
+ <path
1947
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1948
+ />
1949
+ </svg>
1830
1950
  </span>
1831
1951
  </button>
1832
1952
  <div class="pf-v6-c-check pf-m-standalone">