@patternfly/patternfly 6.3.0-prerelease.32 → 6.3.0-prerelease.33

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 (10) hide show
  1. package/components/ExpandableSection/expandable-section.css +18 -0
  2. package/components/ExpandableSection/expandable-section.scss +28 -1
  3. package/components/_index.css +18 -0
  4. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  5. package/docs/components/ExpandableSection/examples/ExpandableSection.md +11 -6
  6. package/package.json +2 -2
  7. package/patternfly-no-globals.css +18 -0
  8. package/patternfly.css +18 -0
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -19,6 +19,8 @@
19
19
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
20
20
  --pf-v6-c-expandable-section__content--Opacity: 0;
21
21
  --pf-v6-c-expandable-section__content--TranslateY: 0;
22
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
23
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
22
24
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
23
25
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
24
26
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
@@ -42,6 +44,8 @@
42
44
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
43
45
  --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
44
46
  --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
47
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
48
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
45
49
  }
46
50
  }
47
51
 
@@ -66,6 +70,20 @@
66
70
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
67
71
  gap: var(--pf-v6-c-expandable-section--Gap);
68
72
  }
73
+ .pf-v6-c-expandable-section.pf-m-expand-top {
74
+ --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
75
+ }
76
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child):not(.pf-m-expand-top, .pf-m-expand-bottom) {
77
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
78
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: 0s;
79
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: 0s;
80
+ }
81
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-top:not(.pf-m-expanded) {
82
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-top__content--TranslateY);
83
+ }
84
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-bottom:not(.pf-m-expanded) {
85
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY);
86
+ }
69
87
  .pf-v6-c-expandable-section.pf-m-limit-width {
70
88
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
71
89
  }
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -23,6 +23,8 @@
23
23
  --#{$expandable-section}__content--TransitionDelay--hide: var(--#{$expandable-section}__content--TransitionDuration--fade);
24
24
  --#{$expandable-section}__content--Opacity: 0;
25
25
  --#{$expandable-section}__content--TranslateY: 0;
26
+ --#{$expandable-section}--m-expand-top__content--TranslateY: 0;
27
+ --#{$expandable-section}--m-expand-bottom__content--TranslateY: 0;
26
28
  --#{$expandable-section}--m-expanded__content--Opacity: 1;
27
29
  --#{$expandable-section}--m-expanded__content--TranslateY: 0;
28
30
 
@@ -30,6 +32,8 @@
30
32
  --#{$expandable-section}__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
31
33
  --#{$expandable-section}__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
32
34
  --#{$expandable-section}__content--TranslateY: -.5rem;
35
+ --#{$expandable-section}--m-expand-top__content--TranslateY: .5rem;
36
+ --#{$expandable-section}--m-expand-bottom__content--TranslateY: -.5rem;
33
37
  }
34
38
 
35
39
  // Content
@@ -81,6 +85,29 @@
81
85
  gap: var(--pf-v6-c-expandable-section--Gap);
82
86
  }
83
87
 
88
+ &.pf-m-expand-top {
89
+ --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}__toggle-icon--m-expand-top--Rotate);
90
+ }
91
+
92
+ // The following selector is for ensuring we target only detached expandable section contents without introducing a breaking change
93
+ // (since typically both toggle and content would both be in the expandable section wrapper)
94
+ // In a breaking change we could update this to utilize the pf-m-detached class
95
+ &:has(.#{$expandable-section}__content:only-child) {
96
+ &:not(.pf-m-expand-top, .pf-m-expand-bottom) {
97
+ --#{$expandable-section}__content--TranslateY: 0;
98
+ --#{$expandable-section}__content--TransitionDuration--expand--fade: 0s;
99
+ --#{$expandable-section}__content--TransitionDuration--collapse--fade: 0s;
100
+ }
101
+
102
+ &.pf-m-expand-top:not(.pf-m-expanded) {
103
+ --#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expand-top__content--TranslateY);
104
+ }
105
+
106
+ &.pf-m-expand-bottom:not(.pf-m-expanded) {
107
+ --#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expand-bottom__content--TranslateY);
108
+ }
109
+ }
110
+
84
111
  &.pf-m-limit-width {
85
112
  --#{$expandable-section}__content--MaxWidth: var(--#{$expandable-section}--m-limit-width__content--MaxWidth);
86
113
  }
@@ -122,7 +149,7 @@
122
149
  transition: var(--#{$expandable-section}__toggle-icon--Transition); // TODO remove shorthand in breaking change
123
150
  transform: rotate(var(--#{$expandable-section}__toggle-icon--Rotate));
124
151
 
125
- &.pf-m-expand-top {
152
+ &.pf-m-expand-top { // TODO: Remove this block in breaking change in favor of using modifier on outer expandable section wrapper
126
153
  --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}__toggle-icon--m-expand-top--Rotate);
127
154
  }
128
155
  }
package/components/_index.css CHANGED
@@ -6581,6 +6581,8 @@ ul) {
6581
6581
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
6582
6582
  --pf-v6-c-expandable-section__content--Opacity: 0;
6583
6583
  --pf-v6-c-expandable-section__content--TranslateY: 0;
6584
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
6585
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
6584
6586
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
6585
6587
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
6586
6588
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
@@ -6604,6 +6606,8 @@ ul) {
6604
6606
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
6605
6607
  --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
6606
6608
  --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
6609
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
6610
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
6607
6611
  }
6608
6612
  }
6609
6613
 
@@ -6628,6 +6632,20 @@ ul) {
6628
6632
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
6629
6633
  gap: var(--pf-v6-c-expandable-section--Gap);
6630
6634
  }
6635
+ .pf-v6-c-expandable-section.pf-m-expand-top {
6636
+ --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
6637
+ }
6638
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child):not(.pf-m-expand-top, .pf-m-expand-bottom) {
6639
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
6640
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: 0s;
6641
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: 0s;
6642
+ }
6643
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-top:not(.pf-m-expanded) {
6644
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-top__content--TranslateY);
6645
+ }
6646
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-bottom:not(.pf-m-expanded) {
6647
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY);
6648
+ }
6631
6649
  .pf-v6-c-expandable-section.pf-m-limit-width {
6632
6650
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
6633
6651
  }
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -83,7 +83,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
83
83
  kind: HelmChartRepository
84
84
  metadata:
85
85
  name: azure-sample-repo<div
86
- class="pf-v6-c-expandable-section"
86
+ class="pf-v6-c-expandable-section pf-m-detached"
87
87
  ><div
88
88
  class="pf-v6-c-expandable-section__content"
89
89
  hidden
@@ -95,7 +95,7 @@ name: azure-sample-repo<div
95
95
  </div>
96
96
  </code>
97
97
  </pre>
98
- <div class="pf-v6-c-expandable-section">
98
+ <div class="pf-v6-c-expandable-section pf-m-detached">
99
99
  <div class="pf-v6-c-expandable-section__toggle">
100
100
  <button
101
101
  class="pf-v6-c-button pf-m-link"
@@ -153,7 +153,7 @@ name: azure-sample-repo<div
153
153
  kind: HelmChartRepository
154
154
  metadata:
155
155
  name: azure-sample-repo<div
156
- class="pf-v6-c-expandable-section pf-m-expanded"
156
+ class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached"
157
157
  ><div
158
158
  class="pf-v6-c-expandable-section__content"
159
159
  id="code-block-expandable-expanded-content"
@@ -164,7 +164,7 @@ name: azure-sample-repo<div
164
164
  </div>
165
165
  </code>
166
166
  </pre>
167
- <div class="pf-v6-c-expandable-section pf-m-expanded">
167
+ <div class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached">
168
168
  <div class="pf-v6-c-expandable-section__toggle">
169
169
  <button
170
170
  class="pf-v6-c-button pf-m-link"
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -141,7 +141,9 @@ cssPrefix: pf-v6-c-expandable-section
141
141
  ```html
142
142
  <div class="pf-v6-l-stack pf-m-gutter">
143
143
  <div class="pf-v6-l-stack__item">
144
- <div class="pf-v6-c-expandable-section pf-m-expanded">
144
+ <div
145
+ class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached pf-m-expand-top"
146
+ >
145
147
  <div
146
148
  class="pf-v6-c-expandable-section__content"
147
149
  id="detached-toggle-content"
@@ -150,7 +152,9 @@ cssPrefix: pf-v6-c-expandable-section
150
152
  </div>
151
153
 
152
154
  <div class="pf-v6-l-stack__item">
153
- <div class="pf-v6-c-expandable-section pf-m-expanded">
155
+ <div
156
+ class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached pf-m-expand-top"
157
+ >
154
158
  <div class="pf-v6-c-expandable-section__toggle">
155
159
  <button
156
160
  class="pf-v6-c-button pf-m-link"
@@ -159,9 +163,7 @@ cssPrefix: pf-v6-c-expandable-section
159
163
  aria-controls="detached-toggle-content"
160
164
  >
161
165
  <span class="pf-v6-c-button__icon pf-m-start">
162
- <span
163
- class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
164
- >
166
+ <span class="pf-v6-c-expandable-section__toggle-icon">
165
167
  <i class="fas fa-angle-right" aria-hidden="true"></i>
166
168
  </span>
167
169
  </span>
@@ -232,8 +234,11 @@ cssPrefix: pf-v6-c-expandable-section
232
234
  | `.pf-v6-c-expandable-section__toggle-icon` | `<span>` | Initiates the expandable toggle icon. **Required** |
233
235
  | `.pf-v6-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
234
236
  | `.pf-m-expanded` | `.pf-v6-c-expandable-section` | Modifies the component for the expanded state. |
237
+ | `.pf-m-detached` | `.pf-v6-c-expandable-section` | Modifies the component for a detached variant. |
238
+ | `.pf-m-expand-top` | `.pf-v6-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. We recommend the new method of applying this class directly to the `.pf-v6-c-expandable-section` wrapper element. |
239
+ | `.pf-m-expand-top` | `.pf-v6-c-expandable-section.pf-m-detached` | Modifies the expandable animation and icon rotation directions for detached expandable sections. **Required** when the content is above the toggle. |
240
+ | `.pf-m-expand-bottom` | `.pf-v6-c-expandable-section.pf-m-detached` | Modifies the expandable animation direction for detached expandable sections. **Required** when the content is below the toggle. |
235
241
  | `.pf-m-display-lg` | `.pf-v6-c-expandable-section` | Modifies the styling of the component to have large display styling. |
236
242
  | `.pf-m-indented` | `.pf-v6-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
237
243
  | `.pf-m-truncate` | `.pf-v6-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded. |
238
- | `.pf-m-expand-top` | `.pf-v6-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. |
239
244
  | `--pf-v6-c-expandable-section--m-truncate__content--LineClamp` | `.pf-v6-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating. |
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.32",
4
+ "version": "6.3.0-prerelease.33",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,7 +47,7 @@
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.10.24",
50
+ "@patternfly/documentation-framework": "6.10.31",
51
51
  "@patternfly/patternfly-a11y": "5.1.0",
52
52
  "@patternfly/react-code-editor": "6.2.2",
53
53
  "@patternfly/react-core": "6.2.2",
package/patternfly-no-globals.css CHANGED
@@ -14077,6 +14077,8 @@ ul) {
14077
14077
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
14078
14078
  --pf-v6-c-expandable-section__content--Opacity: 0;
14079
14079
  --pf-v6-c-expandable-section__content--TranslateY: 0;
14080
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
14081
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
14080
14082
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
14081
14083
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
14082
14084
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
@@ -14100,6 +14102,8 @@ ul) {
14100
14102
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
14101
14103
  --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
14102
14104
  --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
14105
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
14106
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
14103
14107
  }
14104
14108
  }
14105
14109
 
@@ -14124,6 +14128,20 @@ ul) {
14124
14128
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
14125
14129
  gap: var(--pf-v6-c-expandable-section--Gap);
14126
14130
  }
14131
+ .pf-v6-c-expandable-section.pf-m-expand-top {
14132
+ --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
14133
+ }
14134
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child):not(.pf-m-expand-top, .pf-m-expand-bottom) {
14135
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
14136
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: 0s;
14137
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: 0s;
14138
+ }
14139
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-top:not(.pf-m-expanded) {
14140
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-top__content--TranslateY);
14141
+ }
14142
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-bottom:not(.pf-m-expanded) {
14143
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY);
14144
+ }
14127
14145
  .pf-v6-c-expandable-section.pf-m-limit-width {
14128
14146
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
14129
14147
  }
package/patternfly.css CHANGED
@@ -14213,6 +14213,8 @@ ul) {
14213
14213
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
14214
14214
  --pf-v6-c-expandable-section__content--Opacity: 0;
14215
14215
  --pf-v6-c-expandable-section__content--TranslateY: 0;
14216
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
14217
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
14216
14218
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
14217
14219
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
14218
14220
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
@@ -14236,6 +14238,8 @@ ul) {
14236
14238
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
14237
14239
  --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
14238
14240
  --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
14241
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
14242
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
14239
14243
  }
14240
14244
  }
14241
14245
 
@@ -14260,6 +14264,20 @@ ul) {
14260
14264
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
14261
14265
  gap: var(--pf-v6-c-expandable-section--Gap);
14262
14266
  }
14267
+ .pf-v6-c-expandable-section.pf-m-expand-top {
14268
+ --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
14269
+ }
14270
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child):not(.pf-m-expand-top, .pf-m-expand-bottom) {
14271
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
14272
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: 0s;
14273
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: 0s;
14274
+ }
14275
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-top:not(.pf-m-expanded) {
14276
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-top__content--TranslateY);
14277
+ }
14278
+ .pf-v6-c-expandable-section:has(.pf-v6-c-expandable-section__content:only-child).pf-m-expand-bottom:not(.pf-m-expanded) {
14279
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY);
14280
+ }
14263
14281
  .pf-v6-c-expandable-section.pf-m-limit-width {
14264
14282
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
14265
14283
  }