Details and Dialog

Spruce CSS styles the native disclosure (details) and modal (dialog) elements. They are accessible and keyboard friendly out of the box, so you need little or no JavaScript.

<details>
    <summary>What is Spruce CSS?</summary>
    <p>A Sass-based, minimalistic CSS framework…</p>
</details>

• The marker is replaced with a chevron (a mask of the select form icon), which rotates when open and follows the text color.
• Every direct child after the summary gets the same inline padding.
• Consecutive details elements get a small gap.

Give the elements the same name attribute, and only one of them can be open at a time (supported in every modern browser):

<details name="faq">…</details>
<details name="faq">…</details>

@use 'sprucecss/scss/spruce' with (
  $details: (
    'border-radius': map.get($display, 'border-radius-sm'),
    'border-width': 1px,
    'gap': map.get($spacers, 'xs'),
    'icon-size': 1em,
    'padding': map.get($spacers, 's'),
    'summary-font-weight': 600,
  ),
);

<button class="btn btn--primary" type="button" data-open="confirm-dialog">Open dialog</button>

<dialog id="confirm-dialog" aria-labelledby="confirm-dialog-title">
    <h2 id="confirm-dialog-title">Delete project?</h2>
    <p>This action can’t be undone.</p>
    <form method="dialog">
        <button class="btn btn--danger" value="delete">Delete</button>
        <button class="btn btn--ghost-secondary" value="cancel">Cancel</button>
    </form>
</dialog>

document.querySelector('[data-open="confirm-dialog"]').addEventListener('click', () => {
  document.getElementById('confirm-dialog').showModal();
});

• Open it with showModal(): the browser traps the focus, closes it with Esc, makes the page inert and returns the focus to the opener.
• A form method="dialog" closes the dialog on submit, and dialog.returnValue tells you which button was pressed.
• The ::backdrop uses the overlay color and the optional backdrop-filter.
• Label the dialog with its heading (aria-labelledby).

@use 'sprucecss/scss/spruce' with (
  $dialog: (
    'backdrop-filter': none, // like blur(4px)
    'border-radius': map.get($display, 'border-radius-lg'),
    'border-width': 1px,
    'inline-size': 40rem,
    'padding': map.get($spacers, 'm'),
  ),
);

Need a side panel instead? See the Drawer component, built on the same element.

Both are generated by generate-styles. To use them with a custom selector (for example, only with a class), turn off the generator and include the mixin yourself:

@use 'sprucecss/scss/spruce' as *;

@include generate-details('.accordion');
@include generate-dialog('.modal');