Lily Design System™

Draft

A draft is an early preliminary version of content such as an article, email, report, blog post, or document. The component wraps in-progress content so that authoring tools, reviewers, and downstream renderers can recognise it as not-yet-final and treat it accordingly (e.g., hide from public listings, render with a "Draft" badge, exclude from search, allow inline editing).

This headless component renders a <div> with class draft. The consumer supplies the draft content as children. The component does not own save state, autosave, or revision history.

Example

Working title

Opening paragraph still needs a hook.

Show demo markup 
<div class="draft" aria-label="Draft article" data-status="in-progress"><h3>Working title</h3><p>Opening paragraph still needs a hook.</p></div>
Usage example 
<Draft label="Draft article">
  <h1>Working title</h1>
  <p>Opening paragraph still needs a hook.</p>
</Draft>
Show Svelte source 
// In your Svelte component:
import Draft from "lily-design-system-svelte-headless/components/Draft/Draft.svelte";

<Draft label="Draft article" status="in-progress">
  <h1>Working title</h1>
</Draft>

Props

  • label: string (optional) -- accessible label for the draft
  • status: string (optional) -- editorial state, exposed as data-status for consumer CSS/JS
  • children: slot (required) -- draft content
  • ...restProps: Any additional HTML attributes

ARIA

  • aria-label -- describes the draft for screen readers when no visible heading is present

When to Use

  • Use to wrap in-progress content in an authoring or CMS context so downstream code can detect and treat draft state distinctly.
  • Use to flag a section as preliminary so reviewers know it is open for comment or revision.
  • Use to gate rendering of unfinished material in public listings, RSS feeds, or search indexes.

Related components

  • question — a question is anything that asks for information, invites a response, tests knowledge, etc.
  • answer — an answer is anything that responds to a question, request, action, etc.
  • comment — a comment is anything that expresses an opinion, observation, explanation, etc.
  • editable — an inline-editable text element that toggles between view and edit modes
  • editable-form — a form wrapper for inline editing of content

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: draft
  • PascalCase: Draft
  • Description: an early preliminary version of content such as an article, email, report, etc.
  • Status: experimental — recent catalog addition with the least accumulated depth; contract may still move
  • HTML tag: <div>
  • CSS class: .draft
  • Interactive: no

ARIA

  • aria-label -- describes the draft for screen readers when no visible heading is present

Keyboard

  • None -- drafts are content wrappers, not interactive

Props

  • label: string (optional) -- accessible label for the draft
  • status: string (optional) -- editorial state, exposed as data-status
  • children: slot (required) -- draft content
  • ...restProps: Any additional HTML attributes