Paper

<zeno-paper>LayoutSource

A plain surface with a background, radius and optional shadow.

import '@usezeno/tokens/css';
import '@usezeno/core/web-components';

Examples

Elevation

elevation goes from 0, with no shadow, to 5. The default is 1.

Elevation 0 Elevation 1 Elevation 2 Elevation 3 Elevation 4 Elevation 5

<zeno-paper elevation="0">Elevation 0</zeno-paper>
<zeno-paper elevation="1">Elevation 1</zeno-paper>
<zeno-paper elevation="2">Elevation 2</zeno-paper>
<zeno-paper elevation="3">Elevation 3</zeno-paper>
<zeno-paper elevation="4">Elevation 4</zeno-paper>
<zeno-paper elevation="5">Elevation 5</zeno-paper>

Outlined and glass

outlined draws a border in place of the shadow. glass makes the surface partly see-through and blurs what is behind it. Both ignore elevation.

Outlined Glass

<zeno-paper outlined>Outlined</zeno-paper>
<zeno-paper glass>Glass</zeno-paper>

Padding and radius

No padding, square corners Small padding, small radius Medium padding, medium radius Large padding, large radius Extra large padding, extra large radius

<zeno-paper outlined padding="none" radius="none">No padding, square corners</zeno-paper>
<zeno-paper outlined padding="sm" radius="sm">Small padding, small radius</zeno-paper>
<zeno-paper outlined padding="md" radius="md">Medium padding, medium radius</zeno-paper>
<zeno-paper outlined padding="lg" radius="lg">Large padding, large radius</zeno-paper>
<zeno-paper outlined padding="xl" radius="xl">Extra large padding, extra large radius</zeno-paper>

Background

Primary Secondary Tertiary Surface

<zeno-paper outlined background="primary">Primary</zeno-paper>
<zeno-paper outlined background="secondary">Secondary</zeno-paper>
<zeno-paper outlined background="tertiary">Tertiary</zeno-paper>
<zeno-paper outlined background="surface">Surface</zeno-paper>

Clickable

A clickable paper can take focus. Enter and Space send a click, the same as a pointer press.

Open the March invoice

Not opened yet.

<zeno-paper clickable elevation="2">Open the March invoice</zeno-paper>
<p data-result>Not opened yet.</p>

let count = 0;
document.querySelector('zeno-paper').addEventListener('click', () => {
  count += 1;
  document.querySelector('[data-result]').textContent = 'Opened ' + count + ' times.';
});

Attributes and properties

Property	Attribute	Type	Default	Description
elevation	elevationreflects	0 | 1 | 2 | 3 | 4 | 5	1
outlined	outlinedreflects	boolean	false
clickable	clickablereflects	boolean	false
padding	paddingreflects	'none' | 'sm' | 'md' | 'lg' | 'xl'	'md'
radius	radiusreflects	'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'	'lg'
background	backgroundreflects	'primary' | 'secondary' | 'tertiary' | 'surface'	'primary'
glass	glassreflects	boolean	false
testId	–	string	–	Test ID for automated testing From ZenoElement.

Methods

Method	Description
focus(): void	Focus the component or its first focusable element From ZenoElement.
blur(): void	Blur the component or its focused element From ZenoElement.

Events

This element sends no events.

Slots

Slot	Description
Default	The content.

CSS parts

Part
base

CSS custom properties

This element documents no custom properties of its own. Style it through its parts and through the tokens it reads.

The element's own source reads no tokens.

Accessibility

Keyboard

Key	What it does
Tab	Moves focus to the paper, only when it is clickable.
EnterSpace	On a clickable paper, sends a click event. Keys pressed in a control inside the paper are left alone.

Forms

This element is not a form control. It adds nothing to a form's data.

Notes

• A clickable paper has role="button" and tabindex="0". Any other paper has role="article".
• The aria-label of the element is copied to the inner element that carries the role.
• When the user asks for more contrast, the paper gets a border.
• With reduced motion a clickable paper has no transition and does not lift on hover.

Tests and known gaps

• No tests of its own. The only check is that the element registers and renders (smoke.test.ts).
• Not checked with axe-core.
• Has no Storybook story.

8 of the 12 properties, methods, events, slots and parts above have no description in the source

• the property elevation
• the property outlined
• the property clickable
• the property padding
• the property radius
• the property background
• the property glass
• the part base

Known gaps:

• Every paper that is not clickable is an article. A page with many papers used only for layout gets many article regions, and the role cannot be removed.
• A paper that is not clickable has tabindex="-1". A pointer press on it moves focus to the paper, and it can show a focus ring.
• A clickable paper is one button. Links or buttons placed inside it are nested inside a button role, which assistive technology does not handle well.
• background="primary" and background="surface" are the same colour.
• The aria-label is read when the paper renders. Changing only aria-label later does not update the inner element until another property changes.
• A paper without an aria-label still gets an empty aria-label="" on its inner element.
• A clickable paper cannot be disabled.