@patternfly/patternfly 6.3.0-prerelease.76 → 6.3.0-prerelease.78

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 (25) hide show
  1. package/components/CalendarMonth/calendar-month.css +23 -8
  2. package/components/CalendarMonth/calendar-month.scss +26 -8
  3. package/components/Card/card.css +2 -0
  4. package/components/Card/card.scss +2 -0
  5. package/components/Drawer/drawer.css +3 -1
  6. package/components/Drawer/drawer.scss +4 -1
  7. package/components/FormControl/form-control.css +0 -6
  8. package/components/FormControl/form-control.scss +0 -7
  9. package/components/Label/label.css +3 -3
  10. package/components/Label/label.scss +3 -3
  11. package/components/Page/page.css +9 -5
  12. package/components/Page/page.scss +8 -5
  13. package/components/Panel/panel.css +2 -2
  14. package/components/Panel/panel.scss +2 -2
  15. package/components/Progress/progress.css +1 -1
  16. package/components/Progress/progress.scss +1 -1
  17. package/components/ToggleGroup/toggle-group.css +18 -9
  18. package/components/ToggleGroup/toggle-group.scss +24 -17
  19. package/components/_index.css +61 -35
  20. package/docs/demos/Form/examples/BasicForms.md +89 -37
  21. package/package.json +1 -1
  22. package/patternfly-no-globals.css +61 -35
  23. package/patternfly.css +61 -35
  24. package/patternfly.min.css +1 -1
  25. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -11125,12 +11125,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11125
11125
  --pf-v6-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
11126
11126
  --pf-v6-c-calendar-month__date--Width: 4ch;
11127
11127
  --pf-v6-c-calendar-month__date--Height: 4ch;
11128
+ --pf-v6-c-calendar-month__date--BorderWidth: 0;
11129
+ --pf-v6-c-calendar-month__date--BorderColor: transparent;
11128
11130
  --pf-v6-c-calendar-month__date--BorderRadius: var(--pf-t--global--border--radius--large);
11129
11131
  --pf-v6-c-calendar-month__date--Color: var(--pf-t--global--text--color--regular);
11130
11132
  --pf-v6-c-calendar-month__date--BackgroundColor: transparent;
11131
11133
  --pf-v6-c-calendar-month__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
11132
11134
  --pf-v6-c-calendar-month__date--disabled--Color: var(--pf-t--global--text--color--on-disabled);
11133
- --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-t--global--border--width--regular);
11135
+ --pf-v6-c-calendar-month__date--after--BorderWidth: 0;
11134
11136
  --pf-v6-c-calendar-month__date--after--BorderColor: transparent;
11135
11137
  --pf-v6-c-calendar-month__date--after--OutlineOffset: 0;
11136
11138
  --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -11139,9 +11141,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11139
11141
  --pf-v6-c-calendar-month__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked);
11140
11142
  --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
11141
11143
  --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
11144
+ --pf-v6-c-calendar-month__date--focus--after--BorderWidth: var(--pf-t--global--border--width--regular);
11142
11145
  --pf-v6-c-calendar-month__date--after--focus--OutlineOffset: -2px;
11143
- --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11144
- --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
11146
+ --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11147
+ --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor: var(--pf-t--global--border--color--high-contrast);
11148
+ --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
11149
+ --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor: transparent;
11145
11150
  }
11146
11151
 
11147
11152
  .pf-v6-c-calendar-month {
@@ -11222,8 +11227,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11222
11227
  }
11223
11228
  .pf-v6-c-calendar-month__dates-cell.pf-m-current {
11224
11229
  --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
11225
- --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth);
11226
- --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor);
11230
+ --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth);
11231
+ --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor);
11227
11232
  }
11228
11233
  .pf-v6-c-calendar-month__dates-cell.pf-m-in-range {
11229
11234
  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth);
@@ -11246,8 +11251,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11246
11251
  .pf-v6-c-calendar-month__dates-cell.pf-m-selected {
11247
11252
  --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
11248
11253
  --pf-v6-c-calendar-month__date--Color: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--Color);
11254
+ --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth);
11255
+ --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor);
11249
11256
  --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
11250
- --pf-v6-c-calendar-month__date--hover--BorderWidth: 0;
11257
+ --pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth);
11251
11258
  --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
11252
11259
  --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
11253
11260
  --pf-v6-c-calendar-month__date--after--OutlineOffset: var(--pf-v6-c-calendar-month__date--after--focus--OutlineOffset);
@@ -11271,6 +11278,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11271
11278
  background-color: var(--pf-v6-c-calendar-month__date--BackgroundColor);
11272
11279
  border: 0;
11273
11280
  }
11281
+ .pf-v6-c-calendar-month__date::before {
11282
+ position: absolute;
11283
+ inset: 0;
11284
+ content: "";
11285
+ border: var(--pf-v6-c-calendar-month__date--BorderWidth) solid var(--pf-v6-c-calendar-month__date--BorderColor);
11286
+ }
11274
11287
  .pf-v6-c-calendar-month__date::after {
11275
11288
  position: absolute;
11276
11289
  inset-block-start: var(--pf-v6-c-calendar-month__date--after--OutlineOffset);
@@ -11280,15 +11293,17 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11280
11293
  content: "";
11281
11294
  border: var(--pf-v6-c-calendar-month__date--after--BorderWidth) solid var(--pf-v6-c-calendar-month__date--after--BorderColor);
11282
11295
  }
11283
- .pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::after {
11296
+ .pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::before, .pf-v6-c-calendar-month__date::after {
11284
11297
  border-radius: var(--pf-v6-c-calendar-month__date--BorderRadius);
11285
11298
  }
11286
11299
  .pf-v6-c-calendar-month__date:hover, .pf-v6-c-calendar-month__date.pf-m-hover {
11287
11300
  --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__date--hover--BackgroundColor);
11288
- border: var(--pf-v6-c-calendar-month__date--hover--BorderColor) solid var(--pf-v6-c-calendar-month__date--hover--BorderWidth);
11301
+ --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__date--hover--BorderWidth);
11302
+ --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__date--hover--BorderColor);
11289
11303
  }
11290
11304
  .pf-v6-c-calendar-month__date:focus, .pf-v6-c-calendar-month__date.pf-m-focus {
11291
11305
  --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__date--focus--after--BorderColor);
11306
+ --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__date--focus--after--BorderWidth);
11292
11307
  outline: 0;
11293
11308
  }
11294
11309
  .pf-v6-c-calendar-month__date:disabled {
@@ -11371,6 +11386,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11371
11386
  --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
11372
11387
  --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11373
11388
  --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
11389
+ --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11374
11390
  --pf-v6-c-card--m-full-height--Height: 100%;
11375
11391
  --pf-v6-c-card--m-plain--BorderColor: transparent;
11376
11392
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
@@ -11457,6 +11473,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11457
11473
  }
11458
11474
  .pf-v6-c-card.pf-m-secondary {
11459
11475
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
11476
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
11460
11477
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
11461
11478
  }
11462
11479
  .pf-v6-c-card.pf-m-plain {
@@ -14459,7 +14476,8 @@ ul) {
14459
14476
  --pf-v6-c-drawer__panel--BoxShadow: none;
14460
14477
  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
14461
14478
  --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--high-contrast--regular);
14462
- --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default);
14479
+ --pf-v6-c-drawer--m-inline__panel--after--Width: 0;
14480
+ --pf-v6-c-drawer--m-inline__panel--after--md--Width: var(--pf-t--global--border--width--divider--default);
14463
14481
  --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--high-contrast--regular);
14464
14482
  --pf-v6-c-drawer__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
14465
14483
  --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
@@ -14767,6 +14785,7 @@ ul) {
14767
14785
 
14768
14786
  @media screen and (min-width: 48rem) {
14769
14787
  .pf-v6-c-drawer {
14788
+ --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
14770
14789
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
14771
14790
  }
14772
14791
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -16415,12 +16434,6 @@ ul) {
16415
16434
  .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
16416
16435
  padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
16417
16436
  }
16418
- @-moz-document url-prefix() {
16419
- .pf-v6-c-form-control:has(select) {
16420
- --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
16421
- --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
16422
- }
16423
- }
16424
16437
  .pf-v6-c-form-control.pf-m-placeholder > select {
16425
16438
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
16426
16439
  }
@@ -17385,7 +17398,7 @@ label.pf-v6-c-input-group__text {
17385
17398
  --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
17386
17399
  --pf-v6-c-label--MaxWidth: 100%;
17387
17400
  --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
17388
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--regular);
17401
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
17389
17402
  --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
17390
17403
  --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
17391
17404
  --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -17526,10 +17539,10 @@ label.pf-v6-c-input-group__text {
17526
17539
  --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
17527
17540
  --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
17528
17541
  --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
17529
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--default);
17542
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
17530
17543
  --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
17531
17544
  --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
17532
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
17545
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
17533
17546
  --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
17534
17547
  --pf-v6-c-label--m-add--BackgroundColor: transparent;
17535
17548
  --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
@@ -21273,6 +21286,15 @@ ul.pf-v6-c-list {
21273
21286
  --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
21274
21287
  }
21275
21288
  }
21289
+ @media screen and (max-width: calc(48rem - 1px)) {
21290
+ .pf-v6-c-page {
21291
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
21292
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
21293
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
21294
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
21295
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
21296
+ }
21297
+ }
21276
21298
 
21277
21299
  .pf-v6-c-page {
21278
21300
  display: grid;
@@ -21663,13 +21685,8 @@ ul.pf-v6-c-list {
21663
21685
  @media screen and (max-width: calc(48rem - 1px)) {
21664
21686
  .pf-v6-c-page__main-container {
21665
21687
  --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
21666
- --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
21667
- --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
21668
21688
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
21669
21689
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
21670
- --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
21671
- --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
21672
- --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
21673
21690
  }
21674
21691
  }
21675
21692
 
@@ -22274,12 +22291,12 @@ ul.pf-v6-c-list {
22274
22291
  --pf-v6-c-panel--before--BorderWidth: 0;
22275
22292
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
22276
22293
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
22277
- --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--box--default);
22294
+ --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
22278
22295
  --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
22279
22296
  --pf-v6-c-panel--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
22280
22297
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
22281
22298
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
22282
- --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--box--default);
22299
+ --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
22283
22300
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
22284
22301
  --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
22285
22302
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -22588,7 +22605,7 @@ ul.pf-v6-c-list {
22588
22605
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
22589
22606
  --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
22590
22607
  --pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
22591
- --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--regular);
22608
+ --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
22592
22609
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
22593
22610
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
22594
22611
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -29506,6 +29523,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29506
29523
  --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
29507
29524
  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
29508
29525
  --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
29526
+ --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
29509
29527
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
29510
29528
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
29511
29529
  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
@@ -29517,12 +29535,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29517
29535
  --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
29518
29536
  --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
29519
29537
  --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
29520
- --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
29538
+ --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
29521
29539
  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
29540
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
29522
29541
  --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
29523
29542
  --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
29524
29543
  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
29525
- --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
29544
+ --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
29526
29545
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
29527
29546
  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
29528
29547
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -29545,11 +29564,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29545
29564
  .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
29546
29565
  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
29547
29566
  }
29548
- .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button::before {
29567
+ .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button {
29549
29568
  border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius);
29550
29569
  border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius);
29551
29570
  }
29552
- .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button::before {
29571
+ .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button {
29553
29572
  border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius);
29554
29573
  border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius);
29555
29574
  }
@@ -29568,25 +29587,31 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29568
29587
  background-color: var(--pf-v6-c-toggle-group__button--BackgroundColor);
29569
29588
  border: 0;
29570
29589
  }
29571
- .pf-v6-c-toggle-group__button::before {
29590
+ .pf-v6-c-toggle-group__button::before, .pf-v6-c-toggle-group__button::after {
29572
29591
  position: absolute;
29573
- inset-block-start: 0;
29574
- inset-block-end: 0;
29575
- inset-inline-start: 0;
29576
- inset-inline-end: 0;
29592
+ inset: 0;
29577
29593
  pointer-events: none;
29578
29594
  content: "";
29579
29595
  border-style: solid;
29596
+ border-radius: inherit;
29597
+ }
29598
+ .pf-v6-c-toggle-group__button::before {
29580
29599
  border-width: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
29581
29600
  border-block-start-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29582
29601
  border-block-end-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29583
29602
  border-inline-start-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29584
29603
  border-inline-end-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29585
29604
  }
29605
+ .pf-v6-c-toggle-group__button::after {
29606
+ inset: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
29607
+ border-color: var(--pf-v6-c-toggle-group__button--after--BorderColor, transparent);
29608
+ border-width: var(--pf-v6-c-toggle-group__button--after--BorderWidth, 0);
29609
+ }
29586
29610
  .pf-v6-c-toggle-group__button:is(:hover, :focus) {
29587
29611
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
29588
29612
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
29589
29613
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
29614
+ --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
29590
29615
  text-decoration-line: none;
29591
29616
  }
29592
29617
  .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -29594,6 +29619,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29594
29619
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
29595
29620
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
29596
29621
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
29622
+ --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
29597
29623
  }
29598
29624
  .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
29599
29625
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);
package/patternfly.css CHANGED
@@ -11265,12 +11265,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11265
11265
  --pf-v6-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
11266
11266
  --pf-v6-c-calendar-month__date--Width: 4ch;
11267
11267
  --pf-v6-c-calendar-month__date--Height: 4ch;
11268
+ --pf-v6-c-calendar-month__date--BorderWidth: 0;
11269
+ --pf-v6-c-calendar-month__date--BorderColor: transparent;
11268
11270
  --pf-v6-c-calendar-month__date--BorderRadius: var(--pf-t--global--border--radius--large);
11269
11271
  --pf-v6-c-calendar-month__date--Color: var(--pf-t--global--text--color--regular);
11270
11272
  --pf-v6-c-calendar-month__date--BackgroundColor: transparent;
11271
11273
  --pf-v6-c-calendar-month__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
11272
11274
  --pf-v6-c-calendar-month__date--disabled--Color: var(--pf-t--global--text--color--on-disabled);
11273
- --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-t--global--border--width--regular);
11275
+ --pf-v6-c-calendar-month__date--after--BorderWidth: 0;
11274
11276
  --pf-v6-c-calendar-month__date--after--BorderColor: transparent;
11275
11277
  --pf-v6-c-calendar-month__date--after--OutlineOffset: 0;
11276
11278
  --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -11279,9 +11281,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11279
11281
  --pf-v6-c-calendar-month__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked);
11280
11282
  --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
11281
11283
  --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
11284
+ --pf-v6-c-calendar-month__date--focus--after--BorderWidth: var(--pf-t--global--border--width--regular);
11282
11285
  --pf-v6-c-calendar-month__date--after--focus--OutlineOffset: -2px;
11283
- --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11284
- --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
11286
+ --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11287
+ --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor: var(--pf-t--global--border--color--high-contrast);
11288
+ --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
11289
+ --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor: transparent;
11285
11290
  }
11286
11291
 
11287
11292
  .pf-v6-c-calendar-month {
@@ -11362,8 +11367,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11362
11367
  }
11363
11368
  .pf-v6-c-calendar-month__dates-cell.pf-m-current {
11364
11369
  --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
11365
- --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth);
11366
- --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor);
11370
+ --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth);
11371
+ --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor);
11367
11372
  }
11368
11373
  .pf-v6-c-calendar-month__dates-cell.pf-m-in-range {
11369
11374
  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth);
@@ -11386,8 +11391,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11386
11391
  .pf-v6-c-calendar-month__dates-cell.pf-m-selected {
11387
11392
  --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
11388
11393
  --pf-v6-c-calendar-month__date--Color: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--Color);
11394
+ --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth);
11395
+ --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor);
11389
11396
  --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
11390
- --pf-v6-c-calendar-month__date--hover--BorderWidth: 0;
11397
+ --pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth);
11391
11398
  --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
11392
11399
  --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
11393
11400
  --pf-v6-c-calendar-month__date--after--OutlineOffset: var(--pf-v6-c-calendar-month__date--after--focus--OutlineOffset);
@@ -11411,6 +11418,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11411
11418
  background-color: var(--pf-v6-c-calendar-month__date--BackgroundColor);
11412
11419
  border: 0;
11413
11420
  }
11421
+ .pf-v6-c-calendar-month__date::before {
11422
+ position: absolute;
11423
+ inset: 0;
11424
+ content: "";
11425
+ border: var(--pf-v6-c-calendar-month__date--BorderWidth) solid var(--pf-v6-c-calendar-month__date--BorderColor);
11426
+ }
11414
11427
  .pf-v6-c-calendar-month__date::after {
11415
11428
  position: absolute;
11416
11429
  inset-block-start: var(--pf-v6-c-calendar-month__date--after--OutlineOffset);
@@ -11420,15 +11433,17 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11420
11433
  content: "";
11421
11434
  border: var(--pf-v6-c-calendar-month__date--after--BorderWidth) solid var(--pf-v6-c-calendar-month__date--after--BorderColor);
11422
11435
  }
11423
- .pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::after {
11436
+ .pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::before, .pf-v6-c-calendar-month__date::after {
11424
11437
  border-radius: var(--pf-v6-c-calendar-month__date--BorderRadius);
11425
11438
  }
11426
11439
  .pf-v6-c-calendar-month__date:hover, .pf-v6-c-calendar-month__date.pf-m-hover {
11427
11440
  --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__date--hover--BackgroundColor);
11428
- border: var(--pf-v6-c-calendar-month__date--hover--BorderColor) solid var(--pf-v6-c-calendar-month__date--hover--BorderWidth);
11441
+ --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__date--hover--BorderWidth);
11442
+ --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__date--hover--BorderColor);
11429
11443
  }
11430
11444
  .pf-v6-c-calendar-month__date:focus, .pf-v6-c-calendar-month__date.pf-m-focus {
11431
11445
  --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__date--focus--after--BorderColor);
11446
+ --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__date--focus--after--BorderWidth);
11432
11447
  outline: 0;
11433
11448
  }
11434
11449
  .pf-v6-c-calendar-month__date:disabled {
@@ -11511,6 +11526,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11511
11526
  --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
11512
11527
  --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11513
11528
  --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
11529
+ --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11514
11530
  --pf-v6-c-card--m-full-height--Height: 100%;
11515
11531
  --pf-v6-c-card--m-plain--BorderColor: transparent;
11516
11532
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
@@ -11597,6 +11613,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11597
11613
  }
11598
11614
  .pf-v6-c-card.pf-m-secondary {
11599
11615
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
11616
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
11600
11617
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
11601
11618
  }
11602
11619
  .pf-v6-c-card.pf-m-plain {
@@ -14599,7 +14616,8 @@ ul) {
14599
14616
  --pf-v6-c-drawer__panel--BoxShadow: none;
14600
14617
  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
14601
14618
  --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--high-contrast--regular);
14602
- --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default);
14619
+ --pf-v6-c-drawer--m-inline__panel--after--Width: 0;
14620
+ --pf-v6-c-drawer--m-inline__panel--after--md--Width: var(--pf-t--global--border--width--divider--default);
14603
14621
  --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--high-contrast--regular);
14604
14622
  --pf-v6-c-drawer__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
14605
14623
  --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
@@ -14907,6 +14925,7 @@ ul) {
14907
14925
 
14908
14926
  @media screen and (min-width: 48rem) {
14909
14927
  .pf-v6-c-drawer {
14928
+ --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
14910
14929
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
14911
14930
  }
14912
14931
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -16555,12 +16574,6 @@ ul) {
16555
16574
  .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
16556
16575
  padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
16557
16576
  }
16558
- @-moz-document url-prefix() {
16559
- .pf-v6-c-form-control:has(select) {
16560
- --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
16561
- --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
16562
- }
16563
- }
16564
16577
  .pf-v6-c-form-control.pf-m-placeholder > select {
16565
16578
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
16566
16579
  }
@@ -17525,7 +17538,7 @@ label.pf-v6-c-input-group__text {
17525
17538
  --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
17526
17539
  --pf-v6-c-label--MaxWidth: 100%;
17527
17540
  --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
17528
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--regular);
17541
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
17529
17542
  --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
17530
17543
  --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
17531
17544
  --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -17666,10 +17679,10 @@ label.pf-v6-c-input-group__text {
17666
17679
  --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
17667
17680
  --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
17668
17681
  --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
17669
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--default);
17682
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
17670
17683
  --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
17671
17684
  --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
17672
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
17685
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
17673
17686
  --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
17674
17687
  --pf-v6-c-label--m-add--BackgroundColor: transparent;
17675
17688
  --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
@@ -21413,6 +21426,15 @@ ul.pf-v6-c-list {
21413
21426
  --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
21414
21427
  }
21415
21428
  }
21429
+ @media screen and (max-width: calc(48rem - 1px)) {
21430
+ .pf-v6-c-page {
21431
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
21432
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
21433
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
21434
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
21435
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
21436
+ }
21437
+ }
21416
21438
 
21417
21439
  .pf-v6-c-page {
21418
21440
  display: grid;
@@ -21803,13 +21825,8 @@ ul.pf-v6-c-list {
21803
21825
  @media screen and (max-width: calc(48rem - 1px)) {
21804
21826
  .pf-v6-c-page__main-container {
21805
21827
  --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
21806
- --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
21807
- --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
21808
21828
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
21809
21829
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
21810
- --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
21811
- --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
21812
- --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
21813
21830
  }
21814
21831
  }
21815
21832
 
@@ -22414,12 +22431,12 @@ ul.pf-v6-c-list {
22414
22431
  --pf-v6-c-panel--before--BorderWidth: 0;
22415
22432
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
22416
22433
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
22417
- --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--box--default);
22434
+ --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
22418
22435
  --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
22419
22436
  --pf-v6-c-panel--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
22420
22437
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
22421
22438
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
22422
- --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--box--default);
22439
+ --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
22423
22440
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
22424
22441
  --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
22425
22442
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -22728,7 +22745,7 @@ ul.pf-v6-c-list {
22728
22745
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
22729
22746
  --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
22730
22747
  --pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
22731
- --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--regular);
22748
+ --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
22732
22749
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
22733
22750
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
22734
22751
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -29646,6 +29663,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29646
29663
  --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
29647
29664
  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
29648
29665
  --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
29666
+ --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
29649
29667
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
29650
29668
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
29651
29669
  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
@@ -29657,12 +29675,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29657
29675
  --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
29658
29676
  --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
29659
29677
  --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
29660
- --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
29678
+ --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
29661
29679
  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
29680
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
29662
29681
  --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
29663
29682
  --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
29664
29683
  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
29665
- --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
29684
+ --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
29666
29685
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
29667
29686
  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
29668
29687
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -29685,11 +29704,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29685
29704
  .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
29686
29705
  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
29687
29706
  }
29688
- .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button::before {
29707
+ .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button {
29689
29708
  border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius);
29690
29709
  border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius);
29691
29710
  }
29692
- .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button::before {
29711
+ .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button {
29693
29712
  border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius);
29694
29713
  border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius);
29695
29714
  }
@@ -29708,25 +29727,31 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29708
29727
  background-color: var(--pf-v6-c-toggle-group__button--BackgroundColor);
29709
29728
  border: 0;
29710
29729
  }
29711
- .pf-v6-c-toggle-group__button::before {
29730
+ .pf-v6-c-toggle-group__button::before, .pf-v6-c-toggle-group__button::after {
29712
29731
  position: absolute;
29713
- inset-block-start: 0;
29714
- inset-block-end: 0;
29715
- inset-inline-start: 0;
29716
- inset-inline-end: 0;
29732
+ inset: 0;
29717
29733
  pointer-events: none;
29718
29734
  content: "";
29719
29735
  border-style: solid;
29736
+ border-radius: inherit;
29737
+ }
29738
+ .pf-v6-c-toggle-group__button::before {
29720
29739
  border-width: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
29721
29740
  border-block-start-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29722
29741
  border-block-end-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29723
29742
  border-inline-start-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29724
29743
  border-inline-end-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
29725
29744
  }
29745
+ .pf-v6-c-toggle-group__button::after {
29746
+ inset: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
29747
+ border-color: var(--pf-v6-c-toggle-group__button--after--BorderColor, transparent);
29748
+ border-width: var(--pf-v6-c-toggle-group__button--after--BorderWidth, 0);
29749
+ }
29726
29750
  .pf-v6-c-toggle-group__button:is(:hover, :focus) {
29727
29751
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
29728
29752
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
29729
29753
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
29754
+ --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
29730
29755
  text-decoration-line: none;
29731
29756
  }
29732
29757
  .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -29734,6 +29759,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29734
29759
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
29735
29760
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
29736
29761
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
29762
+ --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
29737
29763
  }
29738
29764
  .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
29739
29765
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);