@justai/cuts 0.71.0 → 0.72.0
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.
- package/package.json +1 -1
- package/src/ActionList.astro +8 -0
- package/src/Sheet.astro +11 -0
package/package.json
CHANGED
package/src/ActionList.astro
CHANGED
|
@@ -45,7 +45,15 @@ const { title, note } = Astro.props;
|
|
|
45
45
|
</div>
|
|
46
46
|
|
|
47
47
|
<style>
|
|
48
|
+
/* queries: two action lists touching · no gap between groups · the second group sits on the first
|
|
49
|
+
THE BREAK IS THE GRAMMAR, so the component owns it.
|
|
50
|
+
A group carried its INTERNAL 7px and nothing between itself and the next one, which left the
|
|
51
|
+
break — the thing that separates "things you might do" from "the door with no way back" — to
|
|
52
|
+
whichever consumer remembered a wrapper. files did in one sheet and not in another, and the
|
|
53
|
+
second one read as one long list with a red row at the end.
|
|
54
|
+
`:last-child` so a lone group adds no trailing space it did not ask for. */
|
|
48
55
|
.jal-group { display: flex; flex-direction: column; gap: 7px; }
|
|
56
|
+
.jal-group + .jal-group { margin-block-start: 22px; }
|
|
49
57
|
/* Inset and grouped: the card is the group, and `overflow: hidden` is what lets a row's own
|
|
50
58
|
background reach the rounded corner instead of squaring it off on press. */
|
|
51
59
|
.jal {
|
package/src/Sheet.astro
CHANGED
|
@@ -186,6 +186,17 @@ const doneLabel = done === false ? null : (done ?? (detent === "large" ? "Done"
|
|
|
186
186
|
Only one page is in the layout at a time, so the body's height is the CURRENT page's — which is
|
|
187
187
|
what makes the sheet grow and shrink around the content the way a navigation stack does. The
|
|
188
188
|
slide is 220ms and is skipped for reduced motion, where the pages simply swap. */
|
|
189
|
+
/* queries: the second sheet page appears BELOW the first · pushing shows both pages · the history
|
|
190
|
+
list is squeezed at the bottom · a page does not hide · consumer css beats the sheet
|
|
191
|
+
HIDING A PAGE IS A MECHANISM, NOT A SUGGESTION, so it is written where a class cannot outrank
|
|
192
|
+
it. `[data-sheet-page] { display: none }` is one attribute — specificity (0,1,0) — and any
|
|
193
|
+
consumer rule naming two classes beats it. files styles its detail page as `.pp .fd { display:
|
|
194
|
+
flex }`, which is ordinary and correct, and it meant the root page NEVER HID: pushing to the
|
|
195
|
+
versions drew them one under the other, so a person who tapped History got a cramped strip at
|
|
196
|
+
the bottom of a sheet still showing everything they had just left.
|
|
197
|
+
Qualified by the dialog it lives in, which raises this to (0,2,1) and keeps the rule honest —
|
|
198
|
+
a page outside a sheet is nobody's business here. */
|
|
199
|
+
:global(dialog [data-sheet-page]:not(.is-current):not(.is-popping)) { display: none; }
|
|
189
200
|
:global([data-sheet-page]) { display: none; }
|
|
190
201
|
:global([data-sheet-page].is-current) { display: block; animation: sheet-push 0.22s var(--ease-out) both; }
|
|
191
202
|
:global([data-sheet-page].is-popping) { display: block; animation: sheet-pop 0.22s var(--ease-out) both; }
|