Repository navigation
Cart drawer: the cart slides in as a modal dialog with a close button, an overlay and growing textareas; drawer-core.mjs with node tests (#140) - #149
Merged
Conversation
…wer, with its node suite (#140) Pure functions, no DOM: transition(state, event) for add, badge, close, escape and overlay gives the next open state and the focus target (the close button on open, the Cart button on close, none when nothing changes); tabTarget wraps Tab and Shift+Tab inside the drawer. The cart suite gains a case for a multi-line justification and note: they arrive in the issue URL unchanged and the byte count includes every line end. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…ose button, an overlay and growing textareas (#140) cart.html is the dialog (role dialog, aria-modal, labelled by its heading, a close button at the top right) with one overlay behind it, both hidden until cart.mjs opens them: on an added change and on the Cart button; the close button, Escape and the overlay close it. The focus moves to the close button on open and back to the Cart button on close, Tab wraps inside, and body gets the is-open class (the page behind does not scroll). Escape while a cell's popover is open closes the popover first. The justification and the note are textareas that grow (field-sizing, with a script fallback); typing updates the cart and the size without drawing the list again. The drawer is 24rem wide below the header and the full width below 768 px; closed it takes no room. drawer-core.mjs is published next to cart-core.mjs without a script tag. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…e real build, the template counts (#140) The Site suite, the Hugo stand-in and the CI publish-action check list js/drawer-core.mjs; the real-Hugo case asserts the dialog, the close button, the overlay, the note textarea, one module script tag and the 24rem width and field-sizing in site.css. The staged file count of the Publish action suite becomes 669, and template/ has 97 files with 31 in site/ (template-content.md, README.md, CONTRIBUTING.md). Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…xtareas and drawer-core.mjs (#140) docs/dashboard.md: the site tree and the fixed asset paths gain drawer-core.mjs, the shell gets a "Cart drawer" part (markup, open and close, focus and Tab, Escape order with the popover, is-open, width and overlay, textareas, line ends in the issue URL), --scrim joins the tokens and the Cart row of the views table says drawer. The user page, section 3, describes the drawer and the multi-line fields; section 5 lists --scrim and the overlay among what the cart needs. CONTRIBUTING names drawer-core.test.mjs; the release notes line under v1.0.0-beta.8. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…he menu, focus to main when the Cart button is hidden (#140) cart.mjs: a list drawn again (Remove, an axis checkbox) that took the focused element puts the focus on the close button; Escape with the menu below 768 px open (or during an input method composition) is left to it, like the popover; closing after Clear hid the Cart button on a page without cells focuses main#content; the textarea fallback grows again on resize. site.css: print lets an open drawer's page scroll. The Site test asserts the drawer's width, top and field-sizing one by one; the cart-core comment says the CRLF note is synthetic input; testing.md names drawer-core.test.mjs; CONTRIBUTING says six assets; docs/dashboard.md the new focus and Escape cases. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
5 tasks
This was referenced Oct 29, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #140
The cart becomes an off-canvas drawer:
partials/cart.htmlis a modal dialog (role="dialog",aria-modal, labelled by its heading) with a close button and one overlay, both hidden untilcart.mjsopens them.<body>has the classis-open(the body data attributes are unchanged) and the page behind does not scroll. The overlay leaves the header reachable by mouse on purpose: the Cart button toggles the drawer, andaria-modaland the Tab trap still hold.main#content.drawer-core.mjs: a new pure module with the state machine (transitionfor add, badge, close, escape and overlay, plus the focus target) and the Tab wrap (tabTarget).tests/site/drawer-core.test.mjscovers it.cart-core.mjsis untouched.field-sizing: content, with a script fallback that also runs on resize). Typing updates the cart and the byte count without redrawing the list. A multi-line justification arrives in the issue unchanged (\nin the JSON,%0Ain the note), and a new cart-core case checks the URL and the byte count.--scrimtoken colours the overlay.js/drawer-core.mjsis published next tojs/cart-core.mjs, without a script tag. It is added to the Site suite, the Hugo stub, the CI publish-action check, the Publish.Action staged count (669) and the template counts (97 files, 31 insite/).docs/dashboard.md(the cart drawer in the shell section),template/docs/dashboard.mdsections 3 and 5,docs/reference/testing.md,CONTRIBUTING.md, and the release notes.Tests: Pester Rulebook.Site 55, Rulebook.Deploy 76, Publish.Action 52, Rulebook.Template 77 and Docs 340, all passed, with the real-Hugo case run.
node --test tests/site/*.test.mjspassed 35 of 35. A throwaway Playwright run against the fixture build passed 36 of 36 checks: open and close paths, focus, the Tab trap, textarea growth with and without field-sizing, multi-line text in the issue URL, the byte meter, the Escape order, full width at 390 px, both colour modes, no JavaScript, no outside requests and no page errors. A review pass checked focus after Remove and after an axis checkbox, Escape with the menu open, and focus after Clear on a level page. The screenshots and the deviations are on #140.Review: Sonnet round 1 found no must-fix. S1 to S4 and the nits are applied, except
scrollbar-gutter: stable. With classic scrollbars it left a 15 px empty strip beside the drawer and the header, so the scrollbar shift stays (it happens under the overlay).🤖 Generated with Claude Code