@patternfly/patternfly 6.3.0-prerelease.1 → 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 (47) 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/CodeEditor/code-editor.css +3 -0
  6. package/components/CodeEditor/code-editor.scss +3 -1
  7. package/components/Drawer/drawer.css +28 -14
  8. package/components/Drawer/drawer.scss +28 -9
  9. package/components/MenuToggle/menu-toggle.css +8 -4
  10. package/components/MenuToggle/menu-toggle.scss +15 -3
  11. package/components/Page/page.css +4 -3
  12. package/components/Page/page.scss +4 -2
  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 +186 -54
  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/Page/examples/Page.md +1 -0
  28. package/docs/components/Table/examples/Table.md +30 -6
  29. package/docs/components/Tabs/examples/Tabs.md +6741 -12
  30. package/docs/components/Truncate/examples/Truncate.md +53 -10
  31. package/docs/demos/Card/examples/Card.md +57 -0
  32. package/docs/demos/DescriptionList/examples/DescriptionList.md +38 -0
  33. package/docs/demos/Drawer/examples/Drawer.md +38 -0
  34. package/docs/demos/Form/examples/BasicForms.md +130 -10
  35. package/docs/demos/Masthead/examples/Masthead.md +1 -1
  36. package/docs/demos/Modal/examples/Modal.md +39 -3
  37. package/docs/demos/Nav/examples/Nav.md +2 -2
  38. package/docs/demos/Page/examples/Page.md +355 -0
  39. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  40. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +76 -0
  41. package/docs/demos/Table/examples/Table.md +67 -23
  42. package/docs/demos/Tabs/examples/Tabs.md +570 -0
  43. package/package.json +6 -6
  44. package/patternfly-no-globals.css +186 -54
  45. package/patternfly.css +186 -54
  46. package/patternfly.min.css +1 -1
  47. 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.3.0-prerelease.1",
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.8.0",
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 {
@@ -10513,6 +10534,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
10513
10534
  .pf-v6-c-code-editor__main .monaco-editor {
10514
10535
  background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
10515
10536
  }
10537
+ .pf-v6-c-code-editor__main a.label-name {
10538
+ text-decoration-line: none;
10539
+ }
10516
10540
 
10517
10541
  .pf-v6-c-code-editor__header + .pf-v6-c-code-editor__main {
10518
10542
  border-block-start-width: 0;
@@ -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 {
@@ -18111,16 +18149,20 @@ ul.pf-v6-c-list {
18111
18149
  flex-wrap: nowrap;
18112
18150
  }
18113
18151
 
18114
- .pf-v6-c-menu-toggle__icon {
18115
- flex-shrink: 0;
18116
- }
18117
18152
  .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
18118
18153
  .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
18119
- .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 {
18120
18155
  margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
18121
18156
  margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
18122
18157
  }
18123
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
+
18124
18166
  .pf-v6-c-menu-toggle__controls {
18125
18167
  display: flex;
18126
18168
  gap: var(--pf-v6-c-menu-toggle__controls--Gap);
@@ -19210,8 +19252,9 @@ ul.pf-v6-c-list {
19210
19252
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
19211
19253
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
19212
19254
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
19213
- --pf-v6-c-page__sidebar--Width: 18.125rem;
19214
- --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
19255
+ --pf-v6-c-page__sidebar--Width--base: 18.125rem;
19256
+ --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
19257
+ --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
19215
19258
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
19216
19259
  --pf-v6-c-page__sidebar--BoxShadow: none;
19217
19260
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -19639,7 +19682,7 @@ ul.pf-v6-c-list {
19639
19682
  -webkit-overflow-scrolling: touch;
19640
19683
  }
19641
19684
  @media screen and (min-width: 75rem) {
19642
- .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
19685
+ .pf-v6-c-page.pf-m-no-sidebar, .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
19643
19686
  .pf-v6-c-masthead + .pf-v6-c-page__drawer,
19644
19687
  .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
19645
19688
  --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
@@ -21791,8 +21834,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21791
21834
  --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
21792
21835
  --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
21793
21836
  --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
21794
- --pf-v6-c-skeleton--after--TranslateX: -100%;
21795
- --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;
21796
21839
  --pf-v6-c-skeleton--after--AnimationDuration: 3s;
21797
21840
  --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
21798
21841
  --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
@@ -21824,6 +21867,15 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21824
21867
  --pf-v6-c-skeleton--m-height-75--Height: 75%;
21825
21868
  --pf-v6-c-skeleton--m-height-100--Height: 100%;
21826
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
+ }
21827
21879
 
21828
21880
  .pf-v6-c-skeleton {
21829
21881
  position: relative;
@@ -21944,6 +21996,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21944
21996
  transform: translateX(100%);
21945
21997
  }
21946
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
+ }
21947
22010
  .pf-v6-c-skip-to-content {
21948
22011
  --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
21949
22012
  --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
@@ -25779,6 +25842,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25779
25842
  }
25780
25843
  }
25781
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
+ }
25782
25855
  .pf-v6-c-tabs {
25783
25856
  --pf-v6-c-tabs--inset: 0;
25784
25857
  --pf-v6-c-tabs--Width: auto;
@@ -25840,6 +25913,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25840
25913
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
25841
25914
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
25842
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);
25843
25918
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
25844
25919
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
25845
25920
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -25864,6 +25939,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25864
25939
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
25865
25940
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
25866
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);
25867
25962
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25868
25963
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
25869
25964
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -26021,6 +26116,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26021
26116
  --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
26022
26117
  --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
26023
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);
26024
26126
  display: inline-flex;
26025
26127
  flex-direction: column;
26026
26128
  height: 100%;
@@ -26283,6 +26385,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26283
26385
  text-decoration-line: none;
26284
26386
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
26285
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);
26286
26389
  }
26287
26390
  .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
26288
26391
  --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -26595,6 +26698,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26595
26698
  }
26596
26699
  }
26597
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
+ }
26598
26725
  .pf-v6-c-text-input-group {
26599
26726
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
26600
26727
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
@@ -29206,6 +29333,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29206
29333
  align-items: baseline;
29207
29334
  min-width: var(--pf-v6-c-truncate--MinWidth);
29208
29335
  }
29336
+ .pf-v6-c-truncate.pf-m-fixed {
29337
+ display: inline;
29338
+ align-items: revert;
29339
+ min-width: revert;
29340
+ }
29209
29341
 
29210
29342
  .pf-v6-c-truncate__start,
29211
29343
  .pf-v6-c-truncate__end {