@patternfly/patternfly 6.5.0-prerelease.24 → 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 +85 -9
  2. package/components/Compass/compass.scss +92 -51
  3. package/components/_index.css +85 -9
  4. package/docs/components/Compass/examples/Compass.css +2 -2
  5. package/docs/components/Compass/examples/Compass.md +12 -7
  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 +133 -46
  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 +85 -9
  15. package/patternfly.css +85 -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,18 +12445,37 @@ 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 {
12447
12468
  display: grid;
12448
- grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
12449
- grid-template-rows: auto 1fr auto;
12469
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
12470
+ grid-template-rows: auto 1fr;
12450
12471
  grid-template-columns: auto 1fr auto;
12472
+ grid-auto-rows: auto;
12451
12473
  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
12452
12474
  align-items: center;
12453
12475
  justify-content: center;
12454
12476
  height: 100dvh;
12455
12477
  padding: var(--pf-v6-c-compass--Padding);
12478
+ overflow: hidden;
12456
12479
  background-image: var(--pf-v6-c-compass--BackgroundImage);
12457
12480
  background-size: cover;
12458
12481
  }
@@ -12463,11 +12486,45 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12463
12486
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12464
12487
  }
12465
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
+
12466
12522
  .pf-v6-c-compass__header {
12467
12523
  display: grid;
12468
12524
  grid-area: header;
12469
12525
  grid-template-columns: 1fr auto 1fr;
12470
12526
  align-items: start;
12527
+ translate: 0 -100%;
12471
12528
  }
12472
12529
 
12473
12530
  .pf-v6-c-compass__profile {
@@ -12504,10 +12561,26 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12504
12561
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
12505
12562
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
12506
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;
12507
12568
  }
12508
12569
  .pf-v6-c-compass__sidebar.pf-m-start {
12570
+ translate: -100%;
12509
12571
  grid-area: sidebar-start;
12510
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
+ }
12511
12584
 
12512
12585
  .pf-v6-c-compass__main {
12513
12586
  display: flex;
@@ -12539,15 +12612,18 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12539
12612
  max-height: 100%;
12540
12613
  }
12541
12614
 
12542
- .pf-v6-c-compass__sidebar.pf-m-end {
12543
- grid-area: sidebar-end;
12544
- padding: var(--pf-t--global--spacer--sm);
12615
+ .pf-v6-c-compass__main-footer {
12616
+ display: flex;
12617
+ justify-content: center;
12618
+ margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
12619
+ translate: 0 100%;
12545
12620
  }
12546
12621
 
12547
12622
  .pf-v6-c-compass__footer {
12548
12623
  display: flex;
12549
- grid-area: footer;
12624
+ grid-column: 1/-1;
12550
12625
  justify-content: center;
12626
+ translate: 0 100%;
12551
12627
  }
12552
12628
 
12553
12629
  .pf-v6-c-compass__message-bar {