@patternfly/patternfly 6.2.3 → 6.3.0-prerelease.10

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 (43) hide show
  1. package/README.md +1 -1
  2. package/assets/images/icon-help.hbs +3 -0
  3. package/components/Alert/alert-group.css +52 -31
  4. package/components/Alert/alert-group.scss +77 -46
  5. package/components/Card/card.css +3 -0
  6. package/components/Card/card.scss +3 -0
  7. package/components/Drawer/drawer.css +28 -14
  8. package/components/Drawer/drawer.scss +28 -9
  9. package/components/FormControl/form-control.css +1 -2
  10. package/components/FormControl/form-control.scss +1 -5
  11. package/components/MenuToggle/menu-toggle.css +8 -4
  12. package/components/MenuToggle/menu-toggle.scss +15 -3
  13. package/components/Skeleton/skeleton.css +22 -2
  14. package/components/Skeleton/skeleton.scss +25 -3
  15. package/components/Tabs/tabs.css +65 -0
  16. package/components/Tabs/tabs.scss +77 -0
  17. package/components/Truncate/truncate.css +5 -0
  18. package/components/Truncate/truncate.scss +6 -0
  19. package/components/_index.css +183 -53
  20. package/docs/components/Button/examples/Button.md +13 -1
  21. package/docs/components/CodeEditor/examples/CodeEditor.md +26 -2
  22. package/docs/components/Divider/examples/Divider.md +1 -1
  23. package/docs/components/Drawer/examples/Drawer.md +4 -0
  24. package/docs/components/Form/examples/Form.md +156 -12
  25. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -4
  26. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  27. package/docs/components/Table/examples/Table.md +30 -6
  28. package/docs/components/Tabs/examples/Tabs.md +6741 -12
  29. package/docs/components/Truncate/examples/Truncate.md +53 -10
  30. package/docs/demos/Card/examples/Card.md +57 -0
  31. package/docs/demos/DescriptionList/examples/DescriptionList.md +38 -0
  32. package/docs/demos/Drawer/examples/Drawer.md +38 -0
  33. package/docs/demos/Form/examples/BasicForms.md +130 -10
  34. package/docs/demos/Modal/examples/Modal.md +39 -3
  35. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  36. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +76 -0
  37. package/docs/demos/Table/examples/Table.md +67 -23
  38. package/docs/demos/Tabs/examples/Tabs.md +570 -0
  39. package/package.json +6 -6
  40. package/patternfly-no-globals.css +183 -53
  41. package/patternfly.css +183 -53
  42. package/patternfly.min.css +1 -1
  43. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -8195,27 +8195,45 @@ button) {
8195
8195
  var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
8196
8196
  var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
8197
8197
  0s;
8198
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
8199
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
8200
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
8201
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
8202
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
8203
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
8204
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
8205
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
8206
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
8207
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
8208
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
8209
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
8210
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
8211
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
8212
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
8213
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
8214
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
8215
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: all
8216
- var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
8217
- var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
8218
- var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
8198
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
8199
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
8200
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
8201
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
8202
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
8203
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: initial;
8204
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: initial;
8205
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: initial;
8206
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: initial;
8207
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: initial;
8208
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
8209
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
8210
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
8211
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
8212
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
8213
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
8214
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
8215
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
8216
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
8217
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
8218
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: initial;
8219
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: initial;
8220
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: initial;
8221
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: initial;
8222
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: initial;
8223
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: initial;
8224
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: initial;
8225
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: initial;
8226
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: initial;
8227
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: initial;
8228
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
8229
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
8230
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition: all
8231
+ var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration)
8232
+ var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction)
8233
+ var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration);
8234
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial;
8235
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial;
8236
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: initial;
8219
8237
  --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
8220
8238
  --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
8221
8239
  --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -8275,40 +8293,43 @@ button) {
8275
8293
  transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
8276
8294
  }
8277
8295
  }
8278
- .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child {
8296
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child, .pf-v6-c-alert-group__item.pf-m-incoming:first-child {
8279
8297
  grid-template-rows: 0fr;
8280
8298
  margin-block: 0;
8281
8299
  overflow: hidden;
8282
8300
  opacity: 0;
8283
8301
  transform: translateY(-100%);
8284
8302
  }
8285
- .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert {
8303
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-incoming:first-child .pf-v6-c-alert {
8286
8304
  min-height: 0;
8287
8305
  padding-block-start: 0;
8288
8306
  padding-block-end: 0;
8289
8307
  border-width: 0;
8290
8308
  }
8291
- .pf-v6-c-alert-group__item.pf-m-offstage-right {
8309
+ .pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
8292
8310
  grid-template-rows: 0fr;
8293
8311
  margin-block: 0;
8294
8312
  overflow: hidden;
8295
8313
  opacity: 0;
8296
- transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default);
8314
+ transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default)), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block--default)), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity--default)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default));
8297
8315
  }
8298
- .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
8316
+ .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-outgoing .pf-v6-c-alert {
8299
8317
  min-height: 0;
8300
8318
  padding-block-start: 0;
8301
8319
  padding-block-end: 0;
8302
8320
  border-width: 0;
8303
- transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
8321
+ transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDelay--default));
8304
8322
  }
8305
8323
  @media screen and (prefers-reduced-motion: no-preference) {
8306
- .pf-v6-c-alert-group__item.pf-m-offstage-right {
8307
- transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows);
8324
+ .pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
8325
+ transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--transform)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--transform)), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity)), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--margin-block)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block)), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows));
8308
8326
  transform: translateX(100%);
8309
8327
  }
8310
- .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
8311
- transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition);
8328
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
8329
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
8330
+ }
8331
+ .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-outgoing .pf-v6-c-alert {
8332
+ transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition));
8312
8333
  }
8313
8334
  }
8314
8335
  .pf-v6-c-alert-group__item:hover {
@@ -9927,6 +9948,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9927
9948
  --pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
9928
9949
  --pf-v6-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
9929
9950
  --pf-v6-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
9951
+ --pf-v6-c-card__title-text--OverflowWrap: break-word;
9930
9952
  --pf-v6-c-card--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
9931
9953
  --pf-v6-c-card__body--FontSize: var(--pf-t--global--font--size--body--default);
9932
9954
  --pf-v6-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default);
@@ -10139,11 +10161,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10139
10161
  }
10140
10162
 
10141
10163
  .pf-v6-c-card__title-text {
10164
+ overflow: auto;
10142
10165
  font-family: var(--pf-v6-c-card__title-text--FontFamily);
10143
10166
  font-size: var(--pf-v6-c-card__title-text--FontSize);
10144
10167
  font-weight: var(--pf-v6-c-card__title-text--FontWeight);
10145
10168
  line-height: var(--pf-v6-c-card__title-text--LineHeight);
10146
10169
  color: var(--pf-v6-c-card__title-text--Color);
10170
+ overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
10147
10171
  }
10148
10172
 
10149
10173
  .pf-v6-c-card__actions {
@@ -12905,9 +12929,15 @@ ul) {
12905
12929
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
12906
12930
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12907
12931
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12932
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus), var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
12933
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--fade);
12934
+ --pf-v6-c-drawer__panel--TransitionDelay--expand--focus: 0s;
12908
12935
  --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
12909
- --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
12910
- --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
12936
+ --pf-v6-c-drawer__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
12937
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-v6-c-drawer__panel--TransitionDuration--fade), 0s, 0s;
12938
+ --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
12939
+ --pf-v6-c-drawer__panel--Opacity: 0;
12940
+ --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
12911
12941
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
12912
12942
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
12913
12943
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -12997,6 +13027,17 @@ ul) {
12997
13027
  --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
12998
13028
  --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
12999
13029
  }
13030
+ @media screen and (prefers-reduced-motion: no-preference) {
13031
+ .pf-v6-c-drawer {
13032
+ --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
13033
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
13034
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
13035
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
13036
+ --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
13037
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
13038
+ --pf-v6-c-drawer__panel--Opacity: 1;
13039
+ }
13040
+ }
13000
13041
  @media screen and (min-width: 75rem) {
13001
13042
  .pf-v6-c-drawer {
13002
13043
  --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
@@ -13044,8 +13085,13 @@ ul) {
13044
13085
  .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
13045
13086
  flex-direction: column;
13046
13087
  }
13088
+ .pf-v6-c-drawer.pf-m-expanded {
13089
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
13090
+ }
13047
13091
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
13048
13092
  transform: translateX(-100%);
13093
+ --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
13094
+ visibility: visible;
13049
13095
  }
13050
13096
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
13051
13097
  transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
@@ -13118,8 +13164,11 @@ ul) {
13118
13164
  order: 1;
13119
13165
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
13120
13166
  overflow: auto;
13167
+ visibility: hidden;
13121
13168
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
13122
13169
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
13170
+ opacity: var(--pf-v6-c-drawer__panel--Opacity);
13171
+ transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
13123
13172
  transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
13124
13173
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
13125
13174
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
@@ -13176,17 +13225,6 @@ ul) {
13176
13225
  padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
13177
13226
  }
13178
13227
 
13179
- @keyframes pf-remove-tab-focus {
13180
- to {
13181
- visibility: hidden;
13182
- }
13183
- }
13184
- .pf-v6-c-drawer__panel[hidden] {
13185
- animation-name: pf-remove-tab-focus;
13186
- animation-delay: var(--pf-v6-c-drawer__panel--TransitionDuration);
13187
- animation-fill-mode: forwards;
13188
- }
13189
-
13190
13228
  .pf-v6-c-drawer__head {
13191
13229
  display: grid;
13192
13230
  grid-template-columns: auto;
@@ -13294,7 +13332,7 @@ ul) {
13294
13332
  .pf-v6-c-drawer {
13295
13333
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
13296
13334
  }
13297
- .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
13335
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
13298
13336
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
13299
13337
  }
13300
13338
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
@@ -14668,12 +14706,11 @@ ul) {
14668
14706
  padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart);
14669
14707
  padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
14670
14708
  color: var(--pf-v6-c-form-control--Color);
14709
+ appearance: none;
14671
14710
  background-color: transparent;
14672
14711
  border: none;
14673
14712
  border-radius: var(--pf-v6-c-form-control--BorderRadius);
14674
14713
  outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
14675
- -moz-appearance: none;
14676
- -webkit-appearance: none;
14677
14714
  }
14678
14715
  .pf-v6-c-form-control > ::placeholder {
14679
14716
  color: var(--pf-v6-c-form-control--m-placeholder--Color);
@@ -18248,16 +18285,20 @@ ul.pf-v6-c-list {
18248
18285
  flex-wrap: nowrap;
18249
18286
  }
18250
18287
 
18251
- .pf-v6-c-menu-toggle__icon {
18252
- flex-shrink: 0;
18253
- }
18254
18288
  .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
18255
18289
  .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
18256
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
18290
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
18257
18291
  margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
18258
18292
  margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
18259
18293
  }
18260
18294
 
18295
+ .pf-v6-c-menu-toggle__icon {
18296
+ flex-shrink: 0;
18297
+ }
18298
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
18299
+ vertical-align: middle;
18300
+ }
18301
+
18261
18302
  .pf-v6-c-menu-toggle__controls {
18262
18303
  display: flex;
18263
18304
  gap: var(--pf-v6-c-menu-toggle__controls--Gap);
@@ -21929,8 +21970,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21929
21970
  --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
21930
21971
  --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
21931
21972
  --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
21932
- --pf-v6-c-skeleton--after--TranslateX: -100%;
21933
- --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
21973
+ --pf-v6-c-skeleton--after--TranslateX: 0;
21974
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
21934
21975
  --pf-v6-c-skeleton--after--AnimationDuration: 3s;
21935
21976
  --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
21936
21977
  --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
@@ -21962,6 +22003,15 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21962
22003
  --pf-v6-c-skeleton--m-height-75--Height: 75%;
21963
22004
  --pf-v6-c-skeleton--m-height-100--Height: 100%;
21964
22005
  }
22006
+ @media screen and (prefers-reduced-motion: no-preference) {
22007
+ .pf-v6-c-skeleton {
22008
+ --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
22009
+ --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
22010
+ --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
22011
+ --pf-v6-c-skeleton--after--TranslateX: -100%;
22012
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
22013
+ }
22014
+ }
21965
22015
 
21966
22016
  .pf-v6-c-skeleton {
21967
22017
  position: relative;
@@ -22082,6 +22132,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
22082
22132
  transform: translateX(100%);
22083
22133
  }
22084
22134
  }
22135
+ @keyframes pf-v6-c-skeleton-loading-reduced-motion {
22136
+ 0% {
22137
+ opacity: 0.25;
22138
+ }
22139
+ 60% {
22140
+ opacity: 1;
22141
+ }
22142
+ 100% {
22143
+ opacity: 0.25;
22144
+ }
22145
+ }
22085
22146
  .pf-v6-c-skip-to-content {
22086
22147
  --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
22087
22148
  --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
@@ -25917,6 +25978,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25917
25978
  }
25918
25979
  }
25919
25980
 
25981
+ @property --pf-v6-c-tabs--link-accent--length {
25982
+ syntax: "<length>";
25983
+ inherits: true;
25984
+ initial-value: 0px;
25985
+ }
25986
+ @property --pf-v6-c-tabs--link-accent--start {
25987
+ syntax: "<length>";
25988
+ inherits: true;
25989
+ initial-value: 0px;
25990
+ }
25920
25991
  .pf-v6-c-tabs {
25921
25992
  --pf-v6-c-tabs--inset: 0;
25922
25993
  --pf-v6-c-tabs--Width: auto;
@@ -25978,6 +26049,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25978
26049
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
25979
26050
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
25980
26051
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
26052
+ --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
26053
+ --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
25981
26054
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
25982
26055
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
25983
26056
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -26002,6 +26075,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26002
26075
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
26003
26076
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
26004
26077
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
26078
+ --pf-v6-c-tabs--link-accent--start: 0;
26079
+ --pf-v6-c-tabs--link-accent--length: auto;
26080
+ --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
26081
+ --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
26082
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
26083
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
26084
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
26085
+ --pf-v6-c-tabs--link-accent--Width: initial;
26086
+ --pf-v6-c-tabs--link-accent--Height: 0;
26087
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
26088
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
26089
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
26090
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
26091
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
26092
+ --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
26093
+ --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
26094
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
26095
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
26096
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
26097
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
26005
26098
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
26006
26099
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
26007
26100
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -26159,6 +26252,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26159
26252
  --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
26160
26253
  --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
26161
26254
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
26255
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
26256
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
26257
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
26258
+ --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
26259
+ --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
26260
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
26261
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
26162
26262
  display: inline-flex;
26163
26263
  flex-direction: column;
26164
26264
  height: 100%;
@@ -26421,6 +26521,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26421
26521
  text-decoration-line: none;
26422
26522
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
26423
26523
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
26524
+ transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
26424
26525
  }
26425
26526
  .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
26426
26527
  --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -26733,6 +26834,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26733
26834
  }
26734
26835
  }
26735
26836
 
26837
+ @media (prefers-reduced-motion: no-preference) {
26838
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
26839
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
26840
+ content: revert;
26841
+ }
26842
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
26843
+ position: absolute;
26844
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
26845
+ inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
26846
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
26847
+ width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
26848
+ height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
26849
+ content: "";
26850
+ border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
26851
+ border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
26852
+ border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
26853
+ transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
26854
+ transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
26855
+ transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
26856
+ }
26857
+ .pf-v6-c-tabs.pf-m-initializing-accent {
26858
+ --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
26859
+ }
26860
+ }
26736
26861
  .pf-v6-c-text-input-group {
26737
26862
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
26738
26863
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
@@ -29344,6 +29469,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29344
29469
  align-items: baseline;
29345
29470
  min-width: var(--pf-v6-c-truncate--MinWidth);
29346
29471
  }
29472
+ .pf-v6-c-truncate.pf-m-fixed {
29473
+ display: inline;
29474
+ align-items: revert;
29475
+ min-width: revert;
29476
+ }
29347
29477
 
29348
29478
  .pf-v6-c-truncate__start,
29349
29479
  .pf-v6-c-truncate__end {