Overlays

Alert

An inline message that gets announced when it shows up. Put it on the page empty, then fill it in when there's something to say.

Element: <slab-alert>
Built on: [role=alert]
As Markdown: alert.md

Example

Here's a styled version, <slab-styled-alert>. It's not in the package — it's an example of what you can build with the headless element. Copy it and make it yours at the bottom of this page. Switch to "As it ships" to see the same markup with the headless element and no CSS at all. That's your starting point.

Styled example

As it ships

HTML

<button class="styled-button" type="button">
  Simulate a cold snap
</button>

<slab-styled-alert id="alert-example" dismissible></slab-styled-alert>

HTML

<button class="styled-button" type="button">
  Simulate a cold snap
</button>

<slab-alert id="alert-example-as-it-ships" dismissible></slab-alert>

Usage

Install

pnpm add slab-elements lit

HTML

<script type="module">
  import 'slab-elements/alert.js';
</script>

<slab-alert dismissible></slab-alert>

<script type="module">
  document.querySelector('slab-alert').textContent =
    'Error: the file is too large';
</script>

Behavior

An inline alert with no visual styles, around a [role=alert], so its message is announced when it appears.

Screenreaders announce what changes inside an alert, not what an alert already holds when the page loads. So put the alert on the page empty and slot the message in when there's something to say. A message that's in the markup from the start is read like any other text, if it's read at all. Replacing the message later announces the new one.

There's no severity. The old Inline Alert's variant only picked a color and an icon, and a severity is only announced if it's in the message, so put it there: "Error: the file is too large".

Style it through its parts. A dismissed alert is hidden, and stays hidden whatever display you give the host.

Dismissing with the button hides the button, which would drop focus to <body>. So when focus is on the button at the time, the alert returns it to the element that had it before the button did, provided that element is still on the page, outside the alert, and takes focus. Otherwise focus is left where the browser puts it. That includes a click in a browser that doesn't focus buttons on click, like Safari, and a button that was focused with nothing focused before it. Focus isn't moved when the "dismiss" event is canceled, or when a "dismiss" listener has already moved it off the button.

API

`<slab-alert>`

Attributes
Name	Type	Default	Description
`dismissible`	`boolean`	`false`	Adds a button that dismisses the alert
`dismiss-label`	`string`		The dismiss button's text and so its accessible name. "Dismiss" when unset.
`version`	`string`

Events
Name	Type	Description
`dismiss`	`Event`

Slots
Name	Type	Description
`(default)`	`Element \| string`	The message. Slot it in after the alert is on the page, so it's announced.

CSS parts
Name	Description
`alert`
`dismiss-button`

Copy and own it

<slab-styled-alert> isn't in the package. It's an example — copy it into your project and change whatever you want. Under the hood, it's just the headless element, subclassed, with styles set. That's it. Keyboard, focus, ARIA, forms, and events all come from the headless element, and the styles only reach in through ::part() and :state(), same as yours would.

To use it, copy these files, swap the tag in @customElement() for one of your own, and import it. tokens.styles.ts holds the colors and fonts every styled example shares, so you only need it once.

TypeScript

These files are TypeScript, and @customElement() is one of Lit's decorators (TypeScript's experimental flavor). You'll need two options in your tsconfig, per Lit's docs: experimentalDecorators to compile them, and useDefineForClassFields turned off so class fields don't stomp on the accessors Lit sets up.

tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "useDefineForClassFields": false
  }
}

Using plain JavaScript? Drop the types and register the class with customElements.define() instead of the decorator.

alert.ts

import { customElement } from 'lit/decorators.js';
import Alert from 'slab-elements/alert.js';
import styles from './alert.styles.js';
import tokens from './tokens.styles.js';

declare global {
  interface HTMLElementTagNameMap {
    'slab-styled-alert': StyledAlert;
  }
}

/**
 * Alert, styled: paper on ink, with a thick ember edge.
 *
 * An Alert goes on the page empty, and its message is slotted in later. Until
 * then it draws nothing, though it's still on the page for screenreaders to
 * find.
 */
@customElement('slab-styled-alert')
export default class StyledAlert extends Alert {
  static override styles = [tokens, styles];
}

alert.styles.ts

import { css } from 'lit';

export default css`
  :host {
    align-items: stretch;
    background-color: var(--ink);
    border-inline-start: 8px solid var(--ember);
    color: var(--paper);
    display: flex;
    font-family: var(--font-body);
    line-height: 1.5;
  }

  :host(:empty) {
    background-color: transparent;
    border: 0;
  }

  [part~='alert'] {
    flex-grow: 1;
    padding: 0.875rem 1rem;
  }

  :host(:empty) [part~='alert'] {
    padding: 0;
  }

  /* With no message there's nothing to dismiss. */
  :host(:empty) [part~='dismiss-button'] {
    display: none;
  }

  [part~='dismiss-button'] {
    background-color: transparent;
    border: 0;
    border-inline-start: 2px solid currentcolor;
    color: inherit;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    padding: 0 1rem;
    text-transform: uppercase;
    transition:
      background-color 100ms,
      color 100ms;

    &:hover {
      background-color: var(--paper);
      color: var(--ink);
    }

    /*
      Inside the button, so on the alert's own color, where ember falls short
      of 3:1 in the dark. The text's color always has the contrast.
    */
    &:focus-visible {
      outline: 3px solid currentcolor;
      outline-offset: -3px;
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }
`;

tokens.styles.ts

import { css } from 'lit';

/*
  The styled components' palette and type, taken from the logo: ink for the
  courses, ember for the base, paper behind them.

  Each is a short alias for a "--slab-styled-*" property, with the default as
  its fallback. Retheming is "--slab-styled-ember" and the rest on ":root",
  which every shadow root inherits. Were the defaults declared under those
  names here instead, each host's own declaration would shadow the page's.

  Each default is "light-dark()", so the components follow the page's
  "color-scheme": "dark" for dark, "light" for light, and "light dark" to
  follow the operating system. Ink and paper trade places in the dark, so
  ink is always the text and paper always what's behind it. Contrast is given
  as light, then dark.
*/
export default css`
  :host {
    /* Secondary text. 6.8:1 and 6.9:1 on paper. */
    --ash: var(--slab-styled-ash, light-dark(#5e5a55, #a8a19a));
    --border: 2px solid var(--ink);

    /* Behind disabled and read-only controls, and hovered rows. */
    --chalk: var(--slab-styled-chalk, light-dark(#f4f1ec, #2b2926));

    /*
      The logo's orange, brighter in the dark. 4.25:1 and 5.2:1 on paper is
      enough for borders, fills and large text, but not always for small text,
      which takes "--ember-deep".
    */
    --ember: var(--slab-styled-ember, light-dark(#d9492a, #ec5f3b));

    /*
      Orange for small text on paper, and for paper text on it. 5.7:1 and
      7.4:1.
    */
    --ember-deep: var(--slab-styled-ember-deep, light-dark(#b3381a, #ff8566));
    --font-body: var(
      --slab-styled-font-body,
      'IBM Plex Sans',
      system-ui,
      sans-serif
    );
    --font-display: var(
      --slab-styled-font-display,
      'Zilla Slab',
      rockwell,
      'Roboto Slab',
      serif
    );
    --font-mono: var(
      --slab-styled-font-mono,
      'IBM Plex Mono',
      ui-monospace,
      monospace
    );
    --ink: var(--slab-styled-ink, light-dark(#1c1c1c, #f4f1ec));
    --paper: var(--slab-styled-paper, light-dark(#fff, #1a1918));

    /* The hard, offset shadow a raised surface casts. */
    --shadow: 4px 4px 0 var(--ink);
  }
`;