@joewinke/jatui 0.2.10 → 0.2.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.
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
/**
|
|
3
3
|
* Collapse — batteries-included tall-content collapser.
|
|
4
4
|
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
5
|
+
* Caps tall content at `threshold` px with a fade-out mask so it shows a
|
|
6
|
+
* preview instead of overflowing; the toggle clamp is instant (no
|
|
7
|
+
* layout-property animation, matching the `use:collapse` action). The toggle
|
|
8
|
+
* self-hides when content is shorter than the threshold
|
|
9
|
+
* (ResizeObserver-backed measurement).
|
|
8
10
|
*
|
|
9
11
|
* <Collapse>
|
|
10
12
|
* {@html renderedMarkdown}
|
|
@@ -86,27 +88,26 @@
|
|
|
86
88
|
|
|
87
89
|
<style>
|
|
88
90
|
/*
|
|
89
|
-
*
|
|
90
|
-
*
|
|
91
|
-
*
|
|
92
|
-
*
|
|
93
|
-
*
|
|
91
|
+
* Preview collapse: closed caps the visible area at the threshold with a
|
|
92
|
+
* fade-out mask; open removes the cap. This is a PREVIEW collapser — closed
|
|
93
|
+
* must show the first `threshold` px, NOT zero. The original implementation
|
|
94
|
+
* animated grid-template-rows 0fr↔1fr, but 0fr (with the inner's
|
|
95
|
+
* min-height:0) clamps the row to ZERO height — max-height never got a say,
|
|
96
|
+
* so every collapsed body rendered empty with only the "Show more" toggle
|
|
97
|
+
* visible (mos-7i3ni). The toggle is now an instant clamp, matching the
|
|
98
|
+
* `use:collapse` action's behavior (no layout-property animation).
|
|
94
99
|
*/
|
|
95
100
|
.jatui-collapse-outer {
|
|
96
|
-
display: grid;
|
|
97
|
-
grid-template-rows: 1fr;
|
|
98
|
-
transition: grid-template-rows var(--motion-enter) var(--motion-glide);
|
|
99
101
|
overflow: hidden;
|
|
100
102
|
position: relative;
|
|
101
103
|
}
|
|
102
104
|
|
|
103
105
|
.jatui-collapse-outer-closed {
|
|
104
|
-
|
|
106
|
+
/* Cap visible area at threshold */
|
|
107
|
+
max-height: var(--collapse-threshold);
|
|
105
108
|
/* Fade gradient masks the bottom edge when collapsed */
|
|
106
109
|
-webkit-mask-image: var(--collapse-gradient);
|
|
107
110
|
mask-image: var(--collapse-gradient);
|
|
108
|
-
/* Cap visible area at threshold */
|
|
109
|
-
max-height: var(--collapse-threshold);
|
|
110
111
|
}
|
|
111
112
|
|
|
112
113
|
/* When open, remove the mask and height cap */
|
|
@@ -116,12 +117,6 @@
|
|
|
116
117
|
mask-image: none;
|
|
117
118
|
}
|
|
118
119
|
|
|
119
|
-
.jatui-collapse-inner {
|
|
120
|
-
/* Required for grid 0fr to clamp to zero */
|
|
121
|
-
min-height: 0;
|
|
122
|
-
overflow: hidden;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
120
|
.jatui-collapse-toggle {
|
|
126
121
|
display: block;
|
|
127
122
|
margin-top: 4px;
|
|
@@ -138,10 +133,4 @@
|
|
|
138
133
|
opacity: 1;
|
|
139
134
|
text-decoration: underline;
|
|
140
135
|
}
|
|
141
|
-
|
|
142
|
-
@media (prefers-reduced-motion: reduce) {
|
|
143
|
-
.jatui-collapse-outer {
|
|
144
|
-
transition: none;
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
136
|
</style>
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Collapse — batteries-included tall-content collapser.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
4
|
+
* Caps tall content at `threshold` px with a fade-out mask so it shows a
|
|
5
|
+
* preview instead of overflowing; the toggle clamp is instant (no
|
|
6
|
+
* layout-property animation, matching the `use:collapse` action). The toggle
|
|
7
|
+
* self-hides when content is shorter than the threshold
|
|
8
|
+
* (ResizeObserver-backed measurement).
|
|
7
9
|
*
|
|
8
10
|
* <Collapse>
|
|
9
11
|
* {@html renderedMarkdown}
|