@patternfly/patternfly 6.2.0 → 6.2.1

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 (36) hide show
  1. package/README.md +1 -1
  2. package/components/Card/card.css +3 -0
  3. package/components/Card/card.scss +3 -0
  4. package/components/CodeEditor/code-editor.css +3 -0
  5. package/components/CodeEditor/code-editor.scss +3 -1
  6. package/components/Drawer/drawer.css +28 -14
  7. package/components/Drawer/drawer.scss +28 -9
  8. package/components/FormControl/form-control.css +1 -2
  9. package/components/FormControl/form-control.scss +1 -5
  10. package/components/Page/page.css +4 -3
  11. package/components/Page/page.scss +4 -2
  12. package/components/Tabs/tabs.css +65 -0
  13. package/components/Tabs/tabs.scss +77 -0
  14. package/components/Truncate/truncate.css +5 -0
  15. package/components/Truncate/truncate.scss +6 -0
  16. package/components/_index.css +108 -19
  17. package/docs/components/Divider/examples/Divider.md +1 -1
  18. package/docs/components/Drawer/examples/Drawer.md +4 -0
  19. package/docs/components/Page/examples/Page.md +1 -0
  20. package/docs/components/Table/examples/Table.md +4 -4
  21. package/docs/components/Tabs/examples/Tabs.md +6741 -12
  22. package/docs/components/Truncate/examples/Truncate.md +53 -10
  23. package/docs/demos/Card/examples/Card.md +57 -0
  24. package/docs/demos/DescriptionList/examples/DescriptionList.md +38 -0
  25. package/docs/demos/Drawer/examples/Drawer.md +38 -0
  26. package/docs/demos/Masthead/examples/Masthead.md +1 -1
  27. package/docs/demos/Nav/examples/Nav.md +2 -2
  28. package/docs/demos/Page/examples/Page.md +355 -0
  29. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +76 -0
  30. package/docs/demos/Table/examples/Table.md +41 -21
  31. package/docs/demos/Tabs/examples/Tabs.md +570 -0
  32. package/package.json +6 -6
  33. package/patternfly-no-globals.css +108 -19
  34. package/patternfly.css +108 -19
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
@@ -2329,6 +2329,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2329
2329
  --pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
2330
2330
  --pf-v6-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
2331
2331
  --pf-v6-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
2332
+ --pf-v6-c-card__title-text--OverflowWrap: break-word;
2332
2333
  --pf-v6-c-card--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
2333
2334
  --pf-v6-c-card__body--FontSize: var(--pf-t--global--font--size--body--default);
2334
2335
  --pf-v6-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default);
@@ -2541,11 +2542,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2541
2542
  }
2542
2543
 
2543
2544
  .pf-v6-c-card__title-text {
2545
+ overflow: auto;
2544
2546
  font-family: var(--pf-v6-c-card__title-text--FontFamily);
2545
2547
  font-size: var(--pf-v6-c-card__title-text--FontSize);
2546
2548
  font-weight: var(--pf-v6-c-card__title-text--FontWeight);
2547
2549
  line-height: var(--pf-v6-c-card__title-text--LineHeight);
2548
2550
  color: var(--pf-v6-c-card__title-text--Color);
2551
+ overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
2549
2552
  }
2550
2553
 
2551
2554
  .pf-v6-c-card__actions {
@@ -3048,6 +3051,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3048
3051
  .pf-v6-c-code-editor__main .monaco-editor {
3049
3052
  background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
3050
3053
  }
3054
+ .pf-v6-c-code-editor__main a.label-name {
3055
+ text-decoration-line: none;
3056
+ }
3051
3057
 
3052
3058
  .pf-v6-c-code-editor__header + .pf-v6-c-code-editor__main {
3053
3059
  border-block-start-width: 0;
@@ -5304,9 +5310,15 @@ ul) {
5304
5310
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
5305
5311
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5306
5312
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5313
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus), var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
5314
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--fade);
5315
+ --pf-v6-c-drawer__panel--TransitionDelay--expand--focus: 0s;
5307
5316
  --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
5308
- --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
5309
- --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
5317
+ --pf-v6-c-drawer__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
5318
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-v6-c-drawer__panel--TransitionDuration--fade), 0s, 0s;
5319
+ --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
5320
+ --pf-v6-c-drawer__panel--Opacity: 0;
5321
+ --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
5310
5322
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
5311
5323
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
5312
5324
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -5396,6 +5408,17 @@ ul) {
5396
5408
  --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
5397
5409
  --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
5398
5410
  }
5411
+ @media screen and (prefers-reduced-motion: no-preference) {
5412
+ .pf-v6-c-drawer {
5413
+ --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
5414
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
5415
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
5416
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
5417
+ --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
5418
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
5419
+ --pf-v6-c-drawer__panel--Opacity: 1;
5420
+ }
5421
+ }
5399
5422
  @media screen and (min-width: 75rem) {
5400
5423
  .pf-v6-c-drawer {
5401
5424
  --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
@@ -5443,8 +5466,13 @@ ul) {
5443
5466
  .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
5444
5467
  flex-direction: column;
5445
5468
  }
5469
+ .pf-v6-c-drawer.pf-m-expanded {
5470
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
5471
+ }
5446
5472
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5447
5473
  transform: translateX(-100%);
5474
+ --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
5475
+ visibility: visible;
5448
5476
  }
5449
5477
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5450
5478
  transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
@@ -5517,8 +5545,11 @@ ul) {
5517
5545
  order: 1;
5518
5546
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
5519
5547
  overflow: auto;
5548
+ visibility: hidden;
5520
5549
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
5521
5550
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
5551
+ opacity: var(--pf-v6-c-drawer__panel--Opacity);
5552
+ transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
5522
5553
  transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
5523
5554
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
5524
5555
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
@@ -5575,17 +5606,6 @@ ul) {
5575
5606
  padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
5576
5607
  }
5577
5608
 
5578
- @keyframes pf-remove-tab-focus {
5579
- to {
5580
- visibility: hidden;
5581
- }
5582
- }
5583
- .pf-v6-c-drawer__panel[hidden] {
5584
- animation-name: pf-remove-tab-focus;
5585
- animation-delay: var(--pf-v6-c-drawer__panel--TransitionDuration);
5586
- animation-fill-mode: forwards;
5587
- }
5588
-
5589
5609
  .pf-v6-c-drawer__head {
5590
5610
  display: grid;
5591
5611
  grid-template-columns: auto;
@@ -5693,7 +5713,7 @@ ul) {
5693
5713
  .pf-v6-c-drawer {
5694
5714
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
5695
5715
  }
5696
- .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5716
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5697
5717
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
5698
5718
  }
5699
5719
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
@@ -7067,12 +7087,11 @@ ul) {
7067
7087
  padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart);
7068
7088
  padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
7069
7089
  color: var(--pf-v6-c-form-control--Color);
7090
+ appearance: none;
7070
7091
  background-color: transparent;
7071
7092
  border: none;
7072
7093
  border-radius: var(--pf-v6-c-form-control--BorderRadius);
7073
7094
  outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
7074
- -moz-appearance: none;
7075
- -webkit-appearance: none;
7076
7095
  }
7077
7096
  .pf-v6-c-form-control > ::placeholder {
7078
7097
  color: var(--pf-v6-c-form-control--m-placeholder--Color);
@@ -11746,8 +11765,9 @@ ul.pf-v6-c-list {
11746
11765
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
11747
11766
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
11748
11767
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
11749
- --pf-v6-c-page__sidebar--Width: 18.125rem;
11750
- --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
11768
+ --pf-v6-c-page__sidebar--Width--base: 18.125rem;
11769
+ --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
11770
+ --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
11751
11771
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11752
11772
  --pf-v6-c-page__sidebar--BoxShadow: none;
11753
11773
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -12175,7 +12195,7 @@ ul.pf-v6-c-list {
12175
12195
  -webkit-overflow-scrolling: touch;
12176
12196
  }
12177
12197
  @media screen and (min-width: 75rem) {
12178
- .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
12198
+ .pf-v6-c-page.pf-m-no-sidebar, .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
12179
12199
  .pf-v6-c-masthead + .pf-v6-c-page__drawer,
12180
12200
  .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
12181
12201
  --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
@@ -18315,6 +18335,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18315
18335
  }
18316
18336
  }
18317
18337
 
18338
+ @property --pf-v6-c-tabs--link-accent--length {
18339
+ syntax: "<length>";
18340
+ inherits: true;
18341
+ initial-value: 0px;
18342
+ }
18343
+ @property --pf-v6-c-tabs--link-accent--start {
18344
+ syntax: "<length>";
18345
+ inherits: true;
18346
+ initial-value: 0px;
18347
+ }
18318
18348
  .pf-v6-c-tabs {
18319
18349
  --pf-v6-c-tabs--inset: 0;
18320
18350
  --pf-v6-c-tabs--Width: auto;
@@ -18376,6 +18406,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18376
18406
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
18377
18407
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
18378
18408
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
18409
+ --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
18410
+ --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
18379
18411
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
18380
18412
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
18381
18413
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -18400,6 +18432,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18400
18432
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
18401
18433
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
18402
18434
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
18435
+ --pf-v6-c-tabs--link-accent--start: 0;
18436
+ --pf-v6-c-tabs--link-accent--length: auto;
18437
+ --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
18438
+ --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
18439
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
18440
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
18441
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
18442
+ --pf-v6-c-tabs--link-accent--Width: initial;
18443
+ --pf-v6-c-tabs--link-accent--Height: 0;
18444
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
18445
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
18446
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
18447
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
18448
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
18449
+ --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
18450
+ --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
18451
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
18452
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
18453
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
18454
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
18403
18455
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
18404
18456
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18405
18457
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -18557,6 +18609,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18557
18609
  --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
18558
18610
  --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
18559
18611
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
18612
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
18613
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
18614
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
18615
+ --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
18616
+ --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
18617
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
18618
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
18560
18619
  display: inline-flex;
18561
18620
  flex-direction: column;
18562
18621
  height: 100%;
@@ -18819,6 +18878,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18819
18878
  text-decoration-line: none;
18820
18879
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
18821
18880
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
18881
+ transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
18822
18882
  }
18823
18883
  .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
18824
18884
  --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -19131,6 +19191,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19131
19191
  }
19132
19192
  }
19133
19193
 
19194
+ @media (prefers-reduced-motion: no-preference) {
19195
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
19196
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
19197
+ content: revert;
19198
+ }
19199
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
19200
+ position: absolute;
19201
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
19202
+ inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
19203
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
19204
+ width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
19205
+ height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
19206
+ content: "";
19207
+ border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
19208
+ border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
19209
+ border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
19210
+ transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
19211
+ transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
19212
+ transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
19213
+ }
19214
+ .pf-v6-c-tabs.pf-m-initializing-accent {
19215
+ --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
19216
+ }
19217
+ }
19134
19218
  .pf-v6-c-text-input-group {
19135
19219
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
19136
19220
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
@@ -21742,6 +21826,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21742
21826
  align-items: baseline;
21743
21827
  min-width: var(--pf-v6-c-truncate--MinWidth);
21744
21828
  }
21829
+ .pf-v6-c-truncate.pf-m-fixed {
21830
+ display: inline;
21831
+ align-items: revert;
21832
+ min-width: revert;
21833
+ }
21745
21834
 
21746
21835
  .pf-v6-c-truncate__start,
21747
21836
  .pf-v6-c-truncate__end {
@@ -18,7 +18,7 @@ cssPrefix: pf-v6-c-divider
18
18
  ```html
19
19
  <ul role="list">
20
20
  <li>List item one</li>
21
- <li class="pf-v6-c-divider" role="separator"></li>
21
+ <li class="pf-v6-c-divider" role="presentation"></li>
22
22
  <li>List item two</li>
23
23
  </ul>
24
24
 
@@ -550,6 +550,7 @@ cssPrefix: pf-v6-c-drawer
550
550
  class="pf-v6-c-drawer__splitter pf-m-vertical"
551
551
  role="separator"
552
552
  tabindex="0"
553
+ aria-valuenow="50"
553
554
  aria-orientation="vertical"
554
555
  >
555
556
  <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -597,6 +598,7 @@ cssPrefix: pf-v6-c-drawer
597
598
  class="pf-v6-c-drawer__splitter pf-m-vertical"
598
599
  role="separator"
599
600
  tabindex="0"
601
+ aria-valuenow="50"
600
602
  aria-orientation="vertical"
601
603
  >
602
604
  <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -647,6 +649,7 @@ cssPrefix: pf-v6-c-drawer
647
649
  class="pf-v6-c-drawer__splitter"
648
650
  role="separator"
649
651
  tabindex="0"
652
+ aria-valuenow="50"
650
653
  aria-orientation="horizontal"
651
654
  >
652
655
  <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -694,6 +697,7 @@ cssPrefix: pf-v6-c-drawer
694
697
  class="pf-v6-c-drawer__splitter pf-m-vertical"
695
698
  role="separator"
696
699
  tabindex="0"
700
+ aria-valuenow="50"
697
701
  aria-orientation="vertical"
698
702
  >
699
703
  <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -412,6 +412,7 @@ This component provides the basic chrome for a page, including sidebar and main
412
412
  | `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required** |
413
413
  | `.pf-v6-c-page__main-group` | `<div>` | Creates the group of `.pf-v6-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
414
414
  | `.pf-v6-c-page__drawer` | `<div>` | Creates a container for the drawer component when placing the main page element in the drawer body. |
415
+ | `.pf-m-no-sidebar` | `.pf-v6-c-page` | Modifies the page grid for layouts without a sidebar. |
415
416
  | `.pf-m-expanded` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the expanded state. |
416
417
  | `.pf-m-collapsed` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the collapsed state. |
417
418
  | `.pf-m-page-insets` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body padding/inset to visually match padding of page elements. |
@@ -1150,7 +1150,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
1150
1150
  class="pf-v6-c-button pf-m-plain"
1151
1151
  id="table-expandable-expandable-toggle-thead"
1152
1152
  type="button"
1153
- aria-controls="table-expandable-content-thead"
1153
+ aria-controls="table-expandable-content-1 table-expandable-content-2 table-expandable-content-3 table-expandable-content-4"
1154
1154
  aria-labelledby="table-expandable-node-thead"
1155
1155
  aria-label="Toggle all rows"
1156
1156
  >
@@ -1620,7 +1620,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
1620
1620
  id="expandable-set-width-columns-example-expandable-toggle-thead"
1621
1621
  type="button"
1622
1622
  aria-expanded="true"
1623
- aria-controls="expandable-set-width-columns-example-content-thead"
1623
+ aria-controls="expandable-set-width-columns-example-content-1 expandable-set-width-columns-example-content-2 expandable-set-width-columns-example-content-3 expandable-set-width-columns-example-content-4"
1624
1624
  aria-labelledby="expandable-set-width-columns-example-node-thead"
1625
1625
  aria-label="Toggle all rows"
1626
1626
  aria-describedby="true"
@@ -2096,7 +2096,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
2096
2096
  class="pf-v6-c-button pf-m-plain"
2097
2097
  id="table-expandable-nested-table-expandable-toggle-thead"
2098
2098
  type="button"
2099
- aria-controls="table-expandable-nested-table-content-thead"
2099
+ aria-controls="table-expandable-nested-table-content-1 table-expandable-nested-table-content-2 table-expandable-nested-table-content-3 table-expandable-nested-table-content-4"
2100
2100
  aria-labelledby="table-expandable-nested-table-node-thead"
2101
2101
  aria-label="Toggle all rows"
2102
2102
  >
@@ -5285,7 +5285,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
5285
5285
  class="pf-v6-c-button pf-m-small pf-m-plain"
5286
5286
  id="table-compact-expandable-expandable-toggle-thead"
5287
5287
  type="button"
5288
- aria-controls="table-compact-expandable-content-thead"
5288
+ aria-controls="table-compact-expandable-content-1 table-compact-expandable-content-2 table-compact-expandable-content-3 table-compact-expandable-content-4"
5289
5289
  aria-labelledby="table-compact-expandable-node-thead"
5290
5290
  aria-label="Toggle all rows"
5291
5291
  >