Getting started

Install

pnpm

sh pnpm add surface-elements

npm

sh npm install surface-elements

yarn

sh yarn add surface-elements

The package is ESM only and has no dependencies.

Entry points

Import	Contains
surface-elements	Everything below.
surface-elements/accordion	The <surface-accordion> element. Registers itself on import.
surface-elements/accordion.css	The accordion styles for CSS-only use.
surface-elements/drawer	The <surface-drawer> element. Registers itself on import.
surface-elements/drawer.css	The drawer styles for CSS-only use.
surface-elements/dialog	Dialog enhancement functions.
surface-elements/scroll-lock	The ref-counted page scroll lock.
surface-elements/header	The <surface-header> element. Registers itself on import.
surface-elements/header.css	The header styles for CSS-only use.

Importing an element module defines the element once. Importing it twice, or alongside the root entry, is safe.

Your first drawer

import "surface-elements/drawer"

<button commandfor="cart" command="show-modal">Cart</button>

<surface-drawer>
  <dialog
    id="cart"
    closedby="any"
    aria-labelledby="cart-title"
  >
    <h2 id="cart-title">Cart</h2>
    <button commandfor="cart" command="close">Close</button>
  </dialog>
</surface-drawer>

The button opens the dialog through invoker commands. The web component adds the styles, the animated close and the scroll lock. Read Browser support before you ship to older browsers.

DrawerThe three ways to use it, with live demos.

Dialog functionsEnhance any dialog without the web component.