@patternfly/patternfly 6.3.0-prerelease.1 → 6.3.0-prerelease.11

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 (49) 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/ExpandableSection/expandable-section.css +30 -0
  10. package/components/ExpandableSection/expandable-section.scss +30 -0
  11. package/components/MenuToggle/menu-toggle.css +8 -4
  12. package/components/MenuToggle/menu-toggle.scss +15 -3
  13. package/components/Page/page.css +4 -3
  14. package/components/Page/page.scss +4 -2
  15. package/components/Skeleton/skeleton.css +22 -2
  16. package/components/Skeleton/skeleton.scss +25 -3
  17. package/components/Tabs/tabs.css +65 -0
  18. package/components/Tabs/tabs.scss +77 -0
  19. package/components/Truncate/truncate.css +5 -0
  20. package/components/Truncate/truncate.scss +6 -0
  21. package/components/_index.css +216 -54
  22. package/docs/components/Button/examples/Button.md +13 -1
  23. package/docs/components/CodeEditor/examples/CodeEditor.md +26 -2
  24. package/docs/components/Divider/examples/Divider.md +1 -1
  25. package/docs/components/Drawer/examples/Drawer.md +4 -0
  26. package/docs/components/Form/examples/Form.md +156 -12
  27. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -4
  28. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  29. package/docs/components/Page/examples/Page.md +1 -0
  30. package/docs/components/Table/examples/Table.md +30 -6
  31. package/docs/components/Tabs/examples/Tabs.md +6741 -12
  32. package/docs/components/Truncate/examples/Truncate.md +53 -10
  33. package/docs/demos/Card/examples/Card.md +57 -0
  34. package/docs/demos/DescriptionList/examples/DescriptionList.md +38 -0
  35. package/docs/demos/Drawer/examples/Drawer.md +38 -0
  36. package/docs/demos/Form/examples/BasicForms.md +130 -10
  37. package/docs/demos/Masthead/examples/Masthead.md +1 -1
  38. package/docs/demos/Modal/examples/Modal.md +39 -3
  39. package/docs/demos/Nav/examples/Nav.md +2 -2
  40. package/docs/demos/Page/examples/Page.md +355 -0
  41. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  42. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +76 -0
  43. package/docs/demos/Table/examples/Table.md +67 -23
  44. package/docs/demos/Tabs/examples/Tabs.md +570 -0
  45. package/package.json +6 -6
  46. package/patternfly-no-globals.css +216 -54
  47. package/patternfly.css +216 -54
  48. package/patternfly.min.css +1 -1
  49. 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.11",
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.1",
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 {
@@ -13742,6 +13780,17 @@ ul) {
13742
13780
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
13743
13781
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
13744
13782
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
13783
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
13784
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
13785
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
13786
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
13787
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
13788
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
13789
+ --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
13790
+ --pf-v6-c-expandable-section__content--Opacity: 0;
13791
+ --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
13792
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
13793
+ --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
13745
13794
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
13746
13795
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
13747
13796
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -13753,10 +13802,18 @@ ul) {
13753
13802
  --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
13754
13803
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
13755
13804
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
13805
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
13756
13806
  --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
13757
13807
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
13758
13808
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
13759
13809
  }
13810
+ @media screen and (prefers-reduced-motion: no-preference) {
13811
+ .pf-v6-c-expandable-section {
13812
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
13813
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
13814
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
13815
+ }
13816
+ }
13760
13817
 
13761
13818
  .pf-v6-c-expandable-section {
13762
13819
  display: flex;
@@ -13767,6 +13824,11 @@ ul) {
13767
13824
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
13768
13825
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
13769
13826
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
13827
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
13828
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
13829
+ --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
13830
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
13831
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
13770
13832
  }
13771
13833
  .pf-v6-c-expandable-section.pf-m-limit-width {
13772
13834
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -13779,6 +13841,7 @@ ul) {
13779
13841
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
13780
13842
  border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
13781
13843
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
13844
+ transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
13782
13845
  }
13783
13846
  .pf-v6-c-expandable-section.pf-m-indented {
13784
13847
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -13812,6 +13875,11 @@ ul) {
13812
13875
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
13813
13876
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
13814
13877
  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
13878
+ opacity: var(--pf-v6-c-expandable-section__content--Opacity);
13879
+ transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
13880
+ transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
13881
+ transition-property: opacity, translate;
13882
+ translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
13815
13883
  }
13816
13884
 
13817
13885
  .pf-v6-c-file-upload {
@@ -18111,16 +18179,20 @@ ul.pf-v6-c-list {
18111
18179
  flex-wrap: nowrap;
18112
18180
  }
18113
18181
 
18114
- .pf-v6-c-menu-toggle__icon {
18115
- flex-shrink: 0;
18116
- }
18117
18182
  .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
18118
18183
  .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
18119
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
18184
+ .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
18185
  margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
18121
18186
  margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
18122
18187
  }
18123
18188
 
18189
+ .pf-v6-c-menu-toggle__icon {
18190
+ flex-shrink: 0;
18191
+ }
18192
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
18193
+ vertical-align: middle;
18194
+ }
18195
+
18124
18196
  .pf-v6-c-menu-toggle__controls {
18125
18197
  display: flex;
18126
18198
  gap: var(--pf-v6-c-menu-toggle__controls--Gap);
@@ -19210,8 +19282,9 @@ ul.pf-v6-c-list {
19210
19282
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
19211
19283
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
19212
19284
  --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;
19285
+ --pf-v6-c-page__sidebar--Width--base: 18.125rem;
19286
+ --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
19287
+ --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
19215
19288
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
19216
19289
  --pf-v6-c-page__sidebar--BoxShadow: none;
19217
19290
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -19639,7 +19712,7 @@ ul.pf-v6-c-list {
19639
19712
  -webkit-overflow-scrolling: touch;
19640
19713
  }
19641
19714
  @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,
19715
+ .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
19716
  .pf-v6-c-masthead + .pf-v6-c-page__drawer,
19644
19717
  .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
19645
19718
  --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
@@ -21791,8 +21864,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21791
21864
  --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
21792
21865
  --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
21793
21866
  --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;
21867
+ --pf-v6-c-skeleton--after--TranslateX: 0;
21868
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
21796
21869
  --pf-v6-c-skeleton--after--AnimationDuration: 3s;
21797
21870
  --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
21798
21871
  --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
@@ -21824,6 +21897,15 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21824
21897
  --pf-v6-c-skeleton--m-height-75--Height: 75%;
21825
21898
  --pf-v6-c-skeleton--m-height-100--Height: 100%;
21826
21899
  }
21900
+ @media screen and (prefers-reduced-motion: no-preference) {
21901
+ .pf-v6-c-skeleton {
21902
+ --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
21903
+ --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
21904
+ --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
21905
+ --pf-v6-c-skeleton--after--TranslateX: -100%;
21906
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
21907
+ }
21908
+ }
21827
21909
 
21828
21910
  .pf-v6-c-skeleton {
21829
21911
  position: relative;
@@ -21944,6 +22026,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21944
22026
  transform: translateX(100%);
21945
22027
  }
21946
22028
  }
22029
+ @keyframes pf-v6-c-skeleton-loading-reduced-motion {
22030
+ 0% {
22031
+ opacity: 0.25;
22032
+ }
22033
+ 60% {
22034
+ opacity: 1;
22035
+ }
22036
+ 100% {
22037
+ opacity: 0.25;
22038
+ }
22039
+ }
21947
22040
  .pf-v6-c-skip-to-content {
21948
22041
  --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
21949
22042
  --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
@@ -25779,6 +25872,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25779
25872
  }
25780
25873
  }
25781
25874
 
25875
+ @property --pf-v6-c-tabs--link-accent--length {
25876
+ syntax: "<length>";
25877
+ inherits: true;
25878
+ initial-value: 0px;
25879
+ }
25880
+ @property --pf-v6-c-tabs--link-accent--start {
25881
+ syntax: "<length>";
25882
+ inherits: true;
25883
+ initial-value: 0px;
25884
+ }
25782
25885
  .pf-v6-c-tabs {
25783
25886
  --pf-v6-c-tabs--inset: 0;
25784
25887
  --pf-v6-c-tabs--Width: auto;
@@ -25840,6 +25943,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25840
25943
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
25841
25944
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
25842
25945
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
25946
+ --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
25947
+ --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
25843
25948
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
25844
25949
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
25845
25950
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -25864,6 +25969,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25864
25969
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
25865
25970
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
25866
25971
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
25972
+ --pf-v6-c-tabs--link-accent--start: 0;
25973
+ --pf-v6-c-tabs--link-accent--length: auto;
25974
+ --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
25975
+ --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
25976
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
25977
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
25978
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
25979
+ --pf-v6-c-tabs--link-accent--Width: initial;
25980
+ --pf-v6-c-tabs--link-accent--Height: 0;
25981
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
25982
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
25983
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
25984
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
25985
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
25986
+ --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
25987
+ --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
25988
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
25989
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
25990
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
25991
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
25867
25992
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25868
25993
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
25869
25994
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -26021,6 +26146,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26021
26146
  --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
26022
26147
  --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
26023
26148
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
26149
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
26150
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
26151
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
26152
+ --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
26153
+ --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
26154
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
26155
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
26024
26156
  display: inline-flex;
26025
26157
  flex-direction: column;
26026
26158
  height: 100%;
@@ -26283,6 +26415,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26283
26415
  text-decoration-line: none;
26284
26416
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
26285
26417
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
26418
+ transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
26286
26419
  }
26287
26420
  .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
26288
26421
  --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -26595,6 +26728,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26595
26728
  }
26596
26729
  }
26597
26730
 
26731
+ @media (prefers-reduced-motion: no-preference) {
26732
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
26733
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
26734
+ content: revert;
26735
+ }
26736
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
26737
+ position: absolute;
26738
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
26739
+ inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
26740
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
26741
+ width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
26742
+ height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
26743
+ content: "";
26744
+ border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
26745
+ border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
26746
+ border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
26747
+ transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
26748
+ transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
26749
+ transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
26750
+ }
26751
+ .pf-v6-c-tabs.pf-m-initializing-accent {
26752
+ --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
26753
+ }
26754
+ }
26598
26755
  .pf-v6-c-text-input-group {
26599
26756
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
26600
26757
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
@@ -29206,6 +29363,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29206
29363
  align-items: baseline;
29207
29364
  min-width: var(--pf-v6-c-truncate--MinWidth);
29208
29365
  }
29366
+ .pf-v6-c-truncate.pf-m-fixed {
29367
+ display: inline;
29368
+ align-items: revert;
29369
+ min-width: revert;
29370
+ }
29209
29371
 
29210
29372
  .pf-v6-c-truncate__start,
29211
29373
  .pf-v6-c-truncate__end {