overlay — wyrd.component.drawer

Drawer

Side-anchored dialog surface with canonical open state, dismissal policy, focus management, and reduced-motion behavior.

Install @wyrd-company/react or the Flutter package and use it directly — your DESIGN.md does the styling.

catalog/contracts/drawer.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: Drawer  tag: wyrd-drawer  package: wyrd.component.drawer  title: Drawer  summary: Side-anchored dialog surface with canonical open state, dismissal policy, focus management, and reduced-motion behavior.relationships:  related-to:    - quality-parity-and-gatesclassification:  category: overlay  composition: overlay  interactive: truetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: is-open      type:        kind: boolean      required: false      default: false      controlled: true      reflects: true      serializable: true      summary: Controlled open state.    - name: default-open      type:        kind: boolean      required: false      default: false      serializable: true      summary: Initial uncontrolled open state.    - name: is-modal      type:        kind: boolean      required: false      default: true      reflects: true      serializable: true      summary: Makes background content inert while the drawer is open.    - name: dismissible      type:        kind: boolean      required: false      default: true      reflects: true      serializable: true      summary: Allows Escape, backdrop, and platform back navigation to request dismissal.    - name: side      type:        kind: enum        values:          - start          - end          - bottom      required: false      default: end      reflects: true      serializable: true      summary: Anchored edge; start and end are logical, RTL-aware sides.    - name: label      type:        kind: string      required: false      serializable: true      summary: Accessible-name fallback used when the title slot is absent.  slots:    - name: title      required: false      cardinality: zero-or-one      accepts:        - text        - node      summary: Optional drawer title and preferred accessible-name source.    - name: content      content: true      required: true      cardinality: one-or-many      accepts:        - content        - node      summary: Drawer content.    - name: actions      required: false      cardinality: zero-or-many      accepts:        - action        - component      summary: Drawer action area.  events:    - name: open-change      payload:        is-open:          kind: boolean        reason:          kind: enum          values:            - trigger            - escape            - backdrop            - platform-back            - action            - programmatic      bubbles: true      composed: true      cancelable: false      summary: Canonical open-state change event.    - name: dismiss      payload:        reason:          kind: enum          values:            - escape            - backdrop            - platform-back            - action      bubbles: true      composed: true      cancelable: true      summary: Dismissal request emitted before a dismissible drawer closes.  states:    - name: closed      source: behavior-runtime      summary: Drawer is absent from the active overlay surface.    - name: opening      source: behavior-runtime      summary: Drawer is entering and focus is moving into the surface.    - name: open      source: behavior-runtime      summary: Drawer is visible and owns modal focus semantics.    - name: dismissing      source: behavior-runtime      summary: Drawer is exiting and focus is restoring.  parts:    - name: backdrop      summary: Modal backdrop.    - name: surface      summary: Drawer surface container.      slots:        - title        - content        - actions    - name: title      summary: Title region.      slots:        - title    - name: content      summary: Content region.      slots:        - content    - name: actions      summary: Action region.      slots:        - actions  tokens:    panel:      background: color.surface-container      foreground: color.on-surface      border-color: color.outline    scrim:      color: color.on-background      opacity: opacity.muted    border-width: 1px    radius: rounded.lg    shadow: shadow.lg    padding-x: spacing.lg    padding-y: spacing.lg    gap: spacing.md    inline-size: 24rem    block-size: 20remmessages: []obligations:  accessibility:    role: dialog    name: Title slot provides the accessible name when present; otherwise label property provides the accessible name.    description: Content may provide the accessible description when declared by the target projection.    keyboard:      - Escape requests dismissal when dismissible is true.      - Tab and Shift+Tab cycle inside a modal drawer.    semantics:      - Modal drawer makes background content inert on web targets.      - Focus moves into the drawer on open and restores to trigger or return target on close.      - Each drawer instance must provide either a title slot or label property.  behavior:    model: behavior-runtime    runtimeBlueprint: behavior/dialog-open-close    interactions:      - Escape, backdrop, platform back, and action dismissal request close when dismissible is true.      - Reduced motion collapses transform tracks while preserving state transitions and completion events.    hostEffects:      - Apply inert background.      - Trap focus while modal.      - Restore focus after close.  conditions:    - rtl    - reduced-motion    - cvd-deuteranopia    - text-expansion    - safe-area  sdui:    status: partial    serializableProperties:      - is-open      - default-open      - is-modal      - dismissible      - side      - label    serializableSlots:      - title      - content      - actions    eventBindings:      - open-change      - dismiss    notes: Open-state data is serializable; overlay host coordination, focus trap, inert background, accessible-name enforcement, and platform back behavior require host effects.examples:  - name: end    state: open    properties:      default-open: true      side: end    slots:      title: Navigation      content: Primary links and account tools.  - name: start    state: open    properties:      default-open: true      side: start      label: Filters    slots:      content: Filter controls for the current result set.  - name: bottom    state: open    properties:      default-open: true      side: bottom    slots:      title: Details      content: Secondary details anchored to the bottom edge.      actions: Closeoverrides:  react:    slots:      content: children  flutter:    slots:      content: child

Examples

Generated from the contract's examples block. Previews are the published @wyrd-company/react component, themed by the brand's role tokens — flip the site's light/dark toggle and they follow.

Code target React Flutter Applies to every example on component pages.

end state: open

Usage

import { WyrdDrawer } from "@wyrd-company/react";

<WyrdDrawer defaultOpen side="end" title="Navigation">
  Primary links and account tools.
</WyrdDrawer>

// events: onOpenChange, onDismiss

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdDrawer(
  defaultOpen: true,
  side: 'end',
  title: Text('Navigation'),
  child: Text('Primary links and account tools.'),
)

// events: onOpenChanged, onDismiss

start state: open

Usage

import { WyrdDrawer } from "@wyrd-company/react";

<WyrdDrawer defaultOpen side="start" label="Filters">
  Filter controls for the current result set.
</WyrdDrawer>

// events: onOpenChange, onDismiss

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdDrawer(
  defaultOpen: true,
  side: 'start',
  label: 'Filters',
  child: Text('Filter controls for the current result set.'),
)

// events: onOpenChanged, onDismiss

bottom state: open

Usage

import { WyrdDrawer } from "@wyrd-company/react";

<WyrdDrawer defaultOpen side="bottom" title="Details" actions="Close">
  Secondary details anchored to the bottom edge.
</WyrdDrawer>

// events: onOpenChange, onDismiss

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdDrawer(
  defaultOpen: true,
  side: 'bottom',
  title: Text('Details'),
  child: Text('Secondary details anchored to the bottom edge.'),
  actions: Text('Close'),
)

// events: onOpenChanged, onDismiss

Properties

Name	Type	Default	Summary
`is-open`	`boolean`	`false`	Controlled open state.
`default-open`	`boolean`	`false`	Initial uncontrolled open state.
`is-modal`	`boolean`	`true`	Makes background content inert while the drawer is open.
`dismissible`	`boolean`	`true`	Allows Escape, backdrop, and platform back navigation to request dismissal.
`side`	`start \| end \| bottom`	`end`	Anchored edge; start and end are logical, RTL-aware sides.
`label`	`string`	`undefined`	Accessible-name fallback used when the title slot is absent.

Slots & events

Slot	Cardinality	Accepts	Summary
`title`	zero-or-one	`text, node`	Optional drawer title and preferred accessible-name source.
`content`	one-or-many	`content, node`	Drawer content.
`actions`	zero-or-many	`action, component`	Drawer action area.

Event	Payload	Summary
`open-change`	`is-open, reason`	Canonical open-state change event.
`dismiss`	`reason`	Dismissal request emitted before a dismissible drawer closes.

Tokens

The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.

Binding	Token
`panel.background`	`color.surface-container`
`panel.foreground`	`color.on-surface`
`panel.border-color`	`color.outline`
`scrim.color`	`color.on-background`
`scrim.opacity`	`opacity.muted`
`border-width`	`1px`
`radius`	`rounded.lg`
`shadow`	`shadow.lg`
`padding-x`	`spacing.lg`
`padding-y`	`spacing.lg`
`gap`	`spacing.md`
`inline-size`	`24rem`
`block-size`	`20rem`

States

State	Source	Summary
`closed`	behavior-runtime	Drawer is absent from the active overlay surface.
`opening`	behavior-runtime	Drawer is entering and focus is moving into the surface.
`open`	behavior-runtime	Drawer is visible and owns modal focus semantics.
`dismissing`	behavior-runtime	Drawer is exiting and focus is restoring.

SDUI

Status: partial. Open-state data is serializable; overlay host coordination, focus trap, inert background, accessible-name enforcement, and platform back behavior require host effects.

Serializable	Members
Properties	`is-open, default-open, is-modal, dismissible, side, label`
Slots	`title, content, actions`
Events	`open-change, dismiss`

  The Wyrding Way — a contract-first design system. © Wyrd Company 
   Pipeline demo
 Choose an example to inspect its pipeline context.
 Explore the shape of a brand's pipeline input: presets and knobs regenerate the illustrative excerpt below — not a compilable DESIGN.md (see the format reference). Primary swatches update live; accent, shape, density, and ground are excerpt-only; error swatches are preset-derived until any edit switches to custom (TWW · Ink errors). Component previews use the published brand package and the site's light/dark toggle.
 
  Start from
       
 * homages — shown for range, not affiliation.
 
  Tokens
 Primary updates live swatches. Accent, shape, density, and ground appear in the excerpt only. Error swatches follow the preset until you edit a knob — then they reset to TWW · Ink.
  color.primary   #26221A    color.accent   #9C7C14    rounded.md   2px    density   1.0×    ground     
 
   DESIGN.md excerpt illustrative

Examples

Properties

Slots & events

Tokens

States

Accessibility

SDUI