@patternfly/patternfly 6.5.0-prerelease.45 → 6.5.0-prerelease.47

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 (94) hide show
  1. package/components/Accordion/accordion.css +1 -1
  2. package/components/Accordion/accordion.scss +1 -1
  3. package/components/Card/card.css +1 -1
  4. package/components/Card/card.scss +1 -1
  5. package/components/ClipboardCopy/clipboard-copy.css +1 -1
  6. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  7. package/components/DataList/data-list.css +1 -1
  8. package/components/DataList/data-list.scss +1 -1
  9. package/components/DualListSelector/dual-list-selector.css +1 -1
  10. package/components/DualListSelector/dual-list-selector.scss +1 -1
  11. package/components/ExpandableSection/expandable-section.css +2 -2
  12. package/components/ExpandableSection/expandable-section.scss +2 -2
  13. package/components/Form/form.css +1 -1
  14. package/components/Form/form.scss +1 -1
  15. package/components/JumpLinks/jump-links.css +1 -1
  16. package/components/JumpLinks/jump-links.scss +1 -1
  17. package/components/Nav/nav.css +1 -1
  18. package/components/Nav/nav.scss +1 -1
  19. package/components/NotificationDrawer/notification-drawer.css +11 -3
  20. package/components/NotificationDrawer/notification-drawer.scss +12 -5
  21. package/components/Table/table.css +2 -2
  22. package/components/Table/table.scss +2 -2
  23. package/components/Tabs/tabs.css +2 -2
  24. package/components/Tabs/tabs.scss +2 -2
  25. package/components/Toolbar/toolbar.css +1 -1
  26. package/components/Toolbar/toolbar.scss +1 -1
  27. package/components/TreeView/tree-view.css +1 -1
  28. package/components/TreeView/tree-view.scss +1 -1
  29. package/components/Wizard/wizard.css +1 -1
  30. package/components/Wizard/wizard.scss +1 -1
  31. package/components/_index.css +28 -20
  32. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  33. package/docs/components/Accordion/examples/Accordion.md +390 -30
  34. package/docs/components/ActionList/examples/ActionList.md +10 -10
  35. package/docs/components/Alert/examples/Alert.md +30 -30
  36. package/docs/components/Banner/examples/Banner.md +65 -5
  37. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
  38. package/docs/components/CalendarMonth/examples/CalendarMonth.md +16 -16
  39. package/docs/components/Card/examples/Card.md +52 -4
  40. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +78 -6
  41. package/docs/components/CodeBlock/examples/CodeBlock.md +26 -2
  42. package/docs/components/DataList/examples/DataList.md +221 -17
  43. package/docs/components/Drawer/examples/Drawer.md +42 -42
  44. package/docs/components/DualListSelector/examples/DualListSelector.md +961 -85
  45. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  46. package/docs/components/Form/examples/Form.md +78 -6
  47. package/docs/components/Icon/examples/Icon.md +91 -7
  48. package/docs/components/InlineEdit/examples/InlineEdit.md +16 -16
  49. package/docs/components/JumpLinks/examples/JumpLinks.md +52 -4
  50. package/docs/components/Label/examples/Label.md +2812 -220
  51. package/docs/components/Menu/examples/Menu.md +1456 -112
  52. package/docs/components/MenuToggle/examples/MenuToggle.md +13 -1
  53. package/docs/components/ModalBox/examples/ModalBox.md +121 -37
  54. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +57 -21
  55. package/docs/components/Nav/examples/Navigation.md +710 -62
  56. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +576 -48
  57. package/docs/components/Popover/examples/Popover.md +110 -38
  58. package/docs/components/ProgressStepper/examples/ProgressStepper.md +273 -21
  59. package/docs/components/Slider/examples/Slider.md +52 -4
  60. package/docs/components/Table/examples/Table.md +819 -63
  61. package/docs/components/Tabs/examples/Tabs.md +1959 -339
  62. package/docs/components/TextInputGroup/examples/TextInputGroup.md +509 -41
  63. package/docs/components/Toolbar/examples/Toolbar.md +48 -48
  64. package/docs/components/TreeView/examples/TreeView.md +1300 -100
  65. package/docs/components/Wizard/examples/Wizard.md +349 -85
  66. package/docs/demos/AboutModal/examples/AboutModal.md +41 -5
  67. package/docs/demos/Alert/examples/Alert.md +123 -15
  68. package/docs/demos/BackToTop/examples/BackToTop.md +39 -3
  69. package/docs/demos/Banner/examples/Banner.md +78 -6
  70. package/docs/demos/Card/examples/Card.md +310 -34
  71. package/docs/demos/CardView/examples/CardView.md +78 -6
  72. package/docs/demos/Compass/examples/Compass.md +73 -37
  73. package/docs/demos/Dashboard/examples/Dashboard.md +128 -14
  74. package/docs/demos/DataList/examples/DataList.md +234 -18
  75. package/docs/demos/DescriptionList/examples/DescriptionList.md +119 -11
  76. package/docs/demos/Drawer/examples/Drawer.md +147 -21
  77. package/docs/demos/Form/examples/BasicForms.md +169 -13
  78. package/docs/demos/JumpLinks/examples/JumpLinks.md +220 -31
  79. package/docs/demos/Masthead/examples/Masthead.md +370 -34
  80. package/docs/demos/Modal/examples/Modal.md +246 -30
  81. package/docs/demos/Nav/examples/Nav.md +320 -32
  82. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1063 -115
  83. package/docs/demos/Page/examples/Page.md +548 -44
  84. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +371 -47
  85. package/docs/demos/Skeleton/examples/Skeleton.md +39 -3
  86. package/docs/demos/Table/examples/Table.md +934 -73
  87. package/docs/demos/Tabs/examples/Tabs.md +261 -27
  88. package/docs/demos/Toolbar/examples/Toolbar.md +102 -30
  89. package/docs/demos/Wizard/examples/Wizard.md +641 -92
  90. package/package.json +1 -1
  91. package/patternfly-no-globals.css +28 -20
  92. package/patternfly.css +28 -20
  93. package/patternfly.min.css +1 -1
  94. package/patternfly.min.css.map +1 -1
package/components/Accordion/accordion.css CHANGED
@@ -25,7 +25,7 @@
25
25
  --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
26
26
  --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction);
27
27
  --pf-v6-c-accordion__toggle-icon--Rotate: 0;
28
- --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
28
+ --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: -180deg;
29
29
  --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
30
30
  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: 0;
31
31
  --pf-v6-c-accordion__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
package/components/Accordion/accordion.scss CHANGED
@@ -39,7 +39,7 @@
39
39
  --#{$accordion}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
40
40
  --#{$accordion}__toggle-icon--Transition: transform var(--#{$accordion}__toggle-icon--TransitionDuration) var(--#{$accordion}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
41
41
  --#{$accordion}__toggle-icon--Rotate: 0;
42
- --#{$accordion}__toggle--m-expanded__toggle-icon--Rotate: 90deg;
42
+ --#{$accordion}__toggle--m-expanded__toggle-icon--Rotate: -180deg;
43
43
 
44
44
  // accordion expandable content
45
45
  --#{$accordion}__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
package/components/Card/card.css CHANGED
@@ -32,7 +32,7 @@
32
32
  --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
33
33
  --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
34
34
  --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
35
- --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
35
+ --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg;
36
36
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
37
37
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
38
38
  --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
package/components/Card/card.scss CHANGED
@@ -36,7 +36,7 @@
36
36
  --#{$card}__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
37
37
  --#{$card}__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
38
38
  --#{$card}__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
39
- --#{$card}--m-expanded__header-toggle-icon--Rotate: 90deg;
39
+ --#{$card}--m-expanded__header-toggle-icon--Rotate: -180deg;
40
40
 
41
41
  // Selectable/Clickable
42
42
  --#{$card}--m-selectable--BorderWidth: var(--#{$card}--BorderWidth);
package/components/ClipboardCopy/clipboard-copy.css CHANGED
@@ -2,7 +2,7 @@
2
2
  --pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
3
3
  --pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
4
4
  --pf-v6-c-clipboard-copy__toggle-icon--Transition: transform var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration) var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction);
5
- --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
5
+ --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: -180deg;
6
6
  --pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
7
7
  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
8
8
  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
package/components/ClipboardCopy/clipboard-copy.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  --#{$clipboard-copy}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
6
6
  --#{$clipboard-copy}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7
7
  --#{$clipboard-copy}__toggle-icon--Transition: transform var(--#{$clipboard-copy}__toggle-icon--TransitionDuration) var(--#{$clipboard-copy}__toggle-icon--TransitionTimingFunction); // TODO Remove in breaking change along with shorthand property
8
- --#{$clipboard-copy}--m-expanded__toggle-icon--Rotate: 90deg;
8
+ --#{$clipboard-copy}--m-expanded__toggle-icon--Rotate: -180deg;
9
9
 
10
10
  // Clipboard copy expanded content
11
11
  --#{$clipboard-copy}__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
package/components/DataList/data-list.css CHANGED
@@ -464,7 +464,7 @@
464
464
  --pf-v6-c-data-list__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
465
465
  --pf-v6-c-data-list__toggle-icon--Transition: transform var(--pf-v6-c-data-list__toggle-icon--TransitionDuration) var(--pf-v6-c-data-list__toggle-icon--TransitionTimingFunction);
466
466
  --pf-v6-c-data-list__toggle-icon--Rotate: 0;
467
- --pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
467
+ --pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate: -180deg;
468
468
  --pf-v6-c-data-list__item-draggable-button--BackgroundColor: transparent;
469
469
  --pf-v6-c-data-list__item-draggable-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
470
470
  --pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
package/components/DataList/data-list.scss CHANGED
@@ -65,7 +65,7 @@
65
65
  --#{$data-list}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
66
66
  --#{$data-list}__toggle-icon--Transition: transform var(--#{$data-list}__toggle-icon--TransitionDuration) var(--#{$data-list}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
67
67
  --#{$data-list}__toggle-icon--Rotate: 0;
68
- --#{$data-list}__item--m-expanded__toggle-icon--Rotate: 90deg;
68
+ --#{$data-list}__item--m-expanded__toggle-icon--Rotate: -180deg;
69
69
 
70
70
  // draggable button/icon
71
71
  --#{$data-list}__item-draggable-button--BackgroundColor: transparent;
package/components/DualListSelector/dual-list-selector.css CHANGED
@@ -76,7 +76,7 @@
76
76
  --pf-v6-c-dual-list-selector__item-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
77
77
  --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
78
78
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
79
- --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
79
+ --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: -180deg;
80
80
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
81
81
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
82
82
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
package/components/DualListSelector/dual-list-selector.scss CHANGED
@@ -106,7 +106,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
106
106
 
107
107
  // Icon
108
108
  --#{$dual-list-selector}__item-toggle-icon--Rotate: 0;
109
- --#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
109
+ --#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: -180deg;
110
110
  --#{$dual-list-selector}__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
111
111
  --#{$dual-list-selector}__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
112
112
  --#{$dual-list-selector}__item-toggle-icon--MinWidth: var(--#{$dual-list-selector}__list-item-row--FontSize);
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -7,8 +7,8 @@
7
7
  --pf-v6-c-expandable-section__toggle-icon--Transition: transform var(--pf-v6-c-expandable-section__toggle-icon--TransitionDuration) var(--pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction);
8
8
  --pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
9
9
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
10
- --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
11
- --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
10
+ --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: -180deg;
11
+ --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: 180deg;
12
12
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
13
13
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
14
14
  --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -11,8 +11,8 @@
11
11
  --#{$expandable-section}__toggle-icon--Transition: transform var(--#{$expandable-section}__toggle-icon--TransitionDuration) var(--#{$expandable-section}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
12
12
  --#{$expandable-section}__toggle-icon--Rotate: 0;
13
13
  --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: 0;
14
- --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
15
- --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
14
+ --#{$expandable-section}--m-expanded__toggle-icon--Rotate: -180deg;
15
+ --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: 180deg;
16
16
  --#{$expandable-section}__content--TransitionDuration--collapse--slide: 0s;
17
17
  --#{$expandable-section}__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
18
18
  --#{$expandable-section}__content--TransitionDuration--expand--slide: 0s;
package/components/Form/form.css CHANGED
@@ -60,7 +60,7 @@
60
60
  --pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
61
61
  --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
62
62
  --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
63
- --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: 90deg;
63
+ --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: -180deg;
64
64
  --pf-v6-c-form__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--md);
65
65
  --pf-v6-c-form__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
66
66
  --pf-v6-c-form__field-group-header--GridColumn: 1 / 3;
package/components/Form/form.scss CHANGED
@@ -139,7 +139,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
139
139
  --#{$form}__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
140
140
  --#{$form}__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
141
141
  --#{$form}__field-group-toggle-icon--Rotate: 0;
142
- --#{$form}__field-group--m-expanded__toggle-icon--Rotate: 90deg;
142
+ --#{$form}__field-group--m-expanded__toggle-icon--Rotate: -180deg;
143
143
 
144
144
  // Field group header
145
145
  --#{$form}__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--md);
package/components/JumpLinks/jump-links.css CHANGED
@@ -48,7 +48,7 @@
48
48
  --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
49
49
  --pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
50
50
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
51
- --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
51
+ --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: -180deg;
52
52
  }
53
53
 
54
54
  .pf-v6-c-jump-links {
package/components/JumpLinks/jump-links.scss CHANGED
@@ -65,7 +65,7 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
65
65
  --#{$jump-links}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
66
66
  --#{$jump-links}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
67
67
  --#{$jump-links}__toggle-icon--Rotate: 0;
68
- --#{$jump-links}--m-expanded__toggle-icon--Rotate: 90deg;
68
+ --#{$jump-links}--m-expanded__toggle-icon--Rotate: -180deg;
69
69
  }
70
70
 
71
71
  .#{$jump-links} {
package/components/Nav/nav.css CHANGED
@@ -38,7 +38,7 @@
38
38
  --pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
39
39
  --pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
40
40
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
41
- --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
41
+ --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: -180deg;
42
42
  --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
43
43
  --pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--default);
44
44
  --pf-v6-c-nav__link--ColumnGap: var(--pf-t--global--spacer--sm);
package/components/Nav/nav.scss CHANGED
@@ -53,7 +53,7 @@
53
53
 
54
54
  // * Nav item toggle icon
55
55
  --#{$nav}__item__toggle-icon--Rotate: 0;
56
- --#{$nav}__item--m-expanded__toggle-icon--Rotate: 90deg;
56
+ --#{$nav}__item--m-expanded__toggle-icon--Rotate: -180deg;
57
57
  --#{$nav}__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
58
58
  --#{$nav}__item__toggle-icon--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--default);
59
59
 
package/components/NotificationDrawer/notification-drawer.css CHANGED
@@ -28,6 +28,7 @@
28
28
  --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
29
29
  --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
30
30
  --pf-v6-c-notification-drawer__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
31
+ --pf-v6-c-notification-drawer__list-item--OutlineOffset: -0.25rem;
31
32
  --pf-v6-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--info--default);
32
33
  --pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor: var(--pf-t--global--border--color--status--info--default);
33
34
  --pf-v6-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
@@ -70,7 +71,7 @@
70
71
  --pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
71
72
  --pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
72
73
  --pf-v6-c-notification-drawer__group-toggle-icon--Transition: transform var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration) var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction);
73
- --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
74
+ --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: -180deg;
74
75
  }
75
76
 
76
77
  .pf-v6-c-notification-drawer {
@@ -138,8 +139,16 @@
138
139
  padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineStart);
139
140
  padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd);
140
141
  background-color: var(--pf-v6-c-notification-drawer__list-item--BackgroundColor);
141
- border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
142
142
  border-radius: var(--pf-v6-c-notification-drawer__list-item--BorderRadius);
143
+ outline-offset: var(--pf-v6-c-notification-drawer__list-item--OutlineOffset);
144
+ }
145
+ .pf-v6-c-notification-drawer__list-item::before {
146
+ position: absolute;
147
+ inset: 0;
148
+ pointer-events: none;
149
+ content: "";
150
+ border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
151
+ border-radius: inherit;
143
152
  }
144
153
  .pf-v6-c-notification-drawer__list-item.pf-m-info {
145
154
  --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor);
@@ -165,7 +174,6 @@
165
174
  --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderWidth);
166
175
  --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BackgroundColor);
167
176
  --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderColor);
168
- position: relative;
169
177
  }
170
178
  .pf-v6-c-notification-drawer__list-item.pf-m-hoverable {
171
179
  cursor: pointer;
package/components/NotificationDrawer/notification-drawer.scss CHANGED
@@ -38,6 +38,7 @@
38
38
  --#{$notification-drawer}__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
39
39
  --#{$notification-drawer}__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
40
40
  --#{$notification-drawer}__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
41
+ --#{$notification-drawer}__list-item--OutlineOffset: #{pf-size-prem(-4px)};
41
42
 
42
43
  // List item modifiers
43
44
  --#{$notification-drawer}__list-item--m-info__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--info--default);
@@ -105,7 +106,7 @@
105
106
  --#{$notification-drawer}__group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
106
107
  --#{$notification-drawer}__group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
107
108
  --#{$notification-drawer}__group-toggle-icon--Transition: transform var(--#{$notification-drawer}__group-toggle-icon--TransitionDuration) var(--#{$notification-drawer}__group-toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
108
- --#{$notification-drawer}__group--m-expanded__group-toggle-icon--Rotate: 90deg;
109
+ --#{$notification-drawer}__group--m-expanded__group-toggle-icon--Rotate: -180deg;
109
110
  }
110
111
 
111
112
  .#{$notification-drawer} {
@@ -173,8 +174,17 @@
173
174
  padding-inline-start: var(--#{$notification-drawer}__list-item--PaddingInlineStart);
174
175
  padding-inline-end: var(--#{$notification-drawer}__list-item--PaddingInlineEnd);
175
176
  background-color: var(--#{$notification-drawer}__list-item--BackgroundColor);
176
- border: var(--#{$notification-drawer}__list-item--BorderWidth) solid var(--#{$notification-drawer}__list-item--BorderColor);
177
177
  border-radius: var(--#{$notification-drawer}__list-item--BorderRadius);
178
+ outline-offset: var(--#{$notification-drawer}__list-item--OutlineOffset);
179
+
180
+ &::before {
181
+ position: absolute;
182
+ inset: 0;
183
+ pointer-events: none;
184
+ content: '';
185
+ border: var(--#{$notification-drawer}__list-item--BorderWidth) solid var(--#{$notification-drawer}__list-item--BorderColor);
186
+ border-radius: inherit;
187
+ }
178
188
 
179
189
  &.pf-m-info {
180
190
  --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-info__list-item--BorderColor);
@@ -205,8 +215,6 @@
205
215
  --#{$notification-drawer}__list-item--BorderWidth: var(--#{$notification-drawer}__list-item--m-read--BorderWidth);
206
216
  --#{$notification-drawer}__list-item--BackgroundColor: var(--#{$notification-drawer}__list-item--m-read--BackgroundColor);
207
217
  --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-read--BorderColor);
208
-
209
- position: relative;
210
218
  }
211
219
 
212
220
  &.pf-m-hoverable {
@@ -318,4 +326,3 @@
318
326
  transform: rotate(var(--#{$notification-drawer}__group--m-expanded__group-toggle-icon--Rotate));
319
327
  }
320
328
  }
321
-
package/components/Table/table.css CHANGED
@@ -50,10 +50,10 @@
50
50
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
51
51
  --pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
52
52
  --pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
53
- --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
53
+ --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 0;
54
54
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
55
55
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
56
- --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
56
+ --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg;
57
57
  --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
58
58
  --pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
59
59
  --pf-v6-c-table__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
package/components/Table/table.scss CHANGED
@@ -83,10 +83,10 @@
83
83
  --#{$table}__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
84
84
  --#{$table}__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
85
85
  --#{$table}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
86
- --#{$table}__toggle--c-button__toggle-icon--Rotate: 270deg;
86
+ --#{$table}__toggle--c-button__toggle-icon--Rotate: 0;
87
87
  --#{$table}__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
88
88
  --#{$table}__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
89
- --#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
89
+ --#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg;
90
90
 
91
91
  // * Table button
92
92
  --#{$table}__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
package/components/Tabs/tabs.css CHANGED
@@ -149,7 +149,7 @@
149
149
  --pf-v6-c-tabs__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
150
150
  --pf-v6-c-tabs__toggle-icon--Transition: transform var(--pf-v6-c-tabs__toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__toggle-icon--TransitionTimingFunction);
151
151
  --pf-v6-c-tabs__toggle-icon--Rotate: 0;
152
- --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
152
+ --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: -180deg;
153
153
  --pf-v6-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
154
154
  --pf-v6-c-tabs--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
155
155
  --pf-v6-c-tabs--m-expandable--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -175,7 +175,7 @@
175
175
  --pf-v6-c-tabs__link-toggle-icon--Transition: transform var(--pf-v6-c-tabs__link-toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction);
176
176
  --pf-v6-c-tabs__link-toggle-icon--Rotate: 0;
177
177
  --pf-v6-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
178
- --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
178
+ --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: -180deg;
179
179
  }
180
180
 
181
181
  .pf-v6-c-tabs {
package/components/Tabs/tabs.scss CHANGED
@@ -183,7 +183,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
183
183
  --#{$tabs}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
184
184
  --#{$tabs}__toggle-icon--Transition: transform var(--#{$tabs}__toggle-icon--TransitionDuration) var(--#{$tabs}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
185
185
  --#{$tabs}__toggle-icon--Rotate: 0;
186
- --#{$tabs}--m-expanded__toggle-icon--Rotate: 90deg;
186
+ --#{$tabs}--m-expanded__toggle-icon--Rotate: -180deg;
187
187
  --#{$tabs}--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
188
188
  --#{$tabs}--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
189
189
  --#{$tabs}--m-expandable--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -217,7 +217,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
217
217
  --#{$tabs}__link-toggle-icon--Transition: transform var(--#{$tabs}__link-toggle-icon--TransitionDuration) var(--#{$tabs}__link-toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
218
218
  --#{$tabs}__link-toggle-icon--Rotate: 0;
219
219
  --#{$tabs}__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
220
- --#{$tabs}__link--m-expanded__toggle-icon--Rotate: 90deg;
220
+ --#{$tabs}__link--m-expanded__toggle-icon--Rotate: -180deg;
221
221
  }
222
222
 
223
223
  .#{$tabs} {
package/components/Toolbar/toolbar.css CHANGED
@@ -44,7 +44,7 @@
44
44
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
45
45
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
46
46
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
47
- --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
47
+ --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: -180deg;
48
48
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
49
49
  --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
50
50
  --pf-v6-c-toolbar__group--m-label-group--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
package/components/Toolbar/toolbar.scss CHANGED
@@ -76,7 +76,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
76
76
  --#{$toolbar}__expand-all-icon--Rotate: 0;
77
77
  --#{$toolbar}__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
78
78
  --#{$toolbar}__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
79
- --#{$toolbar}__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
79
+ --#{$toolbar}__item--m-expand-all--m-expanded__expand-all-icon--Rotate: -180deg;
80
80
 
81
81
  // * Toolbar filter group
82
82
  --#{$toolbar}__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
package/components/TreeView/tree-view.css CHANGED
@@ -66,7 +66,7 @@
66
66
  --pf-v6-c-tree-view__node-icon--Color: var(--pf-t--global--icon--color--subtle);
67
67
  --pf-v6-c-tree-view__node-toggle-icon--base--Rotate: 0;
68
68
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
69
- --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
69
+ --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: -180deg;
70
70
  --pf-v6-c-tree-view__node--m-disabled--Color: var(--pf-t--global--text--color--disabled);
71
71
  --pf-v6-c-tree-view__node-icon--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
72
72
  --pf-v6-c-tree-view__node-toggle--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
package/components/TreeView/tree-view.scss CHANGED
@@ -92,7 +92,7 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
92
92
  --#{$tree-view}__node-icon--Color: var(--pf-t--global--icon--color--subtle);
93
93
  --#{$tree-view}__node-toggle-icon--base--Rotate: 0;
94
94
  --#{$tree-view}__node-toggle-icon--Rotate: var(--#{$tree-view}__node-toggle-icon--base--Rotate);
95
- --#{$tree-view}__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
95
+ --#{$tree-view}__list-item--m-expanded__node-toggle-icon--Rotate: -180deg;
96
96
 
97
97
  // Disabled
98
98
  --#{$tree-view}__node--m-disabled--Color: var(--pf-t--global--text--color--disabled);
package/components/Wizard/wizard.css CHANGED
@@ -46,7 +46,7 @@
46
46
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
47
47
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
48
48
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
49
- --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
49
+ --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: -180deg;
50
50
  --pf-v6-c-wizard__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
51
51
  --pf-v6-c-wizard__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
52
52
  --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
package/components/Wizard/wizard.scss CHANGED
@@ -70,7 +70,7 @@
70
70
  --#{$wizard}__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
71
71
  --#{$wizard}__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
72
72
  --#{$wizard}__nav-link-toggle-icon--Rotate: 0;
73
- --#{$wizard}__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
73
+ --#{$wizard}__nav-item--m-expanded__link-toggle-icon--Rotate: -180deg;
74
74
 
75
75
  // Nav link number
76
76
  --#{$wizard}__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
package/components/_index.css CHANGED
@@ -227,7 +227,7 @@
227
227
  --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
228
228
  --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction);
229
229
  --pf-v6-c-accordion__toggle-icon--Rotate: 0;
230
- --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
230
+ --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: -180deg;
231
231
  --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
232
232
  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: 0;
233
233
  --pf-v6-c-accordion__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
@@ -2822,7 +2822,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2822
2822
  --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
2823
2823
  --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2824
2824
  --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
2825
- --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
2825
+ --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg;
2826
2826
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
2827
2827
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
2828
2828
  --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
@@ -3243,7 +3243,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3243
3243
  --pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
3244
3244
  --pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
3245
3245
  --pf-v6-c-clipboard-copy__toggle-icon--Transition: transform var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration) var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction);
3246
- --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
3246
+ --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: -180deg;
3247
3247
  --pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
3248
3248
  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
3249
3249
  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -4678,7 +4678,7 @@ ul) {
4678
4678
  --pf-v6-c-data-list__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
4679
4679
  --pf-v6-c-data-list__toggle-icon--Transition: transform var(--pf-v6-c-data-list__toggle-icon--TransitionDuration) var(--pf-v6-c-data-list__toggle-icon--TransitionTimingFunction);
4680
4680
  --pf-v6-c-data-list__toggle-icon--Rotate: 0;
4681
- --pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
4681
+ --pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate: -180deg;
4682
4682
  --pf-v6-c-data-list__item-draggable-button--BackgroundColor: transparent;
4683
4683
  --pf-v6-c-data-list__item-draggable-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
4684
4684
  --pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -5531,7 +5531,7 @@ ul) {
5531
5531
  --pf-v6-c-dual-list-selector__item-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
5532
5532
  --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
5533
5533
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
5534
- --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
5534
+ --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: -180deg;
5535
5535
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
5536
5536
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
5537
5537
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
@@ -7269,8 +7269,8 @@ ul) {
7269
7269
  --pf-v6-c-expandable-section__toggle-icon--Transition: transform var(--pf-v6-c-expandable-section__toggle-icon--TransitionDuration) var(--pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction);
7270
7270
  --pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
7271
7271
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
7272
- --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
7273
- --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
7272
+ --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: -180deg;
7273
+ --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: 180deg;
7274
7274
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
7275
7275
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
7276
7276
  --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
@@ -7533,7 +7533,7 @@ ul) {
7533
7533
  --pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7534
7534
  --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
7535
7535
  --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
7536
- --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: 90deg;
7536
+ --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: -180deg;
7537
7537
  --pf-v6-c-form__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--md);
7538
7538
  --pf-v6-c-form__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
7539
7539
  --pf-v6-c-form__field-group-header--GridColumn: 1 / 3;
@@ -9172,7 +9172,7 @@ label.pf-v6-c-input-group__text {
9172
9172
  --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
9173
9173
  --pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9174
9174
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
9175
- --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
9175
+ --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: -180deg;
9176
9176
  }
9177
9177
 
9178
9178
  .pf-v6-c-jump-links {
@@ -12581,7 +12581,7 @@ ul.pf-v6-c-list {
12581
12581
  --pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
12582
12582
  --pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
12583
12583
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
12584
- --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
12584
+ --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: -180deg;
12585
12585
  --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
12586
12586
  --pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--default);
12587
12587
  --pf-v6-c-nav__link--ColumnGap: var(--pf-t--global--spacer--sm);
@@ -13003,6 +13003,7 @@ ul.pf-v6-c-list {
13003
13003
  --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13004
13004
  --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
13005
13005
  --pf-v6-c-notification-drawer__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
13006
+ --pf-v6-c-notification-drawer__list-item--OutlineOffset: -0.25rem;
13006
13007
  --pf-v6-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--info--default);
13007
13008
  --pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor: var(--pf-t--global--border--color--status--info--default);
13008
13009
  --pf-v6-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
@@ -13045,7 +13046,7 @@ ul.pf-v6-c-list {
13045
13046
  --pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
13046
13047
  --pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
13047
13048
  --pf-v6-c-notification-drawer__group-toggle-icon--Transition: transform var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration) var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction);
13048
- --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
13049
+ --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: -180deg;
13049
13050
  }
13050
13051
 
13051
13052
  .pf-v6-c-notification-drawer {
@@ -13113,8 +13114,16 @@ ul.pf-v6-c-list {
13113
13114
  padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineStart);
13114
13115
  padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd);
13115
13116
  background-color: var(--pf-v6-c-notification-drawer__list-item--BackgroundColor);
13116
- border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
13117
13117
  border-radius: var(--pf-v6-c-notification-drawer__list-item--BorderRadius);
13118
+ outline-offset: var(--pf-v6-c-notification-drawer__list-item--OutlineOffset);
13119
+ }
13120
+ .pf-v6-c-notification-drawer__list-item::before {
13121
+ position: absolute;
13122
+ inset: 0;
13123
+ pointer-events: none;
13124
+ content: "";
13125
+ border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
13126
+ border-radius: inherit;
13118
13127
  }
13119
13128
  .pf-v6-c-notification-drawer__list-item.pf-m-info {
13120
13129
  --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor);
@@ -13140,7 +13149,6 @@ ul.pf-v6-c-list {
13140
13149
  --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderWidth);
13141
13150
  --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BackgroundColor);
13142
13151
  --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderColor);
13143
- position: relative;
13144
13152
  }
13145
13153
  .pf-v6-c-notification-drawer__list-item.pf-m-hoverable {
13146
13154
  cursor: pointer;
@@ -18479,10 +18487,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18479
18487
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18480
18488
  --pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
18481
18489
  --pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
18482
- --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
18490
+ --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 0;
18483
18491
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
18484
18492
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
18485
- --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
18493
+ --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg;
18486
18494
  --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
18487
18495
  --pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18488
18496
  --pf-v6-c-table__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -20465,7 +20473,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20465
20473
  --pf-v6-c-tabs__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
20466
20474
  --pf-v6-c-tabs__toggle-icon--Transition: transform var(--pf-v6-c-tabs__toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__toggle-icon--TransitionTimingFunction);
20467
20475
  --pf-v6-c-tabs__toggle-icon--Rotate: 0;
20468
- --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
20476
+ --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: -180deg;
20469
20477
  --pf-v6-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
20470
20478
  --pf-v6-c-tabs--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
20471
20479
  --pf-v6-c-tabs--m-expandable--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -20491,7 +20499,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20491
20499
  --pf-v6-c-tabs__link-toggle-icon--Transition: transform var(--pf-v6-c-tabs__link-toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction);
20492
20500
  --pf-v6-c-tabs__link-toggle-icon--Rotate: 0;
20493
20501
  --pf-v6-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
20494
- --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
20502
+ --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: -180deg;
20495
20503
  }
20496
20504
 
20497
20505
  .pf-v6-c-tabs {
@@ -21882,7 +21890,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21882
21890
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
21883
21891
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
21884
21892
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
21885
- --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
21893
+ --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: -180deg;
21886
21894
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
21887
21895
  --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
21888
21896
  --pf-v6-c-toolbar__group--m-label-group--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
@@ -24066,7 +24074,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24066
24074
  --pf-v6-c-tree-view__node-icon--Color: var(--pf-t--global--icon--color--subtle);
24067
24075
  --pf-v6-c-tree-view__node-toggle-icon--base--Rotate: 0;
24068
24076
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
24069
- --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
24077
+ --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: -180deg;
24070
24078
  --pf-v6-c-tree-view__node--m-disabled--Color: var(--pf-t--global--text--color--disabled);
24071
24079
  --pf-v6-c-tree-view__node-icon--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
24072
24080
  --pf-v6-c-tree-view__node-toggle--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
@@ -24584,7 +24592,7 @@ label.pf-v6-c-tree-view__node-text {
24584
24592
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
24585
24593
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
24586
24594
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
24587
- --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
24595
+ --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: -180deg;
24588
24596
  --pf-v6-c-wizard__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
24589
24597
  --pf-v6-c-wizard__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
24590
24598
  --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);