@patternfly/patternfly 6.5.0-prerelease.41 → 6.5.0-prerelease.43

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 (24) hide show
  1. package/components/Button/button.css +2 -2
  2. package/components/Button/button.scss +2 -2
  3. package/components/ClipboardCopy/clipboard-copy.css +2 -2
  4. package/components/ClipboardCopy/clipboard-copy.scss +2 -2
  5. package/components/Compass/compass.css +5 -5
  6. package/components/Compass/compass.scss +5 -4
  7. package/components/FormControl/form-control.css +2 -2
  8. package/components/FormControl/form-control.scss +2 -2
  9. package/components/MenuToggle/menu-toggle.css +1 -1
  10. package/components/MenuToggle/menu-toggle.scss +1 -1
  11. package/components/Switch/switch.css +1 -1
  12. package/components/Switch/switch.scss +1 -1
  13. package/components/TextInputGroup/text-input-group.css +2 -2
  14. package/components/TextInputGroup/text-input-group.scss +2 -2
  15. package/components/ToggleGroup/toggle-group.css +1 -1
  16. package/components/ToggleGroup/toggle-group.scss +1 -1
  17. package/components/_index.css +16 -16
  18. package/docs/components/Compass/examples/Compass.md +1 -0
  19. package/docs/demos/Compass/examples/Compass.md +366 -330
  20. package/package.json +2 -2
  21. package/patternfly-no-globals.css +16 -16
  22. package/patternfly.css +16 -16
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -169,12 +169,12 @@
169
169
  --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
170
170
  --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
171
171
  --pf-v6-c-button--m-plain--m-no-padding--border--offset: calc(0.125rem * -1);
172
- --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
172
+ --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
173
173
  --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
174
174
  --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
175
175
  --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
176
176
  --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
177
- --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default);
177
+ --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--control--default);
178
178
  --pf-v6-c-button--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
179
179
  --pf-v6-c-button--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
180
180
  --pf-v6-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular);
package/components/Button/button.scss CHANGED
@@ -193,12 +193,12 @@
193
193
  --#{$button}--m-plain--m-no-padding--border--offset: calc(#{pf-size-prem(2px)} * -1);
194
194
 
195
195
  // Control
196
- --#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
196
+ --#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
197
197
  --#{$button}--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
198
198
  --#{$button}--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
199
199
  --#{$button}--m-control--Color: var(--pf-t--global--text--color--regular);
200
200
  --#{$button}--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
201
- --#{$button}--m-control--BorderColor: var(--pf-t--global--border--color--default);
201
+ --#{$button}--m-control--BorderColor: var(--pf-t--global--border--color--control--default);
202
202
  --#{$button}--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
203
203
  --#{$button}--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
204
204
  --#{$button}--m-control--hover--Color: var(--pf-t--global--text--color--regular);
package/components/ClipboardCopy/clipboard-copy.css CHANGED
@@ -13,8 +13,8 @@
13
13
  --pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
14
14
  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
15
15
  --pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth: var(--pf-t--global--border--width--control--default);
16
- --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
17
- --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
16
+ --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--control--default);
17
+ --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
18
18
  --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
19
19
  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
20
20
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
package/components/ClipboardCopy/clipboard-copy.scss CHANGED
@@ -18,8 +18,8 @@
18
18
  --#{$clipboard-copy}__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
19
19
  --#{$clipboard-copy}__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
20
20
  --#{$clipboard-copy}__expandable-content--BorderInlineStartWidth: var(--pf-t--global--border--width--control--default);
21
- --#{$clipboard-copy}__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
22
- --#{$clipboard-copy}__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
21
+ --#{$clipboard-copy}__expandable-content--BorderColor: var(--pf-t--global--border--color--control--default);
22
+ --#{$clipboard-copy}__expandable-content--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
23
23
  --#{$clipboard-copy}__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
24
24
 
25
25
  // Group
package/components/Compass/compass.css CHANGED
@@ -293,10 +293,7 @@
293
293
 
294
294
  /* stylelint-disable */
295
295
  @media (max-width: 1200px) {
296
- .pf-v6-c-compass * {
297
- display: none;
298
- }
299
- .pf-v6-c-compass {
296
+ .pf-v6-c-compass:not(.pf-m-no-screen-warning) {
300
297
  position: relative;
301
298
  display: grid;
302
299
  grid-template-columns: auto;
@@ -304,7 +301,7 @@
304
301
  place-content: center;
305
302
  gap: 0;
306
303
  }
307
- .pf-v6-c-compass::after {
304
+ .pf-v6-c-compass:not(.pf-m-no-screen-warning)::after {
308
305
  padding: 1em;
309
306
  border-radius: var(--pf-t--global--border--radius--large);
310
307
  background: var(--pf-t--global--background--color--primary--default);
@@ -316,5 +313,8 @@
316
313
  white-space: pre-wrap;
317
314
  text-align: center;
318
315
  }
316
+ .pf-v6-c-compass:not(.pf-m-no-screen-warning) * {
317
+ display: none;
318
+ }
319
319
  }
320
320
  /* stylelint-enable */
package/components/Compass/compass.scss CHANGED
@@ -321,10 +321,7 @@
321
321
 
322
322
  /* stylelint-disable */
323
323
  @media (max-width: 1200px) {
324
- .#{$compass} * {
325
- display: none;
326
- }
327
- .#{$compass} {
324
+ .#{$compass}:not(.pf-m-no-screen-warning) {
328
325
  position: relative;
329
326
  display: grid;
330
327
  grid-template-columns: auto;
@@ -344,6 +341,10 @@
344
341
  white-space: pre-wrap;
345
342
  text-align: center;
346
343
  }
344
+
345
+ * {
346
+ display: none;
347
+ }
347
348
  }
348
349
  }
349
350
  /* stylelint-enable */
package/components/FormControl/form-control.css CHANGED
@@ -5,10 +5,10 @@
5
5
  --pf-v6-c-form-control--LineHeight: var(--pf-t--global--font--line-height--body);
6
6
  --pf-v6-c-form-control--Resize: none;
7
7
  --pf-v6-c-form-control--OutlineOffset: -6px;
8
- --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
8
+ --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
9
9
  --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
10
10
  --pf-v6-c-form-control--before--BorderStyle: solid;
11
- --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
11
+ --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--control--default);
12
12
  --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
13
13
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
14
14
  --pf-v6-c-form-control--after--BorderStyle: solid;
package/components/FormControl/form-control.scss CHANGED
@@ -7,10 +7,10 @@
7
7
  --#{$form-control}--LineHeight: var(--pf-t--global--font--line-height--body);
8
8
  --#{$form-control}--Resize: none;
9
9
  --#{$form-control}--OutlineOffset: -6px;
10
- --#{$form-control}--BorderRadius: var(--pf-t--global--border--radius--small);
10
+ --#{$form-control}--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
11
11
  --#{$form-control}--before--BorderWidth: var(--pf-t--global--border--width--control--default);
12
12
  --#{$form-control}--before--BorderStyle: solid;
13
- --#{$form-control}--before--BorderColor: var(--pf-t--global--border--color--default);
13
+ --#{$form-control}--before--BorderColor: var(--pf-t--global--border--color--control--default);
14
14
  --#{$form-control}--before--BorderRadius: var(--#{$form-control}--BorderRadius);
15
15
  --#{$form-control}--after--BorderWidth: var(--pf-t--global--border--width--control--default);
16
16
  --#{$form-control}--after--BorderStyle: solid;
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -10,7 +10,7 @@
10
10
  --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
11
11
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
12
12
  --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
13
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
13
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default);
14
14
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
15
15
  --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
16
16
  --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  --#{$menu-toggle}--LineHeight: var(--pf-t--global--font--line-height--body);
13
13
  --#{$menu-toggle}--BackgroundColor: var(--pf-t--global--background--color--control--default);
14
14
  --#{$menu-toggle}--BorderRadius: var(--pf-t--global--border--radius--small);
15
- --#{$menu-toggle}--BorderColor: var(--pf-t--global--border--color--default);
15
+ --#{$menu-toggle}--BorderColor: var(--pf-t--global--border--color--control--default);
16
16
  --#{$menu-toggle}--BorderWidth: var(--pf-t--global--border--width--control--default);
17
17
  --#{$menu-toggle}--border--ZIndex: var(--pf-t--global--z-index--xs); // add z-index for toggle border to render above other borders
18
18
  --#{$menu-toggle}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
package/components/Switch/switch.css CHANGED
@@ -25,7 +25,7 @@
25
25
  --pf-v6-c-switch__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
26
26
  --pf-v6-c-switch__toggle--Height: calc(var(--pf-v6-c-switch--FontSize) * var(--pf-v6-c-switch--LineHeight));
27
27
  --pf-v6-c-switch__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
28
- --pf-v6-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--default);
28
+ --pf-v6-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--control--default);
29
29
  --pf-v6-c-switch__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
30
30
  --pf-v6-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
31
31
  --pf-v6-c-switch__toggle--before--Width: calc(var(--pf-v6-c-switch--FontSize) - var(--pf-v6-c-switch__toggle-icon--Offset));
package/components/Switch/switch.scss CHANGED
@@ -36,7 +36,7 @@
36
36
  // Switch toggle
37
37
  --#{$switch}__toggle--Height: calc(var(--#{$switch}--FontSize) * var(--#{$switch}--LineHeight));
38
38
  --#{$switch}__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
39
- --#{$switch}__toggle--BorderColor: var(--pf-t--global--border--color--default);
39
+ --#{$switch}__toggle--BorderColor: var(--pf-t--global--border--color--control--default);
40
40
  --#{$switch}__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
41
41
  --#{$switch}__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
42
42
  --#{$switch}__toggle--before--Width: calc(var(--#{$switch}--FontSize) - var(--#{$switch}__toggle-icon--Offset));
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .pf-v6-c-text-input-group {
2
2
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
3
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
3
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
4
4
  --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
5
5
  --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
6
6
  --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
@@ -17,7 +17,7 @@
17
17
  --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
18
18
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
19
19
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
20
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
20
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
21
21
  --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
22
22
  --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
23
23
  --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  @include pf-root($text-input-group) {
4
4
  --#{$text-input-group}--BackgroundColor: var(--pf-t--global--background--color--control--default);
5
- --#{$text-input-group}--BorderColor: var(--pf-t--global--border--color--default);
5
+ --#{$text-input-group}--BorderColor: var(--pf-t--global--border--color--control--default);
6
6
  --#{$text-input-group}--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
7
7
  --#{$text-input-group}--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
8
8
  --#{$text-input-group}--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
@@ -26,7 +26,7 @@
26
26
  --#{$text-input-group}__main--ColumnGap: var(--pf-t--global--spacer--xs);
27
27
 
28
28
  // Text wrapper
29
- --#{$text-input-group}__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
29
+ --#{$text-input-group}__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
30
30
  --#{$text-input-group}__text--BorderStartStartRadius: var(--#{$text-input-group}__text--BorderRadius--base);
31
31
  --#{$text-input-group}__text--BorderStartEndRadius: var(--#{$text-input-group}__text--BorderRadius--base);
32
32
  --#{$text-input-group}__text--BorderEndEndRadius: var(--#{$text-input-group}__text--BorderRadius--base);
package/components/ToggleGroup/toggle-group.css CHANGED
@@ -13,7 +13,7 @@
13
13
  --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
14
14
  --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
15
15
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
16
- --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
16
+ --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--control--default);
17
17
  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
18
18
  --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
19
19
  --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
package/components/ToggleGroup/toggle-group.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  --#{$toggle-group}__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
17
17
  --#{$toggle-group}__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
18
18
  --#{$toggle-group}__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
19
- --#{$toggle-group}__button--before--BorderColor: var(--pf-t--global--border--color--default);
19
+ --#{$toggle-group}__button--before--BorderColor: var(--pf-t--global--border--color--control--default);
20
20
 
21
21
  // item
22
22
  --#{$toggle-group}__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
package/components/_index.css CHANGED
@@ -1770,12 +1770,12 @@ button.pf-v6-c-breadcrumb__link {
1770
1770
  --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
1771
1771
  --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
1772
1772
  --pf-v6-c-button--m-plain--m-no-padding--border--offset: calc(0.125rem * -1);
1773
- --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
1773
+ --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
1774
1774
  --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1775
1775
  --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1776
1776
  --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
1777
1777
  --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
1778
- --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default);
1778
+ --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--control--default);
1779
1779
  --pf-v6-c-button--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
1780
1780
  --pf-v6-c-button--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
1781
1781
  --pf-v6-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular);
@@ -3181,8 +3181,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3181
3181
  --pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
3182
3182
  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
3183
3183
  --pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth: var(--pf-t--global--border--width--control--default);
3184
- --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
3185
- --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
3184
+ --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--control--default);
3185
+ --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
3186
3186
  --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
3187
3187
  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
3188
3188
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
@@ -3834,10 +3834,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3834
3834
 
3835
3835
  /* stylelint-disable */
3836
3836
  @media (max-width: 1200px) {
3837
- .pf-v6-c-compass * {
3838
- display: none;
3839
- }
3840
- .pf-v6-c-compass {
3837
+ .pf-v6-c-compass:not(.pf-m-no-screen-warning) {
3841
3838
  position: relative;
3842
3839
  display: grid;
3843
3840
  grid-template-columns: auto;
@@ -3845,7 +3842,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3845
3842
  place-content: center;
3846
3843
  gap: 0;
3847
3844
  }
3848
- .pf-v6-c-compass::after {
3845
+ .pf-v6-c-compass:not(.pf-m-no-screen-warning)::after {
3849
3846
  padding: 1em;
3850
3847
  border-radius: var(--pf-t--global--border--radius--large);
3851
3848
  background: var(--pf-t--global--background--color--primary--default);
@@ -3857,6 +3854,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3857
3854
  white-space: pre-wrap;
3858
3855
  text-align: center;
3859
3856
  }
3857
+ .pf-v6-c-compass:not(.pf-m-no-screen-warning) * {
3858
+ display: none;
3859
+ }
3860
3860
  }
3861
3861
  /* stylelint-enable */
3862
3862
  :root {
@@ -7957,10 +7957,10 @@ ul) {
7957
7957
  --pf-v6-c-form-control--LineHeight: var(--pf-t--global--font--line-height--body);
7958
7958
  --pf-v6-c-form-control--Resize: none;
7959
7959
  --pf-v6-c-form-control--OutlineOffset: -6px;
7960
- --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
7960
+ --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
7961
7961
  --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
7962
7962
  --pf-v6-c-form-control--before--BorderStyle: solid;
7963
- --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
7963
+ --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--control--default);
7964
7964
  --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
7965
7965
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
7966
7966
  --pf-v6-c-form-control--after--BorderStyle: solid;
@@ -11536,7 +11536,7 @@ ul.pf-v6-c-list {
11536
11536
  --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
11537
11537
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
11538
11538
  --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
11539
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
11539
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default);
11540
11540
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
11541
11541
  --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
11542
11542
  --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -16569,7 +16569,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16569
16569
  --pf-v6-c-switch__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
16570
16570
  --pf-v6-c-switch__toggle--Height: calc(var(--pf-v6-c-switch--FontSize) * var(--pf-v6-c-switch--LineHeight));
16571
16571
  --pf-v6-c-switch__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
16572
- --pf-v6-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--default);
16572
+ --pf-v6-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--control--default);
16573
16573
  --pf-v6-c-switch__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
16574
16574
  --pf-v6-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
16575
16575
  --pf-v6-c-switch__toggle--before--Width: calc(var(--pf-v6-c-switch--FontSize) - var(--pf-v6-c-switch__toggle-icon--Offset));
@@ -21161,7 +21161,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21161
21161
  }
21162
21162
  .pf-v6-c-text-input-group {
21163
21163
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
21164
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
21164
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
21165
21165
  --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
21166
21166
  --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
21167
21167
  --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
@@ -21178,7 +21178,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21178
21178
  --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
21179
21179
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
21180
21180
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
21181
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
21181
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
21182
21182
  --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
21183
21183
  --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
21184
21184
  --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
@@ -21646,7 +21646,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21646
21646
  --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
21647
21647
  --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
21648
21648
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
21649
- --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
21649
+ --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--control--default);
21650
21650
  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
21651
21651
  --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
21652
21652
  --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
package/docs/components/Compass/examples/Compass.md CHANGED
@@ -108,6 +108,7 @@ In a basic Compass layout, the page structure is defined by the order of element
108
108
  | `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the Compass message bar. |
109
109
  | `.pf-m-dock` | `.pf-v6-c-compass` | Modifies for dock layout. |
110
110
  | `.pf-m-no-glass` | `.pf-v6-c-compass`, `.pf-v6-c-compass__panel` | Modifies all elements or individual panels to remove the glass styles. |
111
+ | `.pf-m-no-screen-warning` | `.pf-v6-c-compass` | Disables the screen warning that shows on smaller viewports. |
111
112
  | `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a Compass sidebar for start styles. **Required** |
112
113
  | `.pf-m-end` | `.pf-v6-c-compass__sidebar` | Modifies a Compass sidebar for end styles. **Required** |
113
114
  | `.pf-m-no-border` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to remove the border. |