Feature - Add slide-over panel as a usage pattern of `huxDialog` by Copilot · Pull Request #47 · markmead/hyperux

Copilot · 2026-05-23T11:34:13Z

This pull request improves the visual presentation and documentation of demo components and pattern pages. The main focus is on standardizing the layout of demo sections, introducing a new slide-over panel demo for dialogs, and refining the CSS grid breakout system for better alignment and spacing.

Component and Layout Standardization:

All demo component containers now use the prose-demo not-prose class to ensure consistent styling and prevent prose formatting from affecting demo layouts. This change was applied to Combobox.astro, CommandPalette.astro, CopyToClipboard.astro, Dialog.astro, Dropdown.astro, InlineEditor.astro, Resizable.astro, ScrollSpy.astro, and Tabs.astro. [1] [2] [3] [4] [5] [6] [7] [8] [9]
The CSS for .prose-breakout was updated to ensure .prose-demo blocks span the full grid width, with improved vertical spacing between demos and other content.

Documentation Enhancements:

On all pattern documentation pages, the <Demo /> component is now placed inside the main prose container for better alignment and consistency. [1] [2] [3] [4] [5] [6] [7] [8]

Dialog Pattern Improvements:

The dialog pattern documentation now includes a new "Slide-over Panel" section, demonstrating how to use huxDialog for slide-over panels (drawers) with a dedicated demo and example code. Related search terms were also added. [1] [2] [3]

New Demo Component:

Added SlideOver.astro, a comprehensive slide-over panel demo, to showcase advanced dialog usage and transitions.

These changes collectively make the demos more visually distinct, improve the clarity of documentation, and provide a better developer experience for users exploring the pattern library.

Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/575501ea-c822-4bce-a5d3-ac7794ad131d Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>

cloudflare-workers-and-pages · 2026-05-23T11:41:03Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	hyperux	`07c7566`	Commit Preview URL Branch Preview URL	May 26 2026, 08:58 AM

markmead · 2026-05-23T13:26:46Z

@copilot Is a dedicated pattern needed, or could we use huxDialog with some CSS to replicate it?

Copilot · 2026-05-23T13:27:51Z

@copilot Is a dedicated pattern needed, or could we use huxDialog with some CSS to replicate it?

Looking at the implementation, huxSlideOver's logic is structurally identical to huxDialog — the slide animation and edge positioning all come from CSS transition/position classes in the markup, not from the component itself. The placement property is just reactive state that markup reads to apply the right classes.

So yes, huxDialog + CSS can replicate it. The dedicated component only adds:

A named API (openSlideOver, closeSlideOver, etc.) for semantic clarity
A separate event namespace (hux-slide-over:* vs hux-dialog:*)

If you'd prefer to keep the footprint smaller and document slide-over as a usage pattern of huxDialog (similar to how Command Palette extends Dialog), I can revert the dedicated component and instead add a slide-over example to the Dialog docs. Happy to go either direction — let me know your preference.

markmead · 2026-05-23T18:16:14Z

@copilot Yes – instead of adding a new pattern, please add a demo (with documentation) to the existing huxDialog page.

…e pattern Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/65d9145e-0fa9-4cb3-a8e2-566aabe40e9a Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>

Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/65d9145e-0fa9-4cb3-a8e2-566aabe40e9a Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>

Copilot · 2026-05-23T18:21:16Z

@copilot Yes – instead of adding a new pattern, please add a demo (with documentation) to the existing huxDialog page.

Done in 5046f1d.

Removed the huxSlideOver component registration entirely from PatternRegistration.astro
Deleted slide-over.mdx
Rewrote SlideOver.astro to use huxDialog (swapped openSlideOver/closeSlideOver/slideOverTitleId for the standard huxDialog API)
Added a Slide-over Panel subsection under Common Usage Patterns in dialog.mdx, with the live demo and a code snippet showing how CSS x-transition classes achieve the slide animation

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

telemetry.astro.build
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/.npm/_npx/aa98e6899c6baff3/node_modules/.bin/astro build (dns block)
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node node_modules/.bin/astro build (dns block)
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node node_modules/.bin/astro check (dns block)
workers.cloudflare.com
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node node_modules/.bin/astro build (dns block)
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node node_modules/.bin/astro check (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Copilot

Pull request overview

This PR folds the “slide-over panel” experience into the existing huxDialog pattern by documenting it as a usage pattern (CSS-driven transitions/positioning) rather than maintaining a dedicated huxSlideOver Alpine component.

Changes:

Removes the dedicated huxSlideOver registration and updates the demo to use the standard huxDialog API.
Adds a new SlideOver demo component and embeds it into the huxDialog documentation.
Deletes the standalone slide-over pattern page and expands dialog search terms to include slide-over-related keywords.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
`src/components/PatternRegistration.astro`	Removes the `huxSlideOver` Alpine data registration in favor of using `huxDialog` directly.
`src/components/demos/SlideOver.astro`	Adds a slide-over demo implemented with `huxDialog` + CSS `x-transition` classes.
`src/content/patterns/dialog.mdx`	Documents slide-over as a `huxDialog` usage pattern, adds demo/snippet, and updates terms/modDate.
`src/content/patterns/slide-over.mdx`	Deleted (slide-over now documented under `dialog`).

markmead · 2026-05-24T07:48:42Z

@copilot Address the feedback.

…ption Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/9ef8feba-a5f9-4edb-80f0-e3a3d8f7e589 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>

Copilot · 2026-05-24T07:49:54Z

@copilot Address the feedback.

Fixed in d65e167 — changed x-show="isOpen" to x-show="showBackdrop" on the backdrop element in both SlideOver.astro and the code snippet in dialog.mdx, so isSeamless: true correctly hides the backdrop for this pattern.

Apply a new .prose-demo helper to demo wrapper components so they break out of the prose grid; update global.css to set grid-column behavior for demos and pre elements and add top/bottom spacing between demos. Also tidy up SlideOver/Dialog markup (formatting of attributes and closing tags) and reposition the <Demo /> include in the dialog pattern for correct rendering. These changes enable full-width demo panels and improve markup consistency.

Relocate the <Demo /> component into the prose container for several pattern docs to ensure consistent layout, styling, and spacing of demo previews. Updated files: combobox.mdx, command-palette.mdx, copy-to-clipboard.mdx, dropdown.mdx, inline-editor.mdx, resizable.mdx, scroll-spy.mdx, tabs.mdx.

Add the not-prose class to demo wrapper divs so Tailwind Typography (prose) styles don't affect the demo components (Combobox, CommandPalette, CopyToClipboard, Dialog, Dropdown, InlineEditor, Resizable, ScrollSpy, SlideOver, Tabs). Update global.css selector to apply the grid-column rule only to direct children that are not .prose-demo or pre, preventing layout rules from affecting demo containers. Also adjust SlideOver wrapper formatting.

Copilot

Pull request overview

Copilot reviewed 20 out of 20 changed files in this pull request and generated 1 comment.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 20 out of 20 changed files in this pull request and generated 2 comments.

markmead · 2026-05-26T08:51:18Z

@copilot Address the changes – review the other huxDialog demo and make sure these issues aren't present there.

Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/ef33017a-e827-4f06-b1eb-57fb51cfeddc Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>

Copilot · 2026-05-26T08:59:14Z

@copilot Address the changes – review the other huxDialog demo and make sure these issues aren't present there.

Addressed in 07c7566.

I updated the slide-over backdrop to follow the same huxDialog pattern as the main dialog demo: it now uses x-if="showBackdrop" with x-show="isOpen" so transitions run correctly while still honoring seamless mode. I also updated the dialog.mdx slide-over snippet to match and verified the existing Dialog.astro demo already follows this pattern.

Screenshot: /tmp/playwright-logs/slide-over-fix.png

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

fonts.google.com
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/../astro/bin/astro.mjs build (dns block)
sparrow.cloudflare.com
- Triggering command: /opt/hostedtoolcache/node/24.15.0/x64/bin/node /opt/hostedtoolcache/node/24.15.0/x64/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/hyperux/hyperux/node_modules/.pnpm/wrangler@4.93.1/node_modules/wrangler/wrangler-dist/cli.js types (dns block)
telemetry.astro.build
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/../astro/bin/astro.mjs build (dns block)
workers.cloudflare.com
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/../astro/bin/astro.mjs check (dns block)
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/../astro/bin/astro.mjs build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Initial plan

e06d5f7

Copilot AI assigned Copilot and markmead May 23, 2026

Copilot started work on behalf of markmead May 23, 2026 11:34 View session

Copilot AI linked an issue May 23, 2026 that may be closed by this pull request

Create "Slide-over" pattern/component using Dialog #46

Open

feat: add huxSlideOver component with demo and documentation

cae5be4

Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/575501ea-c822-4bce-a5d3-ac7794ad131d Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add slide-over component using Dialog pattern~~ Feature - Add Slide-over pattern built on Dialog May 23, 2026

Copilot finished work on behalf of markmead May 23, 2026 11:41

Copilot AI requested a review from markmead May 23, 2026 11:41

Merge branch 'main' into copilot/add-slide-over-component

159c76f

Copilot started work on behalf of markmead May 23, 2026 13:26 View session

Copilot finished work on behalf of markmead May 23, 2026 13:28

markmead changed the title ~~Feature - Add Slide-over pattern built on Dialog~~ Feature - Implement huxSlideOver pattern based on huxDialog May 23, 2026

Copilot started work on behalf of markmead May 23, 2026 18:16 View session

Copilot AI and others added 2 commits May 23, 2026 18:20

feat: remove huxSlideOver component; add slide-over as huxDialog usag…

445eb6a

…e pattern Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/65d9145e-0fa9-4cb3-a8e2-566aabe40e9a Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>

chore: remove accidentally committed package-lock.json

5046f1d

Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/65d9145e-0fa9-4cb3-a8e2-566aabe40e9a Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>

Copilot AI changed the title ~~Feature - Implement huxSlideOver pattern based on huxDialog~~ Feature - Add slide-over panel as a usage pattern of huxDialog May 23, 2026

Copilot finished work on behalf of markmead May 23, 2026 18:21

markmead marked this pull request as ready for review May 24, 2026 07:45

markmead requested a review from Copilot May 24, 2026 07:45

Copilot started reviewing on behalf of markmead May 24, 2026 07:45 View session

Copilot AI reviewed May 24, 2026

View reviewed changes

Comment thread src/content/patterns/dialog.mdx Outdated

Comment thread src/components/demos/SlideOver.astro Outdated

Merge branch 'main' into copilot/add-slide-over-component

1c07dd8

Copilot started work on behalf of markmead May 24, 2026 07:48 View session

fix: use showBackdrop for slide-over backdrop to respect isSeamless o…

d65e167

…ption Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/9ef8feba-a5f9-4edb-80f0-e3a3d8f7e589 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>

Copilot finished work on behalf of markmead May 24, 2026 07:50

markmead added 3 commits May 24, 2026 09:22

markmead changed the title ~~Feature - Add slide-over panel as a usage pattern of huxDialog~~ Feature - Add slide-over panel as a usage pattern of huxDialog May 24, 2026

markmead added the enhancement New feature or request label May 24, 2026

markmead approved these changes May 24, 2026

View reviewed changes

markmead requested a review from Copilot May 24, 2026 08:32

Copilot started reviewing on behalf of markmead May 24, 2026 08:32 View session

Copilot AI reviewed May 24, 2026

View reviewed changes

Comment thread src/components/demos/SlideOver.astro Outdated

Potential fix for pull request finding

ee92cd1

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

markmead requested a review from Copilot May 26, 2026 08:41

Copilot started reviewing on behalf of markmead May 26, 2026 08:41 View session

Copilot AI reviewed May 26, 2026

View reviewed changes

Comment thread src/components/demos/SlideOver.astro Outdated

Comment thread src/content/patterns/dialog.mdx Outdated

Copilot started work on behalf of markmead May 26, 2026 08:51 View session

Fix slide-over backdrop transition and docs snippet

07c7566

Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/ef33017a-e827-4f06-b1eb-57fb51cfeddc Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>

Copilot finished work on behalf of markmead May 26, 2026 08:59

Copilot AI requested a review from markmead May 26, 2026 08:59

Copilot started work on behalf of markmead May 26, 2026 09:02 View session

Copilot finished work on behalf of markmead May 26, 2026 09:03

Conversation

Copilot AI commented May 23, 2026 • edited by markmead Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cloudflare-workers-and-pages Bot commented May 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

markmead commented May 23, 2026

Uh oh!

Copilot AI commented May 23, 2026

Uh oh!

markmead commented May 23, 2026

Uh oh!

Copilot AI commented May 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

markmead commented May 24, 2026

Uh oh!

Copilot AI commented May 24, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

markmead commented May 26, 2026

Uh oh!

Copilot AI commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented May 23, 2026 •

edited by markmead

Loading

cloudflare-workers-and-pages Bot commented May 23, 2026 •

edited

Loading

Copilot AI commented May 23, 2026 •

edited

Loading

Copilot AI commented May 26, 2026 •

edited

Loading