@patternfly/react-core 4.239.1 → 4.241.0

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 (91) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/esm/next/components/Wizard/Wizard.d.ts +4 -2
  3. package/dist/esm/next/components/Wizard/Wizard.d.ts.map +1 -1
  4. package/dist/esm/next/components/Wizard/Wizard.js +9 -18
  5. package/dist/esm/next/components/Wizard/Wizard.js.map +1 -1
  6. package/dist/esm/next/components/Wizard/WizardBody.d.ts +1 -1
  7. package/dist/esm/next/components/Wizard/WizardBody.d.ts.map +1 -1
  8. package/dist/esm/next/components/Wizard/WizardContext.d.ts +3 -3
  9. package/dist/esm/next/components/Wizard/WizardContext.d.ts.map +1 -1
  10. package/dist/esm/next/components/Wizard/WizardContext.js +12 -2
  11. package/dist/esm/next/components/Wizard/WizardContext.js.map +1 -1
  12. package/dist/esm/next/components/Wizard/WizardNav.d.ts +1 -1
  13. package/dist/esm/next/components/Wizard/WizardNav.d.ts.map +1 -1
  14. package/dist/esm/next/components/Wizard/WizardNav.js +2 -2
  15. package/dist/esm/next/components/Wizard/WizardNav.js.map +1 -1
  16. package/dist/esm/next/components/Wizard/WizardNavItem.d.ts.map +1 -1
  17. package/dist/esm/next/components/Wizard/WizardNavItem.js +4 -1
  18. package/dist/esm/next/components/Wizard/WizardNavItem.js.map +1 -1
  19. package/dist/esm/next/components/Wizard/WizardStep.d.ts +3 -3
  20. package/dist/esm/next/components/Wizard/WizardStep.d.ts.map +1 -1
  21. package/dist/esm/next/components/Wizard/WizardStep.js +1 -1
  22. package/dist/esm/next/components/Wizard/WizardStep.js.map +1 -1
  23. package/dist/esm/next/components/Wizard/WizardToggle.d.ts +17 -8
  24. package/dist/esm/next/components/Wizard/WizardToggle.d.ts.map +1 -1
  25. package/dist/esm/next/components/Wizard/WizardToggle.js +29 -24
  26. package/dist/esm/next/components/Wizard/WizardToggle.js.map +1 -1
  27. package/dist/esm/next/components/Wizard/hooks/useWizardFooter.d.ts +2 -1
  28. package/dist/esm/next/components/Wizard/hooks/useWizardFooter.d.ts.map +1 -1
  29. package/dist/esm/next/components/Wizard/hooks/useWizardFooter.js.map +1 -1
  30. package/dist/esm/next/components/Wizard/types.d.ts +7 -1
  31. package/dist/esm/next/components/Wizard/types.d.ts.map +1 -1
  32. package/dist/esm/next/components/Wizard/types.js.map +1 -1
  33. package/dist/esm/next/components/Wizard/utils.d.ts.map +1 -1
  34. package/dist/esm/next/components/Wizard/utils.js +16 -18
  35. package/dist/esm/next/components/Wizard/utils.js.map +1 -1
  36. package/dist/js/next/components/Wizard/Wizard.d.ts +4 -2
  37. package/dist/js/next/components/Wizard/Wizard.d.ts.map +1 -1
  38. package/dist/js/next/components/Wizard/Wizard.js +6 -15
  39. package/dist/js/next/components/Wizard/Wizard.js.map +1 -1
  40. package/dist/js/next/components/Wizard/WizardBody.d.ts +1 -1
  41. package/dist/js/next/components/Wizard/WizardBody.d.ts.map +1 -1
  42. package/dist/js/next/components/Wizard/WizardContext.d.ts +3 -3
  43. package/dist/js/next/components/Wizard/WizardContext.d.ts.map +1 -1
  44. package/dist/js/next/components/Wizard/WizardContext.js +12 -2
  45. package/dist/js/next/components/Wizard/WizardContext.js.map +1 -1
  46. package/dist/js/next/components/Wizard/WizardNav.d.ts +1 -1
  47. package/dist/js/next/components/Wizard/WizardNav.d.ts.map +1 -1
  48. package/dist/js/next/components/Wizard/WizardNav.js +2 -2
  49. package/dist/js/next/components/Wizard/WizardNav.js.map +1 -1
  50. package/dist/js/next/components/Wizard/WizardNavItem.d.ts.map +1 -1
  51. package/dist/js/next/components/Wizard/WizardNavItem.js +4 -1
  52. package/dist/js/next/components/Wizard/WizardNavItem.js.map +1 -1
  53. package/dist/js/next/components/Wizard/WizardStep.d.ts +3 -3
  54. package/dist/js/next/components/Wizard/WizardStep.d.ts.map +1 -1
  55. package/dist/js/next/components/Wizard/WizardStep.js +1 -1
  56. package/dist/js/next/components/Wizard/WizardStep.js.map +1 -1
  57. package/dist/js/next/components/Wizard/WizardToggle.d.ts +17 -8
  58. package/dist/js/next/components/Wizard/WizardToggle.d.ts.map +1 -1
  59. package/dist/js/next/components/Wizard/WizardToggle.js +32 -26
  60. package/dist/js/next/components/Wizard/WizardToggle.js.map +1 -1
  61. package/dist/js/next/components/Wizard/hooks/useWizardFooter.d.ts +2 -1
  62. package/dist/js/next/components/Wizard/hooks/useWizardFooter.d.ts.map +1 -1
  63. package/dist/js/next/components/Wizard/hooks/useWizardFooter.js.map +1 -1
  64. package/dist/js/next/components/Wizard/types.d.ts +7 -1
  65. package/dist/js/next/components/Wizard/types.d.ts.map +1 -1
  66. package/dist/js/next/components/Wizard/types.js.map +1 -1
  67. package/dist/js/next/components/Wizard/utils.d.ts.map +1 -1
  68. package/dist/js/next/components/Wizard/utils.js +16 -18
  69. package/dist/js/next/components/Wizard/utils.js.map +1 -1
  70. package/dist/umd/react-core.min.css +355 -355
  71. package/package.json +5 -5
  72. package/src/next/components/Wizard/Wizard.tsx +34 -47
  73. package/src/next/components/Wizard/WizardBody.tsx +1 -1
  74. package/src/next/components/Wizard/WizardContext.tsx +29 -5
  75. package/src/next/components/Wizard/WizardNav.tsx +3 -3
  76. package/src/next/components/Wizard/WizardNavItem.tsx +4 -1
  77. package/src/next/components/Wizard/WizardStep.tsx +4 -4
  78. package/src/next/components/Wizard/WizardToggle.tsx +74 -49
  79. package/src/next/components/Wizard/__tests__/Wizard.test.tsx +316 -298
  80. package/src/next/components/Wizard/__tests__/WizardBody.test.tsx +41 -0
  81. package/src/next/components/Wizard/__tests__/WizardFooter.test.tsx +93 -0
  82. package/src/next/components/Wizard/__tests__/WizardStep.test.tsx +33 -0
  83. package/src/next/components/Wizard/__tests__/WizardToggle.test.tsx +113 -0
  84. package/src/next/components/Wizard/__tests__/utils.test.tsx +66 -0
  85. package/src/next/components/Wizard/examples/Wizard.md +3 -5
  86. package/src/next/components/Wizard/examples/WizardCustomNav.tsx +2 -2
  87. package/src/next/components/Wizard/examples/WizardKitchenSink.tsx +3 -11
  88. package/src/next/components/Wizard/hooks/__tests__/useWizardFooter.test.tsx +51 -0
  89. package/src/next/components/Wizard/hooks/useWizardFooter.tsx +3 -1
  90. package/src/next/components/Wizard/types.tsx +7 -1
  91. package/src/next/components/Wizard/utils.ts +23 -21
@@ -297,6 +297,238 @@
297
297
  --pf-c-action-list--child--spacer: var(--pf-c-action-list--m-icon--spacer);
298
298
  }
299
299
 
300
+ .pf-c-alert {
301
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
302
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
303
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
304
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
305
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
306
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
307
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
308
+ }
309
+
310
+ .pf-c-alert {
311
+ --pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg);
312
+ --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100);
313
+ --pf-c-alert--GridTemplateColumns: max-content 1fr max-content;
314
+ --pf-c-alert--GridTemplateAreas:
315
+ "icon title action"
316
+ ". description description"
317
+ ". actiongroup actiongroup";
318
+ --pf-c-alert--BorderTopWidth: var(--pf-global--BorderWidth--md);
319
+ --pf-c-alert--BorderTopColor: var(--pf-global--default-color--200);
320
+ --pf-c-alert--PaddingTop: var(--pf-global--spacer--md);
321
+ --pf-c-alert--PaddingRight: var(--pf-global--spacer--md);
322
+ --pf-c-alert--PaddingBottom: var(--pf-global--spacer--md);
323
+ --pf-c-alert--PaddingLeft: var(--pf-global--spacer--md);
324
+ --pf-c-alert__FontSize: var(--pf-global--FontSize--sm);
325
+ --pf-c-alert__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element) - 0.0625rem);
326
+ --pf-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element));
327
+ --pf-c-alert__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
328
+ --pf-c-alert__toggle-icon--Rotate: 0;
329
+ --pf-c-alert__toggle-icon--Transition: var(--pf-global--Transition);
330
+ --pf-c-alert__icon--Color: var(--pf-global--default-color--200);
331
+ --pf-c-alert__icon--MarginTop: 0.0625rem;
332
+ --pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm);
333
+ --pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md);
334
+ --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--bold);
335
+ --pf-c-alert__title--Color: var(--pf-global--default-color--300);
336
+ --pf-c-alert__title--max-lines: 1;
337
+ --pf-c-alert__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
338
+ --pf-c-alert__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
339
+ --pf-c-alert__action--TranslateY: 0.125rem;
340
+ --pf-c-alert__action--MarginRight: calc(var(--pf-global--spacer--sm) * -1);
341
+ --pf-c-alert__description--PaddingTop: var(--pf-global--spacer--xs);
342
+ --pf-c-alert__action-group--PaddingTop-base: var(--pf-global--spacer--xs);
343
+ --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
344
+ --pf-c-alert__description--action-group--PaddingTop-base: var(--pf-global--spacer--md);
345
+ --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
346
+ --pf-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-global--spacer--lg);
347
+ --pf-c-alert--m-success--BorderTopColor: var(--pf-global--success-color--100);
348
+ --pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--100);
349
+ --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--200);
350
+ --pf-c-alert--m-danger--BorderTopColor: var(--pf-global--danger-color--100);
351
+ --pf-c-alert--m-danger__icon--Color: var(--pf-global--danger-color--100);
352
+ --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--200);
353
+ --pf-c-alert--m-warning--BorderTopColor: var(--pf-global--warning-color--100);
354
+ --pf-c-alert--m-warning__icon--Color: var(--pf-global--warning-color--100);
355
+ --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--200);
356
+ --pf-c-alert--m-info--BorderTopColor: var(--pf-global--info-color--100);
357
+ --pf-c-alert--m-info__icon--Color: var(--pf-global--info-color--100);
358
+ --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--200);
359
+ --pf-c-alert--m-inline--BoxShadow: none;
360
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--cyan-50);
361
+ --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--green-50);
362
+ --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--red-50);
363
+ --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--gold-50);
364
+ --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--blue-50);
365
+ --pf-c-alert--m-inline--m-plain--BorderTopWidth: 0;
366
+ --pf-c-alert--m-inline--m-plain--BackgroundColor: transparent;
367
+ --pf-c-alert--m-inline--m-plain--PaddingTop: 0;
368
+ --pf-c-alert--m-inline--m-plain--PaddingRight: 0;
369
+ --pf-c-alert--m-inline--m-plain--PaddingBottom: 0;
370
+ --pf-c-alert--m-inline--m-plain--PaddingLeft: 0;
371
+ --pf-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content;
372
+ --pf-c-alert--m-expandable--GridTemplateAreas:
373
+ "toggle icon title action"
374
+ ". . description description"
375
+ ". . actiongroup actiongroup";
376
+ --pf-c-alert--m-expandable__description--action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
377
+ --pf-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
378
+ --pf-c-alert--m-expanded__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
379
+ color: var(--pf-global--Color--100);
380
+ position: relative;
381
+ display: grid;
382
+ padding: var(--pf-c-alert--PaddingTop) var(--pf-c-alert--PaddingRight) var(--pf-c-alert--PaddingBottom) var(--pf-c-alert--PaddingLeft);
383
+ font-size: var(--pf-c-alert__FontSize);
384
+ background-color: var(--pf-c-alert--BackgroundColor);
385
+ border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
386
+ box-shadow: var(--pf-c-alert--BoxShadow);
387
+ grid-template-columns: var(--pf-c-alert--GridTemplateColumns);
388
+ grid-template-areas: var(--pf-c-alert--GridTemplateAreas);
389
+ }
390
+
391
+ .pf-c-alert.pf-m-success {
392
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
393
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color);
394
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-success__title--Color);
395
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-success--BackgroundColor);
396
+ }
397
+
398
+ .pf-c-alert.pf-m-danger {
399
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-danger--BorderTopColor);
400
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-danger__icon--Color);
401
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-danger__title--Color);
402
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-danger--BackgroundColor);
403
+ }
404
+
405
+ .pf-c-alert.pf-m-warning {
406
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-warning--BorderTopColor);
407
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-warning__icon--Color);
408
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-warning__title--Color);
409
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-warning--BackgroundColor);
410
+ }
411
+
412
+ .pf-c-alert.pf-m-info {
413
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-info--BorderTopColor);
414
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-info__icon--Color);
415
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-info__title--Color);
416
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-info--BackgroundColor);
417
+ }
418
+
419
+ .pf-c-alert.pf-m-inline {
420
+ --pf-c-alert--BoxShadow: var(--pf-c-alert--m-inline--BoxShadow);
421
+ --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--BackgroundColor);
422
+ }
423
+
424
+ .pf-c-alert.pf-m-plain {
425
+ --pf-c-alert--BorderTopWidth: var(--pf-c-alert--m-inline--m-plain--BorderTopWidth);
426
+ --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--m-plain--BackgroundColor);
427
+ --pf-c-alert--PaddingTop: var(--pf-c-alert--m-inline--m-plain--PaddingTop);
428
+ --pf-c-alert--PaddingRight: var(--pf-c-alert--m-inline--m-plain--PaddingRight);
429
+ --pf-c-alert--PaddingBottom: var(--pf-c-alert--m-inline--m-plain--PaddingBottom);
430
+ --pf-c-alert--PaddingLeft: var(--pf-c-alert--m-inline--m-plain--PaddingLeft);
431
+ }
432
+
433
+ .pf-c-alert.pf-m-expandable {
434
+ --pf-c-alert--GridTemplateColumns: var(--pf-c-alert--m-expandable--GridTemplateColumns);
435
+ --pf-c-alert--GridTemplateAreas: var(--pf-c-alert--m-expandable--GridTemplateAreas);
436
+ --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expandable__description--action-group--PaddingTop);
437
+ }
438
+
439
+ .pf-c-alert.pf-m-expanded {
440
+ --pf-c-alert__toggle-icon--Rotate: var(--pf-c-alert--m-expanded__toggle-icon--Rotate);
441
+ --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expanded__description--action-group--PaddingTop);
442
+ }
443
+
444
+ .pf-c-alert__toggle {
445
+ margin-top: var(--pf-c-alert__toggle--MarginTop);
446
+ margin-bottom: var(--pf-c-alert__toggle--MarginBottom);
447
+ margin-left: var(--pf-c-alert__toggle--MarginLeft);
448
+ }
449
+
450
+ .pf-c-alert__toggle-icon {
451
+ display: inline-block;
452
+ transition: var(--pf-c-alert__toggle-icon--Transition);
453
+ transform: rotate(var(--pf-c-alert__toggle-icon--Rotate));
454
+ }
455
+
456
+ .pf-c-alert__icon {
457
+ grid-area: icon;
458
+ display: flex;
459
+ margin-top: var(--pf-c-alert__icon--MarginTop);
460
+ margin-right: var(--pf-c-alert__icon--MarginRight);
461
+ font-size: var(--pf-c-alert__icon--FontSize);
462
+ color: var(--pf-c-alert__icon--Color);
463
+ }
464
+
465
+ .pf-c-alert__title {
466
+ grid-area: title;
467
+ font-weight: var(--pf-c-alert__title--FontWeight);
468
+ color: var(--pf-c-alert__title--Color);
469
+ word-break: break-word;
470
+ }
471
+
472
+ .pf-c-alert__title.pf-m-truncate {
473
+ display: -webkit-box;
474
+ -webkit-box-orient: vertical;
475
+ -webkit-line-clamp: var(--pf-c-alert__title--max-lines);
476
+ overflow: hidden;
477
+ }
478
+
479
+ .pf-c-alert__description {
480
+ grid-area: description;
481
+ padding-top: var(--pf-c-alert__description--PaddingTop);
482
+ word-break: break-word;
483
+ }
484
+
485
+ .pf-c-alert__description + .pf-c-alert__action-group {
486
+ --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop);
487
+ }
488
+
489
+ .pf-c-alert__action {
490
+ grid-area: action;
491
+ margin-top: var(--pf-c-alert__action--MarginTop);
492
+ margin-right: var(--pf-c-alert__action--MarginRight);
493
+ margin-bottom: var(--pf-c-alert__action--MarginBottom);
494
+ transform: translateY(var(--pf-c-alert__action--TranslateY));
495
+ }
496
+
497
+ .pf-c-alert__action > .pf-c-button {
498
+ --pf-c-button--LineHeight: 1;
499
+ }
500
+
501
+ .pf-c-alert__action-group {
502
+ grid-area: actiongroup;
503
+ padding-top: var(--pf-c-alert__action-group--PaddingTop);
504
+ }
505
+
506
+ .pf-c-alert__action-group > .pf-c-button {
507
+ --pf-c-button--m-link--m-inline--hover--TextDecoration: none;
508
+ }
509
+
510
+ .pf-c-alert__action-group > .pf-c-button:not(:last-child) {
511
+ margin-right: var(--pf-c-alert__action-group__c-button--not-last-child--MarginRight);
512
+ }
513
+
514
+ .pf-m-overpass-font .pf-c-alert__title {
515
+ --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
516
+ }
517
+
518
+ :where(.pf-theme-dark) .pf-c-alert {
519
+ --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600);
520
+ --pf-c-alert__title--Color: var(--pf-global--default-color--200);
521
+ --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--100);
522
+ --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--100);
523
+ --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--100);
524
+ --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--100);
525
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--black-600);
526
+ --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--black-600);
527
+ --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--black-600);
528
+ --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--black-600);
529
+ --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--black-600);
530
+ }
531
+
300
532
  .pf-c-app-launcher {
301
533
  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
302
534
  --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
@@ -1268,288 +1500,56 @@ textarea.pf-c-form-control {
1268
1500
  --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height);
1269
1501
  }
1270
1502
 
1271
- @media (min-width: 576px) {
1272
- .pf-c-avatar.pf-m-xl {
1273
- --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width));
1274
- }
1275
- }
1276
- @media (min-width: 768px) {
1277
- .pf-c-avatar.pf-m-xl {
1278
- --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)));
1279
- }
1280
- }
1281
- @media (min-width: 992px) {
1282
- .pf-c-avatar.pf-m-xl {
1283
- --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))));
1284
- }
1285
- }
1286
- @media (min-width: 1200px) {
1287
- .pf-c-avatar.pf-m-xl {
1288
- --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)))));
1289
- }
1290
- }
1291
- @media (min-width: 1450px) {
1292
- .pf-c-avatar.pf-m-xl {
1293
- --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-2xl, var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))))));
1294
- }
1295
- }
1296
- @media (min-width: 576px) {
1297
- .pf-c-avatar.pf-m-xl {
1298
- --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height));
1299
- }
1300
- }
1301
- @media (min-width: 768px) {
1302
- .pf-c-avatar.pf-m-xl {
1303
- --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)));
1304
- }
1305
- }
1306
- @media (min-width: 992px) {
1307
- .pf-c-avatar.pf-m-xl {
1308
- --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))));
1309
- }
1310
- }
1311
- @media (min-width: 1200px) {
1312
- .pf-c-avatar.pf-m-xl {
1313
- --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)))));
1314
- }
1315
- }
1316
- @media (min-width: 1450px) {
1317
- .pf-c-avatar.pf-m-xl {
1318
- --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-2xl, var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))))));
1319
- }
1320
- }
1321
- .pf-c-alert {
1322
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
1323
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
1324
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
1325
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
1326
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
1327
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
1328
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
1329
- }
1330
-
1331
- .pf-c-alert {
1332
- --pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg);
1333
- --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100);
1334
- --pf-c-alert--GridTemplateColumns: max-content 1fr max-content;
1335
- --pf-c-alert--GridTemplateAreas:
1336
- "icon title action"
1337
- ". description description"
1338
- ". actiongroup actiongroup";
1339
- --pf-c-alert--BorderTopWidth: var(--pf-global--BorderWidth--md);
1340
- --pf-c-alert--BorderTopColor: var(--pf-global--default-color--200);
1341
- --pf-c-alert--PaddingTop: var(--pf-global--spacer--md);
1342
- --pf-c-alert--PaddingRight: var(--pf-global--spacer--md);
1343
- --pf-c-alert--PaddingBottom: var(--pf-global--spacer--md);
1344
- --pf-c-alert--PaddingLeft: var(--pf-global--spacer--md);
1345
- --pf-c-alert__FontSize: var(--pf-global--FontSize--sm);
1346
- --pf-c-alert__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element) - 0.0625rem);
1347
- --pf-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element));
1348
- --pf-c-alert__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
1349
- --pf-c-alert__toggle-icon--Rotate: 0;
1350
- --pf-c-alert__toggle-icon--Transition: var(--pf-global--Transition);
1351
- --pf-c-alert__icon--Color: var(--pf-global--default-color--200);
1352
- --pf-c-alert__icon--MarginTop: 0.0625rem;
1353
- --pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm);
1354
- --pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md);
1355
- --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--bold);
1356
- --pf-c-alert__title--Color: var(--pf-global--default-color--300);
1357
- --pf-c-alert__title--max-lines: 1;
1358
- --pf-c-alert__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
1359
- --pf-c-alert__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
1360
- --pf-c-alert__action--TranslateY: 0.125rem;
1361
- --pf-c-alert__action--MarginRight: calc(var(--pf-global--spacer--sm) * -1);
1362
- --pf-c-alert__description--PaddingTop: var(--pf-global--spacer--xs);
1363
- --pf-c-alert__action-group--PaddingTop-base: var(--pf-global--spacer--xs);
1364
- --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
1365
- --pf-c-alert__description--action-group--PaddingTop-base: var(--pf-global--spacer--md);
1366
- --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
1367
- --pf-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-global--spacer--lg);
1368
- --pf-c-alert--m-success--BorderTopColor: var(--pf-global--success-color--100);
1369
- --pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--100);
1370
- --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--200);
1371
- --pf-c-alert--m-danger--BorderTopColor: var(--pf-global--danger-color--100);
1372
- --pf-c-alert--m-danger__icon--Color: var(--pf-global--danger-color--100);
1373
- --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--200);
1374
- --pf-c-alert--m-warning--BorderTopColor: var(--pf-global--warning-color--100);
1375
- --pf-c-alert--m-warning__icon--Color: var(--pf-global--warning-color--100);
1376
- --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--200);
1377
- --pf-c-alert--m-info--BorderTopColor: var(--pf-global--info-color--100);
1378
- --pf-c-alert--m-info__icon--Color: var(--pf-global--info-color--100);
1379
- --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--200);
1380
- --pf-c-alert--m-inline--BoxShadow: none;
1381
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--cyan-50);
1382
- --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--green-50);
1383
- --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--red-50);
1384
- --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--gold-50);
1385
- --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--blue-50);
1386
- --pf-c-alert--m-inline--m-plain--BorderTopWidth: 0;
1387
- --pf-c-alert--m-inline--m-plain--BackgroundColor: transparent;
1388
- --pf-c-alert--m-inline--m-plain--PaddingTop: 0;
1389
- --pf-c-alert--m-inline--m-plain--PaddingRight: 0;
1390
- --pf-c-alert--m-inline--m-plain--PaddingBottom: 0;
1391
- --pf-c-alert--m-inline--m-plain--PaddingLeft: 0;
1392
- --pf-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content;
1393
- --pf-c-alert--m-expandable--GridTemplateAreas:
1394
- "toggle icon title action"
1395
- ". . description description"
1396
- ". . actiongroup actiongroup";
1397
- --pf-c-alert--m-expandable__description--action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
1398
- --pf-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
1399
- --pf-c-alert--m-expanded__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
1400
- color: var(--pf-global--Color--100);
1401
- position: relative;
1402
- display: grid;
1403
- padding: var(--pf-c-alert--PaddingTop) var(--pf-c-alert--PaddingRight) var(--pf-c-alert--PaddingBottom) var(--pf-c-alert--PaddingLeft);
1404
- font-size: var(--pf-c-alert__FontSize);
1405
- background-color: var(--pf-c-alert--BackgroundColor);
1406
- border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
1407
- box-shadow: var(--pf-c-alert--BoxShadow);
1408
- grid-template-columns: var(--pf-c-alert--GridTemplateColumns);
1409
- grid-template-areas: var(--pf-c-alert--GridTemplateAreas);
1410
- }
1411
-
1412
- .pf-c-alert.pf-m-success {
1413
- --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
1414
- --pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color);
1415
- --pf-c-alert__title--Color: var(--pf-c-alert--m-success__title--Color);
1416
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-success--BackgroundColor);
1417
- }
1418
-
1419
- .pf-c-alert.pf-m-danger {
1420
- --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-danger--BorderTopColor);
1421
- --pf-c-alert__icon--Color: var(--pf-c-alert--m-danger__icon--Color);
1422
- --pf-c-alert__title--Color: var(--pf-c-alert--m-danger__title--Color);
1423
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-danger--BackgroundColor);
1424
- }
1425
-
1426
- .pf-c-alert.pf-m-warning {
1427
- --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-warning--BorderTopColor);
1428
- --pf-c-alert__icon--Color: var(--pf-c-alert--m-warning__icon--Color);
1429
- --pf-c-alert__title--Color: var(--pf-c-alert--m-warning__title--Color);
1430
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-warning--BackgroundColor);
1431
- }
1432
-
1433
- .pf-c-alert.pf-m-info {
1434
- --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-info--BorderTopColor);
1435
- --pf-c-alert__icon--Color: var(--pf-c-alert--m-info__icon--Color);
1436
- --pf-c-alert__title--Color: var(--pf-c-alert--m-info__title--Color);
1437
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-info--BackgroundColor);
1438
- }
1439
-
1440
- .pf-c-alert.pf-m-inline {
1441
- --pf-c-alert--BoxShadow: var(--pf-c-alert--m-inline--BoxShadow);
1442
- --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--BackgroundColor);
1443
- }
1444
-
1445
- .pf-c-alert.pf-m-plain {
1446
- --pf-c-alert--BorderTopWidth: var(--pf-c-alert--m-inline--m-plain--BorderTopWidth);
1447
- --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--m-plain--BackgroundColor);
1448
- --pf-c-alert--PaddingTop: var(--pf-c-alert--m-inline--m-plain--PaddingTop);
1449
- --pf-c-alert--PaddingRight: var(--pf-c-alert--m-inline--m-plain--PaddingRight);
1450
- --pf-c-alert--PaddingBottom: var(--pf-c-alert--m-inline--m-plain--PaddingBottom);
1451
- --pf-c-alert--PaddingLeft: var(--pf-c-alert--m-inline--m-plain--PaddingLeft);
1452
- }
1453
-
1454
- .pf-c-alert.pf-m-expandable {
1455
- --pf-c-alert--GridTemplateColumns: var(--pf-c-alert--m-expandable--GridTemplateColumns);
1456
- --pf-c-alert--GridTemplateAreas: var(--pf-c-alert--m-expandable--GridTemplateAreas);
1457
- --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expandable__description--action-group--PaddingTop);
1458
- }
1459
-
1460
- .pf-c-alert.pf-m-expanded {
1461
- --pf-c-alert__toggle-icon--Rotate: var(--pf-c-alert--m-expanded__toggle-icon--Rotate);
1462
- --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expanded__description--action-group--PaddingTop);
1463
- }
1464
-
1465
- .pf-c-alert__toggle {
1466
- margin-top: var(--pf-c-alert__toggle--MarginTop);
1467
- margin-bottom: var(--pf-c-alert__toggle--MarginBottom);
1468
- margin-left: var(--pf-c-alert__toggle--MarginLeft);
1469
- }
1470
-
1471
- .pf-c-alert__toggle-icon {
1472
- display: inline-block;
1473
- transition: var(--pf-c-alert__toggle-icon--Transition);
1474
- transform: rotate(var(--pf-c-alert__toggle-icon--Rotate));
1475
- }
1476
-
1477
- .pf-c-alert__icon {
1478
- grid-area: icon;
1479
- display: flex;
1480
- margin-top: var(--pf-c-alert__icon--MarginTop);
1481
- margin-right: var(--pf-c-alert__icon--MarginRight);
1482
- font-size: var(--pf-c-alert__icon--FontSize);
1483
- color: var(--pf-c-alert__icon--Color);
1484
- }
1485
-
1486
- .pf-c-alert__title {
1487
- grid-area: title;
1488
- font-weight: var(--pf-c-alert__title--FontWeight);
1489
- color: var(--pf-c-alert__title--Color);
1490
- word-break: break-word;
1491
- }
1492
-
1493
- .pf-c-alert__title.pf-m-truncate {
1494
- display: -webkit-box;
1495
- -webkit-box-orient: vertical;
1496
- -webkit-line-clamp: var(--pf-c-alert__title--max-lines);
1497
- overflow: hidden;
1503
+ @media (min-width: 576px) {
1504
+ .pf-c-avatar.pf-m-xl {
1505
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width));
1506
+ }
1498
1507
  }
1499
-
1500
- .pf-c-alert__description {
1501
- grid-area: description;
1502
- padding-top: var(--pf-c-alert__description--PaddingTop);
1503
- word-break: break-word;
1508
+ @media (min-width: 768px) {
1509
+ .pf-c-avatar.pf-m-xl {
1510
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)));
1511
+ }
1504
1512
  }
1505
-
1506
- .pf-c-alert__description + .pf-c-alert__action-group {
1507
- --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop);
1513
+ @media (min-width: 992px) {
1514
+ .pf-c-avatar.pf-m-xl {
1515
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))));
1516
+ }
1508
1517
  }
1509
-
1510
- .pf-c-alert__action {
1511
- grid-area: action;
1512
- margin-top: var(--pf-c-alert__action--MarginTop);
1513
- margin-right: var(--pf-c-alert__action--MarginRight);
1514
- margin-bottom: var(--pf-c-alert__action--MarginBottom);
1515
- transform: translateY(var(--pf-c-alert__action--TranslateY));
1518
+ @media (min-width: 1200px) {
1519
+ .pf-c-avatar.pf-m-xl {
1520
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)))));
1521
+ }
1516
1522
  }
1517
-
1518
- .pf-c-alert__action > .pf-c-button {
1519
- --pf-c-button--LineHeight: 1;
1523
+ @media (min-width: 1450px) {
1524
+ .pf-c-avatar.pf-m-xl {
1525
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-2xl, var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))))));
1526
+ }
1520
1527
  }
1521
-
1522
- .pf-c-alert__action-group {
1523
- grid-area: actiongroup;
1524
- padding-top: var(--pf-c-alert__action-group--PaddingTop);
1528
+ @media (min-width: 576px) {
1529
+ .pf-c-avatar.pf-m-xl {
1530
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height));
1531
+ }
1525
1532
  }
1526
-
1527
- .pf-c-alert__action-group > .pf-c-button {
1528
- --pf-c-button--m-link--m-inline--hover--TextDecoration: none;
1533
+ @media (min-width: 768px) {
1534
+ .pf-c-avatar.pf-m-xl {
1535
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)));
1536
+ }
1529
1537
  }
1530
-
1531
- .pf-c-alert__action-group > .pf-c-button:not(:last-child) {
1532
- margin-right: var(--pf-c-alert__action-group__c-button--not-last-child--MarginRight);
1538
+ @media (min-width: 992px) {
1539
+ .pf-c-avatar.pf-m-xl {
1540
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))));
1541
+ }
1533
1542
  }
1534
-
1535
- .pf-m-overpass-font .pf-c-alert__title {
1536
- --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
1543
+ @media (min-width: 1200px) {
1544
+ .pf-c-avatar.pf-m-xl {
1545
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)))));
1546
+ }
1537
1547
  }
1538
-
1539
- :where(.pf-theme-dark) .pf-c-alert {
1540
- --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600);
1541
- --pf-c-alert__title--Color: var(--pf-global--default-color--200);
1542
- --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--100);
1543
- --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--100);
1544
- --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--100);
1545
- --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--100);
1546
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--black-600);
1547
- --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--black-600);
1548
- --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--black-600);
1549
- --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--black-600);
1550
- --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--black-600);
1548
+ @media (min-width: 1450px) {
1549
+ .pf-c-avatar.pf-m-xl {
1550
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-2xl, var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))))));
1551
+ }
1551
1552
  }
1552
-
1553
1553
  .pf-c-back-to-top {
1554
1554
  --pf-c-back-to-top--Right: var(--pf-global--spacer--2xl);
1555
1555
  --pf-c-back-to-top--Bottom: var(--pf-global--spacer--lg);
@@ -3424,6 +3424,89 @@ label.pf-c-check, .pf-c-check__label,
3424
3424
  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--palette--black-600);
3425
3425
  }
3426
3426
 
3427
+ .pf-c-chip-group {
3428
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
3429
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
3430
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3431
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3432
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
3433
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3434
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3435
+ }
3436
+
3437
+ .pf-c-chip-group {
3438
+ color: var(--pf-global--Color--100);
3439
+ --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3440
+ --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
3441
+ --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
3442
+ --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
3443
+ --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
3444
+ --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
3445
+ --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
3446
+ --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
3447
+ --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
3448
+ --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
3449
+ --pf-c-chip-group__label--MaxWidth: 18ch;
3450
+ --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
3451
+ --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3452
+ --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
3453
+ --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
3454
+ max-width: 100%;
3455
+ }
3456
+
3457
+ .pf-c-chip-group.pf-m-category {
3458
+ padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
3459
+ padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
3460
+ padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
3461
+ padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
3462
+ background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
3463
+ border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
3464
+ }
3465
+
3466
+ .pf-c-chip-group__main {
3467
+ display: flex;
3468
+ flex: 1;
3469
+ flex-wrap: wrap;
3470
+ align-items: baseline;
3471
+ min-width: 0;
3472
+ }
3473
+
3474
+ .pf-c-chip-group__list {
3475
+ margin-right: var(--pf-c-chip-group__list--MarginRight);
3476
+ margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
3477
+ }
3478
+
3479
+ .pf-c-chip-group,
3480
+ .pf-c-chip-group__list {
3481
+ display: inline-flex;
3482
+ flex-wrap: wrap;
3483
+ align-items: center;
3484
+ min-width: 0;
3485
+ }
3486
+
3487
+ .pf-c-chip-group__list-item {
3488
+ display: inline-flex;
3489
+ min-width: 0;
3490
+ margin-right: var(--pf-c-chip-group__list-item--MarginRight);
3491
+ margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
3492
+ }
3493
+
3494
+ .pf-c-chip-group__label {
3495
+ overflow: hidden;
3496
+ text-overflow: ellipsis;
3497
+ white-space: nowrap;
3498
+ max-width: var(--pf-c-chip-group__label--MaxWidth);
3499
+ margin-right: var(--pf-c-chip-group__label--MarginRight);
3500
+ font-size: var(--pf-c-chip-group__label--FontSize);
3501
+ }
3502
+
3503
+ .pf-c-chip-group__close {
3504
+ display: flex;
3505
+ align-self: flex-start;
3506
+ margin-top: var(--pf-c-chip-group__close--MarginTop);
3507
+ margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
3508
+ }
3509
+
3427
3510
  .pf-c-clipboard-copy {
3428
3511
  --pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
3429
3512
  --pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
@@ -5380,89 +5463,6 @@ label.pf-c-check, .pf-c-check__label,
5380
5463
  overflow-y: visible;
5381
5464
  }
5382
5465
  }
5383
- .pf-c-chip-group {
5384
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
5385
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
5386
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
5387
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
5388
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
5389
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
5390
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
5391
- }
5392
-
5393
- .pf-c-chip-group {
5394
- color: var(--pf-global--Color--100);
5395
- --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
5396
- --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
5397
- --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
5398
- --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
5399
- --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
5400
- --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
5401
- --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
5402
- --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
5403
- --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
5404
- --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
5405
- --pf-c-chip-group__label--MaxWidth: 18ch;
5406
- --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
5407
- --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
5408
- --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
5409
- --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
5410
- max-width: 100%;
5411
- }
5412
-
5413
- .pf-c-chip-group.pf-m-category {
5414
- padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
5415
- padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
5416
- padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
5417
- padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
5418
- background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
5419
- border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
5420
- }
5421
-
5422
- .pf-c-chip-group__main {
5423
- display: flex;
5424
- flex: 1;
5425
- flex-wrap: wrap;
5426
- align-items: baseline;
5427
- min-width: 0;
5428
- }
5429
-
5430
- .pf-c-chip-group__list {
5431
- margin-right: var(--pf-c-chip-group__list--MarginRight);
5432
- margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
5433
- }
5434
-
5435
- .pf-c-chip-group,
5436
- .pf-c-chip-group__list {
5437
- display: inline-flex;
5438
- flex-wrap: wrap;
5439
- align-items: center;
5440
- min-width: 0;
5441
- }
5442
-
5443
- .pf-c-chip-group__list-item {
5444
- display: inline-flex;
5445
- min-width: 0;
5446
- margin-right: var(--pf-c-chip-group__list-item--MarginRight);
5447
- margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
5448
- }
5449
-
5450
- .pf-c-chip-group__label {
5451
- overflow: hidden;
5452
- text-overflow: ellipsis;
5453
- white-space: nowrap;
5454
- max-width: var(--pf-c-chip-group__label--MaxWidth);
5455
- margin-right: var(--pf-c-chip-group__label--MarginRight);
5456
- font-size: var(--pf-c-chip-group__label--FontSize);
5457
- }
5458
-
5459
- .pf-c-chip-group__close {
5460
- display: flex;
5461
- align-self: flex-start;
5462
- margin-top: var(--pf-c-chip-group__close--MarginTop);
5463
- margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
5464
- }
5465
-
5466
5466
  .pf-c-date-picker {
5467
5467
  --pf-c-date-picker--m-top__calendar--Top: 0;
5468
5468
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));