@patternfly/patternfly 6.5.0-prerelease.75 → 6.5.0-prerelease.77

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 (15) hide show
  1. package/components/Button/button.css +42 -37
  2. package/components/Button/button.scss +48 -43
  3. package/components/Table/table-scrollable.css +1 -1
  4. package/components/Table/table-scrollable.scss +1 -1
  5. package/components/Toolbar/toolbar.css +48 -1
  6. package/components/Toolbar/toolbar.scss +53 -1
  7. package/components/_index.css +91 -39
  8. package/docs/components/Button/examples/Button.md +298 -1
  9. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  10. package/docs/components/Toolbar/examples/Toolbar.md +44 -0
  11. package/package.json +2 -2
  12. package/patternfly-no-globals.css +91 -39
  13. package/patternfly.css +91 -39
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/docs/components/Button/examples/Button.md CHANGED
@@ -4311,6 +4311,303 @@ For when a plain/icon button is placed inline with text
4311
4311
  </span>
4312
4312
  </button>
4313
4313
 
4314
+ <br />
4315
+ <br />
4316
+
4317
+ <strong>Plain</strong>
4318
+ <br />
4319
+ <button
4320
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-plain"
4321
+ type="button"
4322
+ aria-label="all items read"
4323
+ >
4324
+ <span class="pf-v6-c-button__icon pf-m-start">
4325
+ <svg
4326
+ class="pf-v6-svg"
4327
+ viewBox="0 0 32 32"
4328
+ fill="currentColor"
4329
+ aria-hidden="true"
4330
+ role="img"
4331
+ width="1em"
4332
+ height="1em"
4333
+ >
4334
+ <path
4335
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4336
+ />
4337
+ </svg>
4338
+ </span>
4339
+ </button>
4340
+
4341
+ <button
4342
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked pf-m-plain"
4343
+ type="button"
4344
+ aria-label="all items read"
4345
+ >
4346
+ <span class="pf-v6-c-button__icon pf-m-start">
4347
+ <svg
4348
+ class="pf-v6-svg"
4349
+ viewBox="0 0 32 32"
4350
+ fill="currentColor"
4351
+ aria-hidden="true"
4352
+ role="img"
4353
+ width="1em"
4354
+ height="1em"
4355
+ >
4356
+ <path
4357
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4358
+ />
4359
+ </svg>
4360
+ </span>
4361
+ </button>
4362
+
4363
+ <br />
4364
+
4365
+ <button
4366
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-plain"
4367
+ type="button"
4368
+ aria-label="unread items"
4369
+ >
4370
+ <span class="pf-v6-c-button__icon pf-m-start">
4371
+ <svg
4372
+ class="pf-v6-svg"
4373
+ viewBox="0 0 32 32"
4374
+ fill="currentColor"
4375
+ aria-hidden="true"
4376
+ role="img"
4377
+ width="1em"
4378
+ height="1em"
4379
+ >
4380
+ <path
4381
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4382
+ />
4383
+ </svg>
4384
+ </span>
4385
+ </button>
4386
+
4387
+ <button
4388
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked pf-m-plain"
4389
+ type="button"
4390
+ aria-label="unread items"
4391
+ >
4392
+ <span class="pf-v6-c-button__icon pf-m-start">
4393
+ <svg
4394
+ class="pf-v6-svg"
4395
+ viewBox="0 0 32 32"
4396
+ fill="currentColor"
4397
+ aria-hidden="true"
4398
+ role="img"
4399
+ width="1em"
4400
+ height="1em"
4401
+ >
4402
+ <path
4403
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4404
+ />
4405
+ </svg>
4406
+ </span>
4407
+ </button>
4408
+
4409
+ <br />
4410
+
4411
+ <button
4412
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-plain"
4413
+ type="button"
4414
+ aria-label="unread items, needs attention"
4415
+ >
4416
+ <span class="pf-v6-c-button__icon pf-m-start">
4417
+ <svg
4418
+ class="pf-v6-svg"
4419
+ viewBox="0 0 32 32"
4420
+ fill="currentColor"
4421
+ aria-hidden="true"
4422
+ role="img"
4423
+ width="1em"
4424
+ height="1em"
4425
+ >
4426
+ <path
4427
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4428
+ />
4429
+ </svg>
4430
+ </span>
4431
+ </button>
4432
+
4433
+ <button
4434
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked pf-m-plain"
4435
+ type="button"
4436
+ aria-label="unread items, needs attention"
4437
+ >
4438
+ <span class="pf-v6-c-button__icon pf-m-start">
4439
+ <svg
4440
+ class="pf-v6-svg"
4441
+ viewBox="0 0 32 32"
4442
+ fill="currentColor"
4443
+ aria-hidden="true"
4444
+ role="img"
4445
+ width="1em"
4446
+ height="1em"
4447
+ >
4448
+ <path
4449
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4450
+ />
4451
+ </svg>
4452
+ </span>
4453
+ </button>
4454
+
4455
+ <br />
4456
+ <br />
4457
+
4458
+ <strong>Plain with count</strong>
4459
+ <br />
4460
+ <button class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-plain" type="button">
4461
+ <span class="pf-v6-c-button__icon pf-m-start">
4462
+ <svg
4463
+ class="pf-v6-svg"
4464
+ viewBox="0 0 32 32"
4465
+ fill="currentColor"
4466
+ aria-hidden="true"
4467
+ role="img"
4468
+ width="1em"
4469
+ height="1em"
4470
+ >
4471
+ <path
4472
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4473
+ />
4474
+ </svg>
4475
+ </span>
4476
+ <span class="pf-v6-c-button__text">
4477
+ 10
4478
+ <span class="pf-v6-screen-reader">items</span>
4479
+ </span>
4480
+ </button>
4481
+
4482
+ <button
4483
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked pf-m-plain"
4484
+ type="button"
4485
+ >
4486
+ <span class="pf-v6-c-button__icon pf-m-start">
4487
+ <svg
4488
+ class="pf-v6-svg"
4489
+ viewBox="0 0 32 32"
4490
+ fill="currentColor"
4491
+ aria-hidden="true"
4492
+ role="img"
4493
+ width="1em"
4494
+ height="1em"
4495
+ >
4496
+ <path
4497
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4498
+ />
4499
+ </svg>
4500
+ </span>
4501
+ <span class="pf-v6-c-button__text">
4502
+ 10
4503
+ <span class="pf-v6-screen-reader">items</span>
4504
+ </span>
4505
+ </button>
4506
+
4507
+ <br />
4508
+
4509
+ <button
4510
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-plain"
4511
+ type="button"
4512
+ >
4513
+ <span class="pf-v6-c-button__icon pf-m-start">
4514
+ <svg
4515
+ class="pf-v6-svg"
4516
+ viewBox="0 0 32 32"
4517
+ fill="currentColor"
4518
+ aria-hidden="true"
4519
+ role="img"
4520
+ width="1em"
4521
+ height="1em"
4522
+ >
4523
+ <path
4524
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4525
+ />
4526
+ </svg>
4527
+ </span>
4528
+ <span class="pf-v6-c-button__text">
4529
+ 10
4530
+ <span class="pf-v6-screen-reader">unread items</span>
4531
+ </span>
4532
+ </button>
4533
+
4534
+ <button
4535
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked pf-m-plain"
4536
+ type="button"
4537
+ >
4538
+ <span class="pf-v6-c-button__icon pf-m-start">
4539
+ <svg
4540
+ class="pf-v6-svg"
4541
+ viewBox="0 0 32 32"
4542
+ fill="currentColor"
4543
+ aria-hidden="true"
4544
+ role="img"
4545
+ width="1em"
4546
+ height="1em"
4547
+ >
4548
+ <path
4549
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4550
+ />
4551
+ </svg>
4552
+ </span>
4553
+ <span class="pf-v6-c-button__text">
4554
+ 10
4555
+ <span class="pf-v6-screen-reader">unread items</span>
4556
+ </span>
4557
+ </button>
4558
+
4559
+ <br />
4560
+
4561
+ <button
4562
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-plain"
4563
+ type="button"
4564
+ >
4565
+ <span class="pf-v6-c-button__icon pf-m-start">
4566
+ <svg
4567
+ class="pf-v6-svg"
4568
+ viewBox="0 0 32 32"
4569
+ fill="currentColor"
4570
+ aria-hidden="true"
4571
+ role="img"
4572
+ width="1em"
4573
+ height="1em"
4574
+ >
4575
+ <path
4576
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4577
+ />
4578
+ </svg>
4579
+ </span>
4580
+ <span class="pf-v6-c-button__text">
4581
+ 10
4582
+ <span class="pf-v6-screen-reader">unread items, needs attention</span>
4583
+ </span>
4584
+ </button>
4585
+
4586
+ <button
4587
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked pf-m-plain"
4588
+ type="button"
4589
+ >
4590
+ <span class="pf-v6-c-button__icon pf-m-start">
4591
+ <svg
4592
+ class="pf-v6-svg"
4593
+ viewBox="0 0 32 32"
4594
+ fill="currentColor"
4595
+ aria-hidden="true"
4596
+ role="img"
4597
+ width="1em"
4598
+ height="1em"
4599
+ >
4600
+ <path
4601
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4602
+ />
4603
+ </svg>
4604
+ </span>
4605
+ <span class="pf-v6-c-button__text">
4606
+ 10
4607
+ <span class="pf-v6-screen-reader">unread items, needs attention</span>
4608
+ </span>
4609
+ </button>
4610
+
4314
4611
  ```
4315
4612
 
4316
4613
  ### Favorite
@@ -4528,7 +4825,7 @@ Semantic buttons and links are important for usability as well as accessibility.
4528
4825
  | `.pf-m-danger` | `.pf-v6-c-button` | Modifies for danger styles. |
4529
4826
  | `.pf-m-warning` | `.pf-v6-c-button` | Modifies for warning styles. |
4530
4827
  | `.pf-m-link` | `.pf-v6-c-button` | Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon. |
4531
- | `.pf-m-plain` | `.pf-v6-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, etc. |
4828
+ | `.pf-m-plain` | `.pf-v6-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, stateful, etc. |
4532
4829
  | `.pf-m-no-padding` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them. |
4533
4830
  | `.pf-m-inline` | `.pf-v6-c-button.pf-m-link` | Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a `<span>`, the text will flow inline with text around it. |
4534
4831
  | `.pf-m-block` | `.pf-v6-c-button` | Creates a block level button. |
package/docs/components/Toolbar/examples/Toolbar.css CHANGED
@@ -75,7 +75,7 @@
75
75
  background-color: var(--pf-t--global--background--color--secondary--default);
76
76
  }
77
77
 
78
- #ws-core-c-toolbar-sticky-toolbar .ws-preview-html {
78
+ #ws-core-c-toolbar-sticky-toolbar .ws-preview-html, #ws-core-c-toolbar-dynamic-sticky-toolbar .ws-preview-html {
79
79
  height: 200px;
80
80
  overflow: auto;
81
81
  }
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -3560,6 +3560,50 @@ Etiam nulla lacus, porttitor vel volutpat et, malesuada id nunc. Suspendisse por
3560
3560
 
3561
3561
  ```
3562
3562
 
3563
+ ### Dynamic sticky toolbar
3564
+
3565
+ This example shows the use of `.pf-m-sticky-base` and `.pf-m-sticky-stuck`. `.pf-m-sticky-stuck` can be applied dynamically as the page has scrolled to only show sticky styles when the toolbar is "stuck" and floating above the content.
3566
+
3567
+ ```html
3568
+ <div
3569
+ class="pf-v6-c-toolbar pf-m-sticky-base pf-m-sticky-stuck"
3570
+ id="toolbar-sticky-stuck-example"
3571
+ >
3572
+ <div class="pf-v6-c-toolbar__content">
3573
+ <div class="pf-v6-c-toolbar__content-section">
3574
+ <div class="pf-v6-c-toolbar__item">Item</div>
3575
+ <div class="pf-v6-c-toolbar__item">Item</div>
3576
+ <div class="pf-v6-c-toolbar__item">Item</div>
3577
+ <hr class="pf-v6-c-divider pf-m-vertical" />
3578
+
3579
+ <div class="pf-v6-c-toolbar__group">
3580
+ <div class="pf-v6-c-toolbar__item">Item</div>
3581
+ <div class="pf-v6-c-toolbar__item">Item</div>
3582
+ <div class="pf-v6-c-toolbar__item">Item</div>
3583
+ </div>
3584
+
3585
+ <hr class="pf-v6-c-divider pf-m-vertical" />
3586
+ <div class="pf-v6-c-toolbar__item">Item</div>
3587
+ <div class="pf-v6-c-toolbar__item">Item</div>
3588
+ <div class="pf-v6-c-toolbar__item">Item</div>
3589
+ </div>
3590
+ </div>
3591
+ </div>
3592
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor mattis massa dignissim blandit. Mauris pellentesque nisi a erat ultricies, mollis auctor nulla volutpat. Donec eu nisl magna. Donec nisi nulla, blandit et mauris in, lobortis elementum neque. Nunc pharetra eleifend purus, in commodo nisl accumsan in. Vestibulum feugiat nisl eu venenatis feugiat. Morbi ornare velit vitae tellus sollicitudin, sed ornare neque sagittis. Proin sodales, libero et vestibulum luctus, nunc mi euismod dui, vel accumsan lacus odio vel nibh. Etiam at mattis purus, sit amet vestibulum metus. Maecenas feugiat condimentum ligula eget hendrerit. Nullam eleifend convallis sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam rhoncus consectetur enim, at interdum mi tincidunt eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
3593
+ <br />
3594
+ <br />
3595
+ Maecenas vel sollicitudin ipsum, pulvinar pharetra magna. Aenean vel ipsum vel purus malesuada sagittis eget ac odio. Nullam vitae diam mollis, consectetur est vitae, sodales diam. Vivamus eu lectus quis mi maximus porta. Praesent erat sapien, vestibulum nec libero non, tincidunt congue mauris. Pellentesque vitae imperdiet mi. Nulla in ipsum neque. Cras a quam ut sem venenatis euismod non at tortor. Mauris porta purus augue, ut pharetra elit varius at. Vestibulum fringilla ligula ac leo tristique, porta venenatis nibh convallis.
3596
+ <br />
3597
+ <br />
3598
+ Vestibulum vel orci mattis magna tristique suscipit. In vel tellus tempor, consectetur mi at, pellentesque enim. Cras venenatis tellus eget velit porttitor, sit amet malesuada tortor venenatis. Maecenas vitae augue ac orci volutpat gravida. In fermentum, orci eget tincidunt lobortis, turpis orci porta nibh, cursus dignissim lectus sapien at felis. Nulla facilisi. Aenean lectus justo, pellentesque sed nulla ut, pulvinar pellentesque tortor. Ut tempus euismod dolor gravida rhoncus. Quisque sed lorem sit amet erat tincidunt aliquet quis in nulla. Maecenas arcu erat, hendrerit a dui eget, convallis pharetra sapien. Nunc tellus enim, dictum eu egestas vel, ultrices eget est. Etiam quis vehicula sem. Nulla facilisi. Donec ante ipsum, fringilla iaculis ex a, tincidunt lobortis mi.
3599
+ <br />
3600
+ <br />
3601
+ Etiam nulla lacus, porttitor vel volutpat et, malesuada id nunc. Suspendisse porttitor sem quis ante consequat, vitae commodo nulla ultricies. Nulla fermentum ipsum ac dolor elementum, eu luctus ex condimentum. Sed sed arcu aliquam, porta metus in, sollicitudin felis. Sed faucibus lacus consectetur orci ultricies laoreet. Morbi sed lectus dictum sem tempor porta. Donec ut diam tempor, venenatis erat vitae, accumsan diam. Etiam sed purus eget lacus vehicula iaculis non euismod dolor. Quisque ultricies eget est in semper.
3602
+ <br />
3603
+ <br />Fusce tristique nulla id vestibulum maximus. Morbi sit amet nisi nec orci pulvinar interdum. Duis convallis, nunc vel pharetra blandit, urna neque eleifend nunc, maximus faucibus tellus nisl a velit. Aliquam quis turpis tempor nisi ultricies fermentum at et ipsum. Pellentesque vel tincidunt nisl. Donec elit ante, sodales ac ultrices vitae, egestas ut magna. Nulla sollicitudin ornare mi, a porttitor sem fermentum vitae. Praesent maximus fringilla gravida. Sed ultricies turpis ut lacus sodales, et aliquet risus accumsan. Pellentesque lacus sapien, cursus vitae nulla vel, bibendum tristique risus.
3604
+
3605
+ ```
3606
+
3563
3607
  ### Vertical
3564
3608
 
3565
3609
  ```html isBeta
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": "6.5.0-prerelease.75",
4
+ "version": "6.5.0-prerelease.77",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -71,7 +71,7 @@
71
71
  "@octokit/rest": "^20.1.0",
72
72
  "@patternfly/documentation-framework": "6.38.3",
73
73
  "@patternfly/patternfly-a11y": "5.1.0",
74
- "@patternfly/react-code-editor": "6.4.1",
74
+ "@patternfly/react-code-editor": "6.4.3",
75
75
  "@patternfly/react-core": "6.4.3",
76
76
  "@patternfly/react-icons": "6.5.0-prerelease.13",
77
77
  "@patternfly/react-table": "6.4.3",
package/patternfly-no-globals.css CHANGED
@@ -11346,43 +11346,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11346
11346
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
11347
11347
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
11348
11348
  }
11349
- .pf-v6-c-button.pf-m-stateful {
11350
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
11351
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
11352
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
11353
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
11354
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
11355
- }
11356
- .pf-v6-c-button.pf-m-read {
11357
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
11358
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
11359
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
11360
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
11361
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
11362
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
11363
- }
11364
- .pf-v6-c-button.pf-m-unread {
11365
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
11366
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
11367
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
11368
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
11369
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
11370
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
11371
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
11372
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
11373
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
11374
- }
11375
- .pf-v6-c-button.pf-m-attention {
11376
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
11377
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
11378
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
11379
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
11380
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
11381
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
11382
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
11383
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
11384
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
11385
- }
11386
11349
  .pf-v6-c-button.pf-m-plain {
11387
11350
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth);
11388
11351
  --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor);
@@ -11406,6 +11369,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11406
11369
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
11407
11370
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
11408
11371
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
11372
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
11373
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
11374
+ --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
11375
+ --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
11376
+ --pf-v6-c-button--m-read--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
11409
11377
  }
11410
11378
  .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
11411
11379
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
@@ -11422,6 +11390,43 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11422
11390
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
11423
11391
  background: var(--pf-v6-c-button--BackgroundColor);
11424
11392
  }
11393
+ .pf-v6-c-button.pf-m-stateful {
11394
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
11395
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
11396
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
11397
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
11398
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
11399
+ }
11400
+ .pf-v6-c-button.pf-m-read {
11401
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
11402
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
11403
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
11404
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
11405
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
11406
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
11407
+ }
11408
+ .pf-v6-c-button.pf-m-unread {
11409
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
11410
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
11411
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
11412
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
11413
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
11414
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
11415
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
11416
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
11417
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
11418
+ }
11419
+ .pf-v6-c-button.pf-m-attention {
11420
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
11421
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
11422
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
11423
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
11424
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
11425
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
11426
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
11427
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
11428
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
11429
+ }
11425
11430
  .pf-v6-c-button.pf-m-block {
11426
11431
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
11427
11432
  width: var(--pf-v6-c-button--m-block--Width);
@@ -29127,7 +29132,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29127
29132
  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
29128
29133
  --pf-v6-c-table__sticky-cell--InsetInlineEnd: auto;
29129
29134
  --pf-v6-c-table__sticky-cell--InsetInlineStart: auto;
29130
- --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
29135
+ --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
29131
29136
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
29132
29137
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
29133
29138
  --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
@@ -31593,10 +31598,28 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31593
31598
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
31594
31599
  --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
31595
31600
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
31601
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
31602
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
31596
31603
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
31597
- --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
31604
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
31598
31605
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
31599
31606
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
31607
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: 0;
31608
+ --pf-v6-c-toolbar--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
31609
+ --pf-v6-c-toolbar--m-sticky--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
31610
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass: var(--pf-t--global--spacer--sm);
31611
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass: var(--pf-t--global--spacer--sm);
31612
+ --pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
31613
+ --pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
31614
+ }
31615
+ :where(.pf-v6-theme-glass) .pf-v6-c-toolbar {
31616
+ --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: 0;
31617
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow--glass);
31618
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius--glass);
31619
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass);
31620
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass);
31621
+ }
31622
+ .pf-v6-c-toolbar {
31600
31623
  --pf-v6-c-toolbar--m-vertical--Width: fit-content;
31601
31624
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
31602
31625
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -31873,6 +31896,35 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31873
31896
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
31874
31897
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
31875
31898
  }
31899
+ .pf-v6-c-toolbar.pf-m-sticky-base {
31900
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
31901
+ position: sticky;
31902
+ inset-block-start: 0;
31903
+ z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
31904
+ padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
31905
+ padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
31906
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
31907
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
31908
+ background: transparent;
31909
+ border-radius: inherit;
31910
+ }
31911
+ .pf-v6-c-toolbar.pf-m-sticky-base::before {
31912
+ position: absolute;
31913
+ inset: 0;
31914
+ z-index: -1;
31915
+ content: "";
31916
+ background: var(--pf-v6-c-toolbar--BackgroundColor);
31917
+ border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
31918
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
31919
+ box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
31920
+ opacity: 0;
31921
+ transition-timing-function: var(--pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor);
31922
+ transition-duration: var(--pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor);
31923
+ transition-property: opacity;
31924
+ }
31925
+ .pf-v6-c-toolbar.pf-m-sticky-stuck::before {
31926
+ opacity: 1;
31927
+ }
31876
31928
  .pf-v6-c-toolbar.pf-m-static,
31877
31929
  .pf-v6-c-toolbar.pf-m-static .pf-v6-c-toolbar__content {
31878
31930
  position: static;