@patternfly/patternfly 4.142.0 → 4.144.2

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 (19) hide show
  1. package/RELEASE-NOTES.md +40 -0
  2. package/components/DescriptionList/description-list.css +2 -6
  3. package/components/DescriptionList/description-list.scss +2 -5
  4. package/components/Masthead/masthead.css +8 -8
  5. package/components/Masthead/masthead.scss +2 -2
  6. package/components/Table/table-scrollable.css +53 -0
  7. package/components/Table/table-scrollable.scss +60 -0
  8. package/components/TextInputGroup/text-input-group.css +124 -0
  9. package/components/TextInputGroup/text-input-group.scss +157 -0
  10. package/components/_all.scss +2 -0
  11. package/docs/components/Table/examples/Table.css +4 -0
  12. package/docs/components/Table/examples/Table.md +1344 -0
  13. package/docs/components/TextInputGroup/examples/TextInputGroup.md +473 -0
  14. package/docs/demos/Table/examples/Table.md +3546 -0
  15. package/package.json +1 -1
  16. package/patternfly-no-reset.css +189 -14
  17. package/patternfly.css +189 -14
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.142.0",
4
+ "version": "4.144.2",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -9207,6 +9207,8 @@ label.pf-c-check, .pf-c-check__label,
9207
9207
  --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
9208
9208
  --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
9209
9209
  --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
9210
+ --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
9211
+ --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
9210
9212
  --pf-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
9211
9213
  --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--min);
9212
9214
  --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
@@ -9220,12 +9222,6 @@ label.pf-c-check, .pf-c-check__label,
9220
9222
  column-gap: var(--pf-c-description-list--ColumnGap);
9221
9223
  grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
9222
9224
  }
9223
- @media screen and (min-width: 768px) {
9224
- .pf-c-description-list {
9225
- --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
9226
- --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
9227
- }
9228
- }
9229
9225
  .pf-c-description-list[class*=pf-m-horizontal] {
9230
9226
  --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
9231
9227
  }
@@ -14988,7 +14984,7 @@ ul.pf-c-list {
14988
14984
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
14989
14985
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
14990
14986
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
14991
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
14987
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
14992
14988
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
14993
14989
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
14994
14990
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15065,7 +15061,7 @@ ul.pf-c-list {
15065
15061
  }
15066
15062
  .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
15067
15063
  --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor);
15068
- --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
15064
+ --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor);
15069
15065
  }
15070
15066
  .pf-c-masthead .pf-c-context-selector {
15071
15067
  --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
@@ -15169,7 +15165,7 @@ ul.pf-c-list {
15169
15165
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15170
15166
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15171
15167
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15172
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15168
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15173
15169
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15174
15170
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15175
15171
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15226,7 +15222,7 @@ ul.pf-c-list {
15226
15222
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15227
15223
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15228
15224
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15229
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15225
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15230
15226
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15231
15227
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15232
15228
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15286,7 +15282,7 @@ ul.pf-c-list {
15286
15282
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15287
15283
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15288
15284
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15289
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15285
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15290
15286
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15291
15287
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15292
15288
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15346,7 +15342,7 @@ ul.pf-c-list {
15346
15342
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15347
15343
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15348
15344
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15349
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15345
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15350
15346
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15351
15347
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15352
15348
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15406,7 +15402,7 @@ ul.pf-c-list {
15406
15402
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15407
15403
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15408
15404
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15409
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15405
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15410
15406
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15411
15407
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15412
15408
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15466,7 +15462,7 @@ ul.pf-c-list {
15466
15462
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15467
15463
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15468
15464
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15469
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15465
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15470
15466
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15471
15467
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15472
15468
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -23736,6 +23732,60 @@ svg.pf-c-spinner.pf-m-xl {
23736
23732
  --pf-c-table--cell--Width: 100%;
23737
23733
  }
23738
23734
 
23735
+ .pf-c-table {
23736
+ --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
23737
+ --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
23738
+ --pf-c-table__sticky-column--Left: 0;
23739
+ --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
23740
+ --pf-c-table__sticky-column--Top: 0;
23741
+ --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
23742
+ --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
23743
+ --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
23744
+ --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
23745
+ }
23746
+ .pf-c-table .pf-c-table__sticky-column {
23747
+ position: sticky;
23748
+ left: var(--pf-c-table__sticky-column--Left);
23749
+ z-index: var(--pf-c-table__sticky-column--ZIndex);
23750
+ min-width: var(--pf-c-table__sticky-column--MinWidth);
23751
+ background-color: var(--pf-c-table__sticky-column--BackgroundColor);
23752
+ background-clip: padding-box;
23753
+ }
23754
+ .pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
23755
+ position: absolute;
23756
+ top: 0;
23757
+ right: 0;
23758
+ bottom: 0;
23759
+ left: 0;
23760
+ pointer-events: none;
23761
+ content: "";
23762
+ border-right: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth) solid var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
23763
+ }
23764
+ .pf-c-table.pf-m-sticky-header {
23765
+ --pf-c-table--cell--Overflow: visible;
23766
+ }
23767
+ .pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
23768
+ z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
23769
+ }
23770
+
23771
+ .pf-c-scroll-outer-wrapper {
23772
+ --pf-c-scroll-outer-wrapper--MinHeight: 25rem;
23773
+ display: flex;
23774
+ flex-direction: column;
23775
+ max-width: 100%;
23776
+ min-height: var(--pf-c-scroll-outer-wrapper--MinHeight);
23777
+ max-height: 100%;
23778
+ overflow: hidden;
23779
+ }
23780
+
23781
+ .pf-c-scroll-inner-wrapper {
23782
+ display: flex;
23783
+ flex-direction: column;
23784
+ max-width: 100%;
23785
+ max-height: 100%;
23786
+ overflow: auto;
23787
+ }
23788
+
23739
23789
  .pf-c-table {
23740
23790
  --pf-c-table__tree-view-main--indent--base: calc(var(--pf-global--spacer--md) * 2 + var(--pf-c-table__tree-view-icon--MinWidth));
23741
23791
  --pf-c-table__tree-view-main--nested-indent--base: calc(var(--pf-c-table__tree-view-main--indent--base) - var(--pf-global--spacer--md));
@@ -25275,6 +25325,131 @@ svg.pf-c-spinner.pf-m-xl {
25275
25325
  }
25276
25326
  }
25277
25327
 
25328
+ .pf-c-text-input-group {
25329
+ --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
25330
+ --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
25331
+ --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
25332
+ --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-global--BorderColor--200);
25333
+ --pf-c-text-input-group--hover__text--after--BorderBottomColor: var(--pf-global--primary-color--100);
25334
+ --pf-c-text-input-group__text--focus-within--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
25335
+ --pf-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
25336
+ --pf-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-global--spacer--sm);
25337
+ --pf-c-text-input-group__text-input--PaddingTop: var(--pf-global--spacer--form-element);
25338
+ --pf-c-text-input-group__text-input--PaddingRight: var(--pf-global--spacer--sm);
25339
+ --pf-c-text-input-group__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
25340
+ --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
25341
+ --pf-c-text-input-group--m-icon__text-input--PaddingLeft: var(--pf-global--spacer--xl);
25342
+ --pf-c-text-input-group__text-input--MinWidth: 12ch;
25343
+ --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
25344
+ --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
25345
+ --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
25346
+ --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
25347
+ --pf-c-text-input-group__icon--TranslateY: -50%;
25348
+ --pf-c-text-input-group__utilities--MarginRight: var(--pf-global--spacer--sm);
25349
+ --pf-c-text-input-group__utilities--MarginLeft: var(--pf-global--spacer--xs);
25350
+ --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
25351
+ --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
25352
+ --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
25353
+ position: relative;
25354
+ display: flex;
25355
+ }
25356
+ .pf-c-text-input-group:hover {
25357
+ --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
25358
+ }
25359
+ .pf-c-text-input-group.pf-m-icon {
25360
+ --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-c-text-input-group--m-icon__text-input--PaddingLeft);
25361
+ }
25362
+
25363
+ .pf-c-text-input-group__main {
25364
+ display: flex;
25365
+ flex: 1;
25366
+ gap: var(--pf-global--spacer--sm);
25367
+ min-width: 0;
25368
+ }
25369
+ .pf-c-text-input-group__main > :first-child:not(.pf-c-text-input-group__text) {
25370
+ margin-left: var(--pf-c-text-input-group__main--first-child--not--text-input--MarginLeft);
25371
+ }
25372
+ .pf-c-text-input-group__main .pf-c-chip-group {
25373
+ overflow: auto;
25374
+ -ms-overflow-style: none;
25375
+ scrollbar-width: none;
25376
+ }
25377
+ .pf-c-text-input-group__main .pf-c-chip-group::-webkit-scrollbar {
25378
+ display: none;
25379
+ }
25380
+ .pf-c-text-input-group__main .pf-c-chip-group,
25381
+ .pf-c-text-input-group__main .pf-c-chip-group__list {
25382
+ flex-wrap: nowrap;
25383
+ }
25384
+
25385
+ .pf-c-text-input-group__text {
25386
+ display: inline-grid;
25387
+ grid-template-columns: 1fr;
25388
+ grid-template-areas: "text-input";
25389
+ flex: 1;
25390
+ }
25391
+ .pf-c-text-input-group__text::before, .pf-c-text-input-group__text::after {
25392
+ position: absolute;
25393
+ top: 0;
25394
+ right: 0;
25395
+ bottom: 0;
25396
+ left: 0;
25397
+ pointer-events: none;
25398
+ content: "";
25399
+ }
25400
+ .pf-c-text-input-group__text::before {
25401
+ border: var(--pf-c-text-input-group__text--before--BorderWidth) solid var(--pf-c-text-input-group__text--before--BorderColor);
25402
+ }
25403
+ .pf-c-text-input-group__text::after {
25404
+ border-bottom: var(--pf-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-c-text-input-group__text--after--BorderBottomColor);
25405
+ }
25406
+ .pf-c-text-input-group__text:hover, .pf-c-text-input-group__text:focus-within {
25407
+ --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group__text--hover__icon--Color);
25408
+ }
25409
+ .pf-c-text-input-group__text:focus-within {
25410
+ --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomWidth);
25411
+ --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomColor);
25412
+ }
25413
+
25414
+ .pf-c-text-input-group__icon {
25415
+ position: absolute;
25416
+ top: 50%;
25417
+ left: var(--pf-c-text-input-group__icon--Left);
25418
+ color: var(--pf-c-text-input-group__icon--Color);
25419
+ transform: translateY(var(--pf-c-text-input-group__icon--TranslateY));
25420
+ }
25421
+
25422
+ .pf-c-text-input-group__text-input {
25423
+ overflow: hidden;
25424
+ text-overflow: ellipsis;
25425
+ white-space: nowrap;
25426
+ position: relative;
25427
+ width: 100%;
25428
+ min-width: var(--pf-c-text-input-group__text-input--MinWidth);
25429
+ padding: var(--pf-c-text-input-group__text-input--PaddingTop) var(--pf-c-text-input-group__text-input--PaddingRight) var(--pf-c-text-input-group__text-input--PaddingBottom) var(--pf-c-text-input-group__text-input--PaddingLeft);
25430
+ border: 0;
25431
+ }
25432
+ .pf-c-text-input-group__text-input, .pf-c-text-input-group__text-input.pf-m-hint {
25433
+ grid-area: text-input;
25434
+ }
25435
+ .pf-c-text-input-group__text-input.pf-m-hint {
25436
+ color: var(--pf-c-text-input-group__text-input--m-hint--Color);
25437
+ }
25438
+
25439
+ .pf-c-text-input-group__utilities {
25440
+ display: flex;
25441
+ align-items: center;
25442
+ margin-right: var(--pf-c-text-input-group__utilities--MarginRight);
25443
+ margin-left: var(--pf-c-text-input-group__utilities--MarginLeft);
25444
+ }
25445
+ .pf-c-text-input-group__utilities > * + * {
25446
+ margin-left: var(--pf-c-text-input-group__utilities--child--MarginLeft);
25447
+ }
25448
+ .pf-c-text-input-group__utilities .pf-c-button {
25449
+ --pf-c-button--PaddingRight: var(--pf-c-text-input-group__utilities--c-button--PaddingRight);
25450
+ --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
25451
+ }
25452
+
25278
25453
  .pf-c-tile {
25279
25454
  --pf-c-tile--PaddingTop: var(--pf-global--spacer--lg);
25280
25455
  --pf-c-tile--PaddingRight: var(--pf-global--spacer--lg);
package/patternfly.css CHANGED
@@ -9343,6 +9343,8 @@ label.pf-c-check, .pf-c-check__label,
9343
9343
  --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
9344
9344
  --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
9345
9345
  --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
9346
+ --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
9347
+ --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
9346
9348
  --pf-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
9347
9349
  --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--min);
9348
9350
  --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
@@ -9356,12 +9358,6 @@ label.pf-c-check, .pf-c-check__label,
9356
9358
  column-gap: var(--pf-c-description-list--ColumnGap);
9357
9359
  grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
9358
9360
  }
9359
- @media screen and (min-width: 768px) {
9360
- .pf-c-description-list {
9361
- --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
9362
- --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
9363
- }
9364
- }
9365
9361
  .pf-c-description-list[class*=pf-m-horizontal] {
9366
9362
  --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
9367
9363
  }
@@ -15124,7 +15120,7 @@ ul.pf-c-list {
15124
15120
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15125
15121
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15126
15122
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15127
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15123
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15128
15124
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15129
15125
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15130
15126
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15201,7 +15197,7 @@ ul.pf-c-list {
15201
15197
  }
15202
15198
  .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
15203
15199
  --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor);
15204
- --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
15200
+ --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor);
15205
15201
  }
15206
15202
  .pf-c-masthead .pf-c-context-selector {
15207
15203
  --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
@@ -15305,7 +15301,7 @@ ul.pf-c-list {
15305
15301
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15306
15302
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15307
15303
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15308
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15304
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15309
15305
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15310
15306
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15311
15307
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15362,7 +15358,7 @@ ul.pf-c-list {
15362
15358
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15363
15359
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15364
15360
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15365
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15361
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15366
15362
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15367
15363
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15368
15364
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15422,7 +15418,7 @@ ul.pf-c-list {
15422
15418
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15423
15419
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15424
15420
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15425
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15421
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15426
15422
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15427
15423
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15428
15424
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15482,7 +15478,7 @@ ul.pf-c-list {
15482
15478
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15483
15479
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15484
15480
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15485
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15481
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15486
15482
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15487
15483
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15488
15484
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15542,7 +15538,7 @@ ul.pf-c-list {
15542
15538
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15543
15539
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15544
15540
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15545
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15541
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15546
15542
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15547
15543
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15548
15544
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -15602,7 +15598,7 @@ ul.pf-c-list {
15602
15598
  --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
15603
15599
  --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
15604
15600
  --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
15605
- --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
15601
+ --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
15606
15602
  --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
15607
15603
  --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
15608
15604
  --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -23872,6 +23868,60 @@ svg.pf-c-spinner.pf-m-xl {
23872
23868
  --pf-c-table--cell--Width: 100%;
23873
23869
  }
23874
23870
 
23871
+ .pf-c-table {
23872
+ --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
23873
+ --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
23874
+ --pf-c-table__sticky-column--Left: 0;
23875
+ --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
23876
+ --pf-c-table__sticky-column--Top: 0;
23877
+ --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
23878
+ --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
23879
+ --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
23880
+ --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
23881
+ }
23882
+ .pf-c-table .pf-c-table__sticky-column {
23883
+ position: sticky;
23884
+ left: var(--pf-c-table__sticky-column--Left);
23885
+ z-index: var(--pf-c-table__sticky-column--ZIndex);
23886
+ min-width: var(--pf-c-table__sticky-column--MinWidth);
23887
+ background-color: var(--pf-c-table__sticky-column--BackgroundColor);
23888
+ background-clip: padding-box;
23889
+ }
23890
+ .pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
23891
+ position: absolute;
23892
+ top: 0;
23893
+ right: 0;
23894
+ bottom: 0;
23895
+ left: 0;
23896
+ pointer-events: none;
23897
+ content: "";
23898
+ border-right: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth) solid var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
23899
+ }
23900
+ .pf-c-table.pf-m-sticky-header {
23901
+ --pf-c-table--cell--Overflow: visible;
23902
+ }
23903
+ .pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
23904
+ z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
23905
+ }
23906
+
23907
+ .pf-c-scroll-outer-wrapper {
23908
+ --pf-c-scroll-outer-wrapper--MinHeight: 25rem;
23909
+ display: flex;
23910
+ flex-direction: column;
23911
+ max-width: 100%;
23912
+ min-height: var(--pf-c-scroll-outer-wrapper--MinHeight);
23913
+ max-height: 100%;
23914
+ overflow: hidden;
23915
+ }
23916
+
23917
+ .pf-c-scroll-inner-wrapper {
23918
+ display: flex;
23919
+ flex-direction: column;
23920
+ max-width: 100%;
23921
+ max-height: 100%;
23922
+ overflow: auto;
23923
+ }
23924
+
23875
23925
  .pf-c-table {
23876
23926
  --pf-c-table__tree-view-main--indent--base: calc(var(--pf-global--spacer--md) * 2 + var(--pf-c-table__tree-view-icon--MinWidth));
23877
23927
  --pf-c-table__tree-view-main--nested-indent--base: calc(var(--pf-c-table__tree-view-main--indent--base) - var(--pf-global--spacer--md));
@@ -25411,6 +25461,131 @@ svg.pf-c-spinner.pf-m-xl {
25411
25461
  }
25412
25462
  }
25413
25463
 
25464
+ .pf-c-text-input-group {
25465
+ --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
25466
+ --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
25467
+ --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
25468
+ --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-global--BorderColor--200);
25469
+ --pf-c-text-input-group--hover__text--after--BorderBottomColor: var(--pf-global--primary-color--100);
25470
+ --pf-c-text-input-group__text--focus-within--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
25471
+ --pf-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
25472
+ --pf-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-global--spacer--sm);
25473
+ --pf-c-text-input-group__text-input--PaddingTop: var(--pf-global--spacer--form-element);
25474
+ --pf-c-text-input-group__text-input--PaddingRight: var(--pf-global--spacer--sm);
25475
+ --pf-c-text-input-group__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
25476
+ --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
25477
+ --pf-c-text-input-group--m-icon__text-input--PaddingLeft: var(--pf-global--spacer--xl);
25478
+ --pf-c-text-input-group__text-input--MinWidth: 12ch;
25479
+ --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
25480
+ --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
25481
+ --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
25482
+ --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
25483
+ --pf-c-text-input-group__icon--TranslateY: -50%;
25484
+ --pf-c-text-input-group__utilities--MarginRight: var(--pf-global--spacer--sm);
25485
+ --pf-c-text-input-group__utilities--MarginLeft: var(--pf-global--spacer--xs);
25486
+ --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
25487
+ --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
25488
+ --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
25489
+ position: relative;
25490
+ display: flex;
25491
+ }
25492
+ .pf-c-text-input-group:hover {
25493
+ --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
25494
+ }
25495
+ .pf-c-text-input-group.pf-m-icon {
25496
+ --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-c-text-input-group--m-icon__text-input--PaddingLeft);
25497
+ }
25498
+
25499
+ .pf-c-text-input-group__main {
25500
+ display: flex;
25501
+ flex: 1;
25502
+ gap: var(--pf-global--spacer--sm);
25503
+ min-width: 0;
25504
+ }
25505
+ .pf-c-text-input-group__main > :first-child:not(.pf-c-text-input-group__text) {
25506
+ margin-left: var(--pf-c-text-input-group__main--first-child--not--text-input--MarginLeft);
25507
+ }
25508
+ .pf-c-text-input-group__main .pf-c-chip-group {
25509
+ overflow: auto;
25510
+ -ms-overflow-style: none;
25511
+ scrollbar-width: none;
25512
+ }
25513
+ .pf-c-text-input-group__main .pf-c-chip-group::-webkit-scrollbar {
25514
+ display: none;
25515
+ }
25516
+ .pf-c-text-input-group__main .pf-c-chip-group,
25517
+ .pf-c-text-input-group__main .pf-c-chip-group__list {
25518
+ flex-wrap: nowrap;
25519
+ }
25520
+
25521
+ .pf-c-text-input-group__text {
25522
+ display: inline-grid;
25523
+ grid-template-columns: 1fr;
25524
+ grid-template-areas: "text-input";
25525
+ flex: 1;
25526
+ }
25527
+ .pf-c-text-input-group__text::before, .pf-c-text-input-group__text::after {
25528
+ position: absolute;
25529
+ top: 0;
25530
+ right: 0;
25531
+ bottom: 0;
25532
+ left: 0;
25533
+ pointer-events: none;
25534
+ content: "";
25535
+ }
25536
+ .pf-c-text-input-group__text::before {
25537
+ border: var(--pf-c-text-input-group__text--before--BorderWidth) solid var(--pf-c-text-input-group__text--before--BorderColor);
25538
+ }
25539
+ .pf-c-text-input-group__text::after {
25540
+ border-bottom: var(--pf-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-c-text-input-group__text--after--BorderBottomColor);
25541
+ }
25542
+ .pf-c-text-input-group__text:hover, .pf-c-text-input-group__text:focus-within {
25543
+ --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group__text--hover__icon--Color);
25544
+ }
25545
+ .pf-c-text-input-group__text:focus-within {
25546
+ --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomWidth);
25547
+ --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomColor);
25548
+ }
25549
+
25550
+ .pf-c-text-input-group__icon {
25551
+ position: absolute;
25552
+ top: 50%;
25553
+ left: var(--pf-c-text-input-group__icon--Left);
25554
+ color: var(--pf-c-text-input-group__icon--Color);
25555
+ transform: translateY(var(--pf-c-text-input-group__icon--TranslateY));
25556
+ }
25557
+
25558
+ .pf-c-text-input-group__text-input {
25559
+ overflow: hidden;
25560
+ text-overflow: ellipsis;
25561
+ white-space: nowrap;
25562
+ position: relative;
25563
+ width: 100%;
25564
+ min-width: var(--pf-c-text-input-group__text-input--MinWidth);
25565
+ padding: var(--pf-c-text-input-group__text-input--PaddingTop) var(--pf-c-text-input-group__text-input--PaddingRight) var(--pf-c-text-input-group__text-input--PaddingBottom) var(--pf-c-text-input-group__text-input--PaddingLeft);
25566
+ border: 0;
25567
+ }
25568
+ .pf-c-text-input-group__text-input, .pf-c-text-input-group__text-input.pf-m-hint {
25569
+ grid-area: text-input;
25570
+ }
25571
+ .pf-c-text-input-group__text-input.pf-m-hint {
25572
+ color: var(--pf-c-text-input-group__text-input--m-hint--Color);
25573
+ }
25574
+
25575
+ .pf-c-text-input-group__utilities {
25576
+ display: flex;
25577
+ align-items: center;
25578
+ margin-right: var(--pf-c-text-input-group__utilities--MarginRight);
25579
+ margin-left: var(--pf-c-text-input-group__utilities--MarginLeft);
25580
+ }
25581
+ .pf-c-text-input-group__utilities > * + * {
25582
+ margin-left: var(--pf-c-text-input-group__utilities--child--MarginLeft);
25583
+ }
25584
+ .pf-c-text-input-group__utilities .pf-c-button {
25585
+ --pf-c-button--PaddingRight: var(--pf-c-text-input-group__utilities--c-button--PaddingRight);
25586
+ --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
25587
+ }
25588
+
25414
25589
  .pf-c-tile {
25415
25590
  --pf-c-tile--PaddingTop: var(--pf-global--spacer--lg);
25416
25591
  --pf-c-tile--PaddingRight: var(--pf-global--spacer--lg);