Proposal: Offcanvas component based on the existing modal

[dday9]

I would like to propose an Offcanvas component built on top of Pico's existing modal implementation.

Pico's modal uses the following semantic structure:

<dialog>
  <article>
    <!-- content -->
  </article>
</dialog>

The proposed Offcanvas component preserves that structure while introducing an

element to identify the content as complementary and position it against the edge of the viewport:

<dialog>
  <aside>
    <article>
        <!-- content -->
    </article>
  </aside>
</dialog>

This allows the component to reuse the native behavior and accessibility features of <dialog>, as well as much of Pico's existing modal styling, while presenting the content as a drawer rather than a centered overlay.

• The <dialog> remains responsible for the overlay and native dialog behavior.
• The <aside> establishes the content as complementary to the main page and acts as the positioning container.
• The <article> retains Pico's existing card-like content structure and its support for optional headers and footers.

Three new CSS rules would need to be introduced:

/* override modal centering */
dialog:has(> aside) {
  align-items: flex-start;
  justify-content: flex-start;
}

/**
  * take up the entire viewport height
  * min width is 400px
  * preferred width is 33%
  * max width is entire viewport width
**/
dialog > aside {
  height: 100vh;
  width: clamp(400px, 33%, 100vw);
}

/* override modal content defaults */
dialog > aside > article {
  height: 100%;
  margin-bottom: 0;
  overflow-y: auto;
}

And any existing rule that uses dialog > article would need to be updated to also include dialog > aside > article.

Example:

<dialog>
  <aside>
    <article>
      <header>
        <button aria-label="Close" rel="prev"></button>
        <p>
          <strong>Off Canvas</strong>
        </p>
      </header>
      <p>Hello world.</p>
    </article>
  </aside>
</dialog>

Fiddle: https://jsfiddle.net/mk9tu1xL/

[tonystar]

added to Roadmap of Blades CSS — a fully compatible and actively maintained successor to Pico CSS:

anyblades/blades#136