@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/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.2.3",
4
+ "version": "6.3.0-prerelease.10",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,11 +47,11 @@
47
47
  "@commitlint/config-conventional": "^19.1.0",
48
48
  "@fortawesome/fontawesome": "^1.1.8",
49
49
  "@octokit/rest": "^20.1.0",
50
- "@patternfly/documentation-framework": "6.5.20",
51
- "@patternfly/patternfly-a11y": "5.0.0",
52
- "@patternfly/react-code-editor": "6.1.0",
53
- "@patternfly/react-core": "6.1.0",
54
- "@patternfly/react-table": "6.1.0",
50
+ "@patternfly/documentation-framework": "6.10.0",
51
+ "@patternfly/patternfly-a11y": "5.1.0",
52
+ "@patternfly/react-code-editor": "6.2.2",
53
+ "@patternfly/react-core": "6.2.2",
54
+ "@patternfly/react-table": "6.2.2",
55
55
  "@starptech/prettyhtml": "^0.10.0",
56
56
  "backstopjs": "^6.3.23",
57
57
  "cheerio": "^1.0.0-rc.12",
@@ -8059,27 +8059,45 @@
8059
8059
  var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
8060
8060
  var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
8061
8061
  0s;
8062
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
8063
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
8064
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
8065
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
8066
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
8067
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
8068
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
8069
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
8070
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
8071
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
8072
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
8073
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
8074
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
8075
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
8076
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
8077
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
8078
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
8079
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: all
8080
- var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
8081
- var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
8082
- var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
8062
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
8063
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
8064
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
8065
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
8066
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
8067
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: initial;
8068
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: initial;
8069
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: initial;
8070
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: initial;
8071
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: initial;
8072
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
8073
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
8074
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
8075
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
8076
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
8077
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
8078
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
8079
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
8080
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
8081
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
8082
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: initial;
8083
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: initial;
8084
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: initial;
8085
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: initial;
8086
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: initial;
8087
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: initial;
8088
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: initial;
8089
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: initial;
8090
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: initial;
8091
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: initial;
8092
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
8093
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
8094
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition: all
8095
+ var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration)
8096
+ var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction)
8097
+ var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration);
8098
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial;
8099
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial;
8100
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: initial;
8083
8101
  --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
8084
8102
  --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
8085
8103
  --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -8139,40 +8157,43 @@
8139
8157
  transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
8140
8158
  }
8141
8159
  }
8142
- .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child {
8160
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child, .pf-v6-c-alert-group__item.pf-m-incoming:first-child {
8143
8161
  grid-template-rows: 0fr;
8144
8162
  margin-block: 0;
8145
8163
  overflow: hidden;
8146
8164
  opacity: 0;
8147
8165
  transform: translateY(-100%);
8148
8166
  }
8149
- .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert {
8167
+ .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 {
8150
8168
  min-height: 0;
8151
8169
  padding-block-start: 0;
8152
8170
  padding-block-end: 0;
8153
8171
  border-width: 0;
8154
8172
  }
8155
- .pf-v6-c-alert-group__item.pf-m-offstage-right {
8173
+ .pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
8156
8174
  grid-template-rows: 0fr;
8157
8175
  margin-block: 0;
8158
8176
  overflow: hidden;
8159
8177
  opacity: 0;
8160
- 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);
8178
+ 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));
8161
8179
  }
8162
- .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
8180
+ .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 {
8163
8181
  min-height: 0;
8164
8182
  padding-block-start: 0;
8165
8183
  padding-block-end: 0;
8166
8184
  border-width: 0;
8167
- transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
8185
+ 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));
8168
8186
  }
8169
8187
  @media screen and (prefers-reduced-motion: no-preference) {
8170
- .pf-v6-c-alert-group__item.pf-m-offstage-right {
8171
- 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);
8188
+ .pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
8189
+ 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));
8172
8190
  transform: translateX(100%);
8173
8191
  }
8174
- .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
8175
- transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition);
8192
+ :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 {
8193
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
8194
+ }
8195
+ .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 {
8196
+ 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));
8176
8197
  }
8177
8198
  }
8178
8199
  .pf-v6-c-alert-group__item:hover {
@@ -9791,6 +9812,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9791
9812
  --pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
9792
9813
  --pf-v6-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
9793
9814
  --pf-v6-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
9815
+ --pf-v6-c-card__title-text--OverflowWrap: break-word;
9794
9816
  --pf-v6-c-card--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
9795
9817
  --pf-v6-c-card__body--FontSize: var(--pf-t--global--font--size--body--default);
9796
9818
  --pf-v6-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default);
@@ -10003,11 +10025,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10003
10025
  }
10004
10026
 
10005
10027
  .pf-v6-c-card__title-text {
10028
+ overflow: auto;
10006
10029
  font-family: var(--pf-v6-c-card__title-text--FontFamily);
10007
10030
  font-size: var(--pf-v6-c-card__title-text--FontSize);
10008
10031
  font-weight: var(--pf-v6-c-card__title-text--FontWeight);
10009
10032
  line-height: var(--pf-v6-c-card__title-text--LineHeight);
10010
10033
  color: var(--pf-v6-c-card__title-text--Color);
10034
+ overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
10011
10035
  }
10012
10036
 
10013
10037
  .pf-v6-c-card__actions {
@@ -12769,9 +12793,15 @@ ul) {
12769
12793
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
12770
12794
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12771
12795
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12796
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus), var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
12797
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--fade);
12798
+ --pf-v6-c-drawer__panel--TransitionDelay--expand--focus: 0s;
12772
12799
  --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
12773
- --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
12774
- --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
12800
+ --pf-v6-c-drawer__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
12801
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-v6-c-drawer__panel--TransitionDuration--fade), 0s, 0s;
12802
+ --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
12803
+ --pf-v6-c-drawer__panel--Opacity: 0;
12804
+ --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
12775
12805
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
12776
12806
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
12777
12807
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -12861,6 +12891,17 @@ ul) {
12861
12891
  --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
12862
12892
  --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
12863
12893
  }
12894
+ @media screen and (prefers-reduced-motion: no-preference) {
12895
+ .pf-v6-c-drawer {
12896
+ --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
12897
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
12898
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
12899
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
12900
+ --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
12901
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
12902
+ --pf-v6-c-drawer__panel--Opacity: 1;
12903
+ }
12904
+ }
12864
12905
  @media screen and (min-width: 75rem) {
12865
12906
  .pf-v6-c-drawer {
12866
12907
  --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
@@ -12908,8 +12949,13 @@ ul) {
12908
12949
  .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
12909
12950
  flex-direction: column;
12910
12951
  }
12952
+ .pf-v6-c-drawer.pf-m-expanded {
12953
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
12954
+ }
12911
12955
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
12912
12956
  transform: translateX(-100%);
12957
+ --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
12958
+ visibility: visible;
12913
12959
  }
12914
12960
  :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 {
12915
12961
  transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
@@ -12982,8 +13028,11 @@ ul) {
12982
13028
  order: 1;
12983
13029
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
12984
13030
  overflow: auto;
13031
+ visibility: hidden;
12985
13032
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
12986
13033
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
13034
+ opacity: var(--pf-v6-c-drawer__panel--Opacity);
13035
+ transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
12987
13036
  transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
12988
13037
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
12989
13038
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
@@ -13040,17 +13089,6 @@ ul) {
13040
13089
  padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
13041
13090
  }
13042
13091
 
13043
- @keyframes pf-remove-tab-focus {
13044
- to {
13045
- visibility: hidden;
13046
- }
13047
- }
13048
- .pf-v6-c-drawer__panel[hidden] {
13049
- animation-name: pf-remove-tab-focus;
13050
- animation-delay: var(--pf-v6-c-drawer__panel--TransitionDuration);
13051
- animation-fill-mode: forwards;
13052
- }
13053
-
13054
13092
  .pf-v6-c-drawer__head {
13055
13093
  display: grid;
13056
13094
  grid-template-columns: auto;
@@ -13158,7 +13196,7 @@ ul) {
13158
13196
  .pf-v6-c-drawer {
13159
13197
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
13160
13198
  }
13161
- .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
13199
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
13162
13200
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
13163
13201
  }
13164
13202
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
@@ -14532,12 +14570,11 @@ ul) {
14532
14570
  padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart);
14533
14571
  padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
14534
14572
  color: var(--pf-v6-c-form-control--Color);
14573
+ appearance: none;
14535
14574
  background-color: transparent;
14536
14575
  border: none;
14537
14576
  border-radius: var(--pf-v6-c-form-control--BorderRadius);
14538
14577
  outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
14539
- -moz-appearance: none;
14540
- -webkit-appearance: none;
14541
14578
  }
14542
14579
  .pf-v6-c-form-control > ::placeholder {
14543
14580
  color: var(--pf-v6-c-form-control--m-placeholder--Color);
@@ -18112,16 +18149,20 @@ ul.pf-v6-c-list {
18112
18149
  flex-wrap: nowrap;
18113
18150
  }
18114
18151
 
18115
- .pf-v6-c-menu-toggle__icon {
18116
- flex-shrink: 0;
18117
- }
18118
18152
  .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
18119
18153
  .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
18120
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
18154
+ .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 {
18121
18155
  margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
18122
18156
  margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
18123
18157
  }
18124
18158
 
18159
+ .pf-v6-c-menu-toggle__icon {
18160
+ flex-shrink: 0;
18161
+ }
18162
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
18163
+ vertical-align: middle;
18164
+ }
18165
+
18125
18166
  .pf-v6-c-menu-toggle__controls {
18126
18167
  display: flex;
18127
18168
  gap: var(--pf-v6-c-menu-toggle__controls--Gap);
@@ -21793,8 +21834,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21793
21834
  --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
21794
21835
  --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
21795
21836
  --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
21796
- --pf-v6-c-skeleton--after--TranslateX: -100%;
21797
- --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
21837
+ --pf-v6-c-skeleton--after--TranslateX: 0;
21838
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
21798
21839
  --pf-v6-c-skeleton--after--AnimationDuration: 3s;
21799
21840
  --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
21800
21841
  --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
@@ -21826,6 +21867,15 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21826
21867
  --pf-v6-c-skeleton--m-height-75--Height: 75%;
21827
21868
  --pf-v6-c-skeleton--m-height-100--Height: 100%;
21828
21869
  }
21870
+ @media screen and (prefers-reduced-motion: no-preference) {
21871
+ .pf-v6-c-skeleton {
21872
+ --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
21873
+ --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
21874
+ --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
21875
+ --pf-v6-c-skeleton--after--TranslateX: -100%;
21876
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
21877
+ }
21878
+ }
21829
21879
 
21830
21880
  .pf-v6-c-skeleton {
21831
21881
  position: relative;
@@ -21946,6 +21996,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21946
21996
  transform: translateX(100%);
21947
21997
  }
21948
21998
  }
21999
+ @keyframes pf-v6-c-skeleton-loading-reduced-motion {
22000
+ 0% {
22001
+ opacity: 0.25;
22002
+ }
22003
+ 60% {
22004
+ opacity: 1;
22005
+ }
22006
+ 100% {
22007
+ opacity: 0.25;
22008
+ }
22009
+ }
21949
22010
  .pf-v6-c-skip-to-content {
21950
22011
  --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
21951
22012
  --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
@@ -25781,6 +25842,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25781
25842
  }
25782
25843
  }
25783
25844
 
25845
+ @property --pf-v6-c-tabs--link-accent--length {
25846
+ syntax: "<length>";
25847
+ inherits: true;
25848
+ initial-value: 0px;
25849
+ }
25850
+ @property --pf-v6-c-tabs--link-accent--start {
25851
+ syntax: "<length>";
25852
+ inherits: true;
25853
+ initial-value: 0px;
25854
+ }
25784
25855
  .pf-v6-c-tabs {
25785
25856
  --pf-v6-c-tabs--inset: 0;
25786
25857
  --pf-v6-c-tabs--Width: auto;
@@ -25842,6 +25913,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25842
25913
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
25843
25914
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
25844
25915
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
25916
+ --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
25917
+ --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
25845
25918
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
25846
25919
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
25847
25920
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -25866,6 +25939,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25866
25939
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
25867
25940
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
25868
25941
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
25942
+ --pf-v6-c-tabs--link-accent--start: 0;
25943
+ --pf-v6-c-tabs--link-accent--length: auto;
25944
+ --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
25945
+ --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
25946
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
25947
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
25948
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
25949
+ --pf-v6-c-tabs--link-accent--Width: initial;
25950
+ --pf-v6-c-tabs--link-accent--Height: 0;
25951
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
25952
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
25953
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
25954
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
25955
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
25956
+ --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
25957
+ --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
25958
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
25959
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
25960
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
25961
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
25869
25962
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25870
25963
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
25871
25964
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -26023,6 +26116,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26023
26116
  --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
26024
26117
  --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
26025
26118
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
26119
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
26120
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
26121
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
26122
+ --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
26123
+ --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
26124
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
26125
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
26026
26126
  display: inline-flex;
26027
26127
  flex-direction: column;
26028
26128
  height: 100%;
@@ -26285,6 +26385,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26285
26385
  text-decoration-line: none;
26286
26386
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
26287
26387
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
26388
+ transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
26288
26389
  }
26289
26390
  .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
26290
26391
  --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -26597,6 +26698,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26597
26698
  }
26598
26699
  }
26599
26700
 
26701
+ @media (prefers-reduced-motion: no-preference) {
26702
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
26703
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
26704
+ content: revert;
26705
+ }
26706
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
26707
+ position: absolute;
26708
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
26709
+ inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
26710
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
26711
+ width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
26712
+ height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
26713
+ content: "";
26714
+ border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
26715
+ border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
26716
+ border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
26717
+ transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
26718
+ transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
26719
+ transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
26720
+ }
26721
+ .pf-v6-c-tabs.pf-m-initializing-accent {
26722
+ --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
26723
+ }
26724
+ }
26600
26725
  .pf-v6-c-text-input-group {
26601
26726
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
26602
26727
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
@@ -29208,6 +29333,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29208
29333
  align-items: baseline;
29209
29334
  min-width: var(--pf-v6-c-truncate--MinWidth);
29210
29335
  }
29336
+ .pf-v6-c-truncate.pf-m-fixed {
29337
+ display: inline;
29338
+ align-items: revert;
29339
+ min-width: revert;
29340
+ }
29211
29341
 
29212
29342
  .pf-v6-c-truncate__start,
29213
29343
  .pf-v6-c-truncate__end {