@patternfly/patternfly 6.5.0-prerelease.25 → 6.5.0-prerelease.26

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 (17) hide show
  1. package/components/Compass/compass.css +78 -9
  2. package/components/Compass/compass.scss +85 -50
  3. package/components/_index.css +78 -9
  4. package/docs/components/Compass/examples/Compass.css +2 -2
  5. package/docs/components/Compass/examples/Compass.md +6 -5
  6. package/docs/components/Tabs/examples/Tabs.md +813 -77
  7. package/docs/demos/Card/examples/Card.md +14 -2
  8. package/docs/demos/Compass/examples/Compass.md +109 -30
  9. package/docs/demos/DescriptionList/examples/DescriptionList.md +11 -2
  10. package/docs/demos/Drawer/examples/Drawer.md +11 -2
  11. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +16 -2
  12. package/docs/demos/Tabs/examples/Tabs.md +72 -9
  13. package/package.json +1 -1
  14. package/patternfly-no-globals.css +78 -9
  15. package/patternfly.css +78 -9
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -12414,8 +12414,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12414
12414
  --pf-v6-c-compass--BackgroundImage--light: none;
12415
12415
  --pf-v6-c-compass--BackgroundImage--dark: none;
12416
12416
  --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
12417
- --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--xl);
12418
- --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
12417
+ --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--inset--page-chrome);
12418
+ --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
12419
12419
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
12420
12420
  --pf-v6-c-compass__nav--PaddingBlockStart: 0;
12421
12421
  --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
@@ -12423,10 +12423,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12423
12423
  --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12424
12424
  --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12425
12425
  --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12426
- --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
12426
+ --pf-v6-c-compass__sidebar--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12427
+ --pf-v6-c-compass__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12428
+ --pf-v6-c-compass__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12429
+ --pf-v6-c-compass__sidebar--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12427
12430
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
12428
12431
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
12429
12432
  --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
12433
+ --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
12430
12434
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12431
12435
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12432
12436
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -12441,6 +12445,23 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12441
12445
  --pf-v6-c-compass__message-bar--Width: 450px;
12442
12446
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
12443
12447
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
12448
+ --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--default);
12449
+ --pf-v6-c-compass--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
12450
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
12451
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, max-height, max-width;
12452
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
12453
+ --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
12454
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
12455
+ --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
12456
+ }
12457
+ @media screen and (prefers-reduced-motion: no-preference) {
12458
+ .pf-v6-c-compass {
12459
+ --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--slide-out--default);
12460
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
12461
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
12462
+ --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--slide-in--default);
12463
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
12464
+ }
12444
12465
  }
12445
12466
 
12446
12467
  .pf-v6-c-compass {
@@ -12454,6 +12475,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12454
12475
  justify-content: center;
12455
12476
  height: 100dvh;
12456
12477
  padding: var(--pf-v6-c-compass--Padding);
12478
+ overflow: hidden;
12457
12479
  background-image: var(--pf-v6-c-compass--BackgroundImage);
12458
12480
  background-size: cover;
12459
12481
  }
@@ -12464,11 +12486,45 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12464
12486
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12465
12487
  }
12466
12488
 
12489
+ .pf-v6-c-compass__header,
12490
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
12491
+ .pf-v6-c-compass__main-footer,
12492
+ .pf-v6-c-compass__footer {
12493
+ visibility: hidden;
12494
+ opacity: 0;
12495
+ transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
12496
+ transition-timing-function: var(--pf-v6-c-compass--section--TransitionTimingFunction);
12497
+ transition-duration: var(--pf-v6-c-compass--section--TransitionDuration);
12498
+ transition-property: var(--pf-v6-c-compass--section--TransitionProperty);
12499
+ }
12500
+ .pf-v6-c-compass__header.pf-m-expanded,
12501
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end).pf-m-expanded,
12502
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
12503
+ .pf-v6-c-compass__footer.pf-m-expanded {
12504
+ --pf-v6-c-compass--section--TransitionDelay: var(--pf-v6-c-compass--section--m-expanded--TransitionDelay);
12505
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--TransitionDuration);
12506
+ visibility: visible;
12507
+ opacity: 1;
12508
+ translate: 0;
12509
+ }
12510
+
12511
+ .pf-v6-c-compass__header,
12512
+ .pf-v6-c-compass__main-footer,
12513
+ .pf-v6-c-compass__footer {
12514
+ max-height: 0;
12515
+ }
12516
+ .pf-v6-c-compass__header.pf-m-expanded,
12517
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
12518
+ .pf-v6-c-compass__footer.pf-m-expanded {
12519
+ max-height: 9999px;
12520
+ }
12521
+
12467
12522
  .pf-v6-c-compass__header {
12468
12523
  display: grid;
12469
12524
  grid-area: header;
12470
12525
  grid-template-columns: 1fr auto 1fr;
12471
12526
  align-items: start;
12527
+ translate: 0 -100%;
12472
12528
  }
12473
12529
 
12474
12530
  .pf-v6-c-compass__profile {
@@ -12505,10 +12561,26 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12505
12561
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
12506
12562
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
12507
12563
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
12564
+ max-width: 0;
12565
+ }
12566
+ .pf-v6-c-compass__sidebar.pf-m-expanded {
12567
+ max-width: 9999px;
12508
12568
  }
12509
12569
  .pf-v6-c-compass__sidebar.pf-m-start {
12570
+ translate: -100%;
12510
12571
  grid-area: sidebar-start;
12511
12572
  }
12573
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
12574
+ translate: 100%;
12575
+ }
12576
+
12577
+ .pf-v6-c-compass__sidebar.pf-m-end {
12578
+ translate: 100%;
12579
+ grid-area: sidebar-end;
12580
+ }
12581
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
12582
+ translate: -100%;
12583
+ }
12512
12584
 
12513
12585
  .pf-v6-c-compass__main {
12514
12586
  display: flex;
@@ -12543,18 +12615,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12543
12615
  .pf-v6-c-compass__main-footer {
12544
12616
  display: flex;
12545
12617
  justify-content: center;
12546
- margin-block-start: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
12547
- }
12548
-
12549
- .pf-v6-c-compass__sidebar.pf-m-end {
12550
- grid-area: sidebar-end;
12551
- padding: var(--pf-t--global--spacer--sm);
12618
+ margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
12619
+ translate: 0 100%;
12552
12620
  }
12553
12621
 
12554
12622
  .pf-v6-c-compass__footer {
12555
12623
  display: flex;
12556
12624
  grid-column: 1/-1;
12557
12625
  justify-content: center;
12626
+ translate: 0 100%;
12558
12627
  }
12559
12628
 
12560
12629
  .pf-v6-c-compass__message-bar {