Side Dialog

Preview

<button id="open-sd">Open drawer</button>
<esa-side-dialog id="sd" heading="Filters" position="right">
  <p>Drawer body content…</p>
  <button slot="footer">Apply</button>
</esa-side-dialog>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-side-dialog';

@Component({
  selector: 'app-side-dialog-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <button id="open-sd">Open drawer</button>
    <esa-side-dialog id="sd" heading="Filters" position="right">
      <p>Drawer body content…</p>
      <button slot="footer">Apply</button>
    </esa-side-dialog>
  `,
})
export class SideDialogDemo {}

Positions & sizes

Slides from left or right; width via size (sm 320 · md 400 · lg 520).

<esa-side-dialog position="left" size="sm" heading="Left, sm">…</esa-side-dialog>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-side-dialog';

@Component({
  selector: 'app-side-dialog-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-side-dialog position="left" size="sm" heading="Left, sm">…</esa-side-dialog>
  `,
})
export class SideDialogDemo {}

API

Methods

Events

Accessibility

• role="dialog" + aria-modal; labelled by the heading.
• Focus is trapped within the panel; Tab/Shift+Tab cycle, Esc closes, and focus is restored to the trigger on close.
• The backdrop click and the ✕ button both close.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

No other component reads these — re-point them and esa-side-dialog is the only thing that moves.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.