Pulsar UI kit

<div class="pl-stack">
  <h1 class="pl-h1">Heading 22</h1>
  <h2 class="pl-h2">Sub-heading 17</h2>
  <p class="pl-title">Title 15 semibold</p>
  <p class="pl-body">Body 15 regular. Short, plain sentences read best on a phone.</p>
  <p class="pl-small pl-mut">Small 13 medium, muted</p>
  <p class="pl-caption">Caption 12 · faint</p>
  <p class="pl-body">Inline <code>code</code> and <span class="pl-mono">mono 13</span></p>
</div>

<div class="pl-stack">
  <button class="pl-btn pl-btn--block">Save</button>
  <button class="pl-btn pl-btn--secondary pl-btn--block">Not now</button>
  <button class="pl-btn pl-btn--ghost pl-btn--block">Learn more</button>
  <button class="pl-btn pl-btn--danger pl-btn--block"><svg class="pl-icon"><use href="pulsar-icons.svg#trash"/></svg>Remove</button>
  <button class="pl-btn pl-btn--danger-soft pl-btn--block">Clear site data</button>
</div>

<div class="pl-stack">
  <div class="pl-hstack">
    <button class="pl-btn">48</button>
    <button class="pl-btn pl-btn--md">40</button>
    <button class="pl-btn pl-btn--sm">34</button>
    <button class="pl-btn pl-btn--secondary pl-btn--sm"><svg class="pl-icon"><use href="pulsar-icons.svg#plus"/></svg>Add</button>
  </div>
  <div class="pl-hstack">
    <button class="pl-btn is-loading" aria-busy="true"><span class="pl-spinner"></span>Saving</button>
    <button class="pl-btn" disabled>Disabled</button>
  </div>
  <div class="pl-btn-row">
    <button class="pl-btn pl-btn--secondary">Cancel</button>
    <button class="pl-btn">Continue</button>
  </div>
</div>

<div class="pl-hstack">
  <button class="pl-icon-btn" aria-label="Back"><svg class="pl-icon pl-flip"><use href="pulsar-icons.svg#back"/></svg></button>
  <button class="pl-icon-btn" aria-label="Search"><svg class="pl-icon"><use href="pulsar-icons.svg#search"/></svg></button>
  <button class="pl-icon-btn pl-icon-btn--field" aria-label="More"><svg class="pl-icon"><use href="pulsar-icons.svg#more"/></svg></button>
  <button class="pl-icon-btn pl-icon-btn--ink" aria-label="Add"><svg class="pl-icon"><use href="pulsar-icons.svg#plus"/></svg></button>
  <button class="pl-icon-btn" aria-label="Close" disabled><svg class="pl-icon"><use href="pulsar-icons.svg#close"/></svg></button>
</div>

<div class="pl-list">
  <label class="pl-row">
    <span class="pl-row-text"><span class="pl-row-title">Block ads</span><span class="pl-row-sub">On every site</span></span>
    <input class="pl-switch" type="checkbox" checked>
  </label>
  <label class="pl-row">
    <span class="pl-row-text"><span class="pl-row-title">Show a badge</span></span>
    <input class="pl-switch" type="checkbox">
  </label>
  <label class="pl-row">
    <span class="pl-row-text"><span class="pl-row-title">Sync (needs an account)</span></span>
    <input class="pl-switch" type="checkbox" disabled>
  </label>
</div>

<div class="pl-card">
  <label class="pl-choice"><input class="pl-check" type="checkbox" checked> Images</label>
  <label class="pl-choice"><input class="pl-check" type="checkbox"> Videos</label>
  <label class="pl-choice"><input class="pl-check" type="checkbox" disabled> Fonts</label>
  <hr class="pl-divider">
  <label class="pl-choice"><input class="pl-radio" type="radio" name="when" checked> Every day</label>
  <label class="pl-choice"><input class="pl-radio" type="radio" name="when"> Every week</label>
</div>

<div class="pl-chips" data-pl-choice aria-label="Strength">
  <button class="pl-chip" data-value="off">Off</button>
  <button class="pl-chip" data-value="std" aria-checked="true">Standard</button>
  <button class="pl-chip" data-value="strict">Strict</button>
</div>

<div class="pl-seg" data-pl-choice aria-label="Text size">
  <button class="pl-seg-btn" data-value="s">Small</button>
  <button class="pl-seg-btn" data-value="m" aria-checked="true">Medium</button>
  <button class="pl-seg-btn" data-value="l">Large</button>
</div>

<div class="pl-cardchips" data-pl-choice aria-label="Theme">
  <button class="pl-cardchip" data-value="dark" aria-checked="true"><span class="pl-swatch" style="--pl-swatch:#212121"></span>Dark</button>
  <button class="pl-cardchip" data-value="dim"><span class="pl-swatch" style="--pl-swatch:#4A4A4A"></span>Dim</button>
  <button class="pl-cardchip" data-value="sepia"><span class="pl-swatch" style="--pl-swatch:#F3EAD7"></span>Sepia</button>
</div>

<div class="pl-card pl-slider">
  <div class="pl-slider-head">
    <label class="pl-title" for="bright">Brightness</label>
    <output class="pl-slider-value" data-pl-value-for="bright">90%</output>
  </div>
  <input class="pl-range" type="range" id="bright" min="60" max="100" step="5" value="90" data-unit="%">
  <div class="pl-slider-scale"><span>60%</span><span>100%</span></div>
</div>

<div class="pl-stack">
  <div class="pl-formrow">
    <label class="pl-label" for="name">Name</label>
    <input class="pl-field" id="name" placeholder="My list">
    <p class="pl-help">Shown on your list’s card.</p>
  </div>
  <div class="pl-formrow">
    <label class="pl-label" for="site">Site</label>
    <input class="pl-field" id="site" value="news" aria-invalid="true" aria-describedby="site-err">
    <p class="pl-error" id="site-err">Type a full address, like news.example</p>
  </div>
  <input class="pl-field" placeholder="Disabled" disabled>
</div>

<div class="pl-formrow">
  <label class="pl-label" for="css">Custom CSS</label>
  <textarea class="pl-textarea pl-textarea--mono" id="css" placeholder="a { … }"></textarea>
</div>

<div class="pl-search">
  <svg class="pl-icon"><use href="pulsar-icons.svg#search"/></svg>
  <input class="pl-field" type="search" placeholder="Find a site" aria-label="Find a site">
  <button class="pl-icon-btn" type="button" aria-label="Clear"><svg class="pl-icon pl-icon--20"><use href="pulsar-icons.svg#close"/></svg></button>
</div>

<div class="pl-formrow">
  <label class="pl-label" for="when">Check for changes</label>
  <select class="pl-select" id="when">
    <option>Every hour</option>
    <option selected>Every day</option>
    <option>Every week</option>
  </select>
</div>

<section class="pl-section">
  <h2 class="pl-section-title">Blocking</h2>
  <div class="pl-list">
    <label class="pl-row">
      <span class="pl-row-icon"><svg class="pl-icon"><use href="pulsar-icons.svg#shield"/></svg></span>
      <span class="pl-row-text"><span class="pl-row-title">Block trackers</span><span class="pl-row-sub">On every site</span></span>
      <input class="pl-switch" type="checkbox" checked>
    </label>
    <button class="pl-row pl-row--action">
      <span class="pl-row-icon"><svg class="pl-icon"><use href="pulsar-icons.svg#globe"/></svg></span>
      <span class="pl-row-text"><span class="pl-row-title">Allowed sites</span></span>
      <span class="pl-row-value">4</span><svg class="pl-icon pl-row-chev"><use href="pulsar-icons.svg#chevron"/></svg>
    </button>
    <button class="pl-row pl-row--action pl-row--danger">
      <span class="pl-row-icon"><svg class="pl-icon"><use href="pulsar-icons.svg#trash"/></svg></span>
      <span class="pl-row-text"><span class="pl-row-title">Clear site data</span><span class="pl-row-sub">12 MB</span></span>
    </button>
  </div>
  <p class="pl-footnote">Pages that break can be allowed one by one.</p>
</section>

<div class="pl-list pl-list--divided">
  <div class="pl-row"><span class="pl-avatar pl-avatar--sm">N</span><span class="pl-row-text"><span class="pl-row-title">news.example</span><span class="pl-row-sub">21 pages</span></span><span class="pl-badge pl-badge--ok">On</span></div>
  <div class="pl-row"><span class="pl-avatar pl-avatar--sm">L</span><span class="pl-row-text"><span class="pl-row-title">longreads.example</span><span class="pl-row-sub">17 pages</span></span><span class="pl-badge">Off</span></div>
  <div class="pl-row"><span class="pl-avatar pl-avatar--sm">D</span><span class="pl-row-text"><span class="pl-row-title">docs.example</span><span class="pl-row-sub">6 pages</span></span><span class="pl-badge pl-badge--ok">On</span></div>
</div>

<div class="pl-card">
  <div class="pl-card-head">
    <span class="pl-tile pl-tint-violet"><svg class="pl-icon"><use href="pulsar-icons.svg#star"/></svg></span>
    <span class="pl-row-text"><span class="pl-title">Price Watch</span><span class="pl-small pl-mut">3 prices dropped</span></span>
  </div>
  <p class="pl-body pl-mut">We check your saved items once a day and tell you when one costs less.</p>
</div>

<div class="pl-stats">
  <div class="pl-stat"><span class="pl-stat-label">On this page</span><span class="pl-stat-value">14</span><span class="pl-stat-sub">ads and trackers</span></div>
  <div class="pl-stat"><span class="pl-stat-label">This week</span>
    <div class="pl-bars" role="img" aria-label="3, 5, 2, 8, 6, 9, 14">
      <i style="--h:21%"></i><i style="--h:36%"></i><i style="--h:14%"></i><i style="--h:57%"></i><i style="--h:43%"></i><i style="--h:64%"></i><i style="--h:100%"></i>
    </div>
  </div>
</div>

<div class="pl-stats">
  <button class="pl-media"><span class="pl-media-pic pl-tint-blue"><svg class="pl-icon"><use href="pulsar-icons.svg#video"/></svg><span class="pl-media-chip">43 min</span></span><span class="pl-media-title">Mountain Lakes</span><span class="pl-media-sub">Blue Hour · 1080p</span></button>
  <button class="pl-media"><span class="pl-media-pic pl-tint-pink"><svg class="pl-icon"><use href="pulsar-icons.svg#music"/></svg></span><span class="pl-media-title">Night Drive</span><span class="pl-media-sub">12 songs</span></button>
</div>

<div class="pl-stack">
  <div class="pl-hstack"><span class="pl-badge">12</span><span class="pl-badge pl-badge--ok"><svg class="pl-icon pl-icon--16"><use href="pulsar-icons.svg#check"/></svg>Saved</span><span class="pl-badge pl-badge--warn">Needs a look</span><span class="pl-badge pl-badge--danger">Failed</span><span class="pl-badge pl-badge--info">New</span><span class="pl-badge pl-badge--outline">DEV</span></div>
  <div class="pl-hstack"><span class="pl-pill"><span class="pl-dot"></span>Running</span><span class="pl-tag">reading</span><span class="pl-tag">offline</span></div>
</div>

<div class="pl-stack">
  <div class="pl-banner pl-banner--info"><svg class="pl-icon"><use href="pulsar-icons.svg#info"/></svg><div class="pl-banner-text"><span class="pl-banner-title">New in 1.2</span><span>Lists now sync to your other phones.</span></div></div>
  <div class="pl-banner pl-banner--ok"><svg class="pl-icon"><use href="pulsar-icons.svg#check"/></svg><div class="pl-banner-text">Your list is saved.</div></div>
  <div class="pl-banner pl-banner--warn"><svg class="pl-icon"><use href="pulsar-icons.svg#warning"/></svg><div class="pl-banner-text">This site may break with strict blocking.</div><button class="pl-btn pl-btn--secondary pl-btn--sm pl-banner-action">Allow</button></div>
  <div class="pl-banner pl-banner--danger"><svg class="pl-icon"><use href="pulsar-icons.svg#warning"/></svg><div class="pl-banner-text"><span class="pl-banner-title">Couldn’t save</span><span>Check your connection and try again.</span></div></div>
</div>

<div class="pl-stack">
  <button class="pl-btn pl-btn--secondary" id="t1">Show a toast</button>
  <div class="pl-toast pl-toast--static"><svg class="pl-icon"><use href="pulsar-icons.svg#check"/></svg><span class="pl-toast-text">Site choices forgotten</span><button class="pl-toast-action">Undo</button></div>
</div>

<div class="pl-card">
  <div class="pl-empty">
    <span class="pl-empty-tile"><svg class="pl-icon"><use href="pulsar-icons.svg#star"/></svg></span>
    <span class="pl-empty-title">No saved items yet</span>
    <span class="pl-empty-sub">Tap the star on a product page to watch its price.</span>
    <button class="pl-btn pl-btn--secondary pl-btn--md">How it works</button>
  </div>
</div>

<div class="pl-stack">
  <div class="pl-hstack" style="gap:16px">
    <span class="pl-spinner pl-spinner--16" role="status" aria-label="Loading"></span>
    <span class="pl-spinner" role="status" aria-label="Loading"></span>
    <span class="pl-spinner pl-spinner--28" role="status" aria-label="Loading"></span>
    <div class="pl-ring" style="--value:72" role="img" aria-label="72%"><span class="pl-ring-label">72%</span></div>
    <div class="pl-ring pl-ring--ok" style="--value:100" role="img" aria-label="Done"><svg class="pl-icon"><use href="pulsar-icons.svg#check"/></svg></div>
  </div>
  <div class="pl-progress" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span style="--value:40%"></span></div>
  <div class="pl-progress pl-progress--indeterminate" role="progressbar" aria-label="Loading"><span></span></div>
</div>

<div class="pl-list" aria-hidden="true">
  <div class="pl-row"><span class="pl-skel pl-skel--tile"></span><span class="pl-row-text" style="gap:8px"><span class="pl-skel pl-skel--title"></span><span class="pl-skel pl-skel--line" style="width:40%"></span></span></div>
  <div class="pl-row"><span class="pl-skel pl-skel--tile"></span><span class="pl-row-text" style="gap:8px"><span class="pl-skel pl-skel--title" style="width:70%"></span><span class="pl-skel pl-skel--line" style="width:30%"></span></span></div>
</div>

<header class="pl-bar">
  <button class="pl-icon-btn" aria-label="Back"><svg class="pl-icon pl-flip"><use href="pulsar-icons.svg#back"/></svg></button>
  <h1 class="pl-bar-title">Your reading week</h1>
  <button class="pl-icon-btn" aria-label="More"><svg class="pl-icon"><use href="pulsar-icons.svg#more"/></svg></button>
</header>

<div class="pl-tabs pl-tabs--fill" role="tablist" aria-label="Lists">
  <button class="pl-tab" role="tab" aria-controls="p1" aria-selected="true">Days</button>
  <button class="pl-tab" role="tab" aria-controls="p2">Sites</button>
  <button class="pl-tab" role="tab" aria-controls="p3">Notes</button>
</div>
<div class="pl-tabpanel" id="p1"><p class="pl-body">Seven days of reading.</p></div>
<div class="pl-tabpanel" id="p2" hidden><p class="pl-body">The sites you read most.</p></div>
<div class="pl-tabpanel" id="p3" hidden><p class="pl-body">What you saved.</p></div>

<div class="pl-stack">
  <div class="pl-hstack" style="gap:12px">
    <span class="pl-avatar">AK</span>
    <span class="pl-avatar pl-avatar--sm">M</span>
    <span class="pl-tile pl-tint-blue"><svg class="pl-icon"><use href="pulsar-icons.svg#file"/></svg></span>
    <span class="pl-tile pl-tint-green"><svg class="pl-icon"><use href="pulsar-icons.svg#shield"/></svg></span>
    <span class="pl-tile pl-tint-amber"><svg class="pl-icon"><use href="pulsar-icons.svg#bolt"/></svg></span>
    <span class="pl-tile pl-tile--ink"><svg class="pl-icon"><use href="pulsar-icons.svg#puzzle"/></svg></span>
    <span class="pl-tile pl-tile--lg pl-tint-violet"><svg class="pl-icon"><use href="pulsar-icons.svg#palette"/></svg></span>
  </div>
  <hr class="pl-divider">
  <p class="pl-small pl-mut">A divider is one hairline, 12 px above and below.</p>
</div>

<div class="pl-hstack" style="justify-content:space-between;align-items:flex-start">
  <div class="pl-menu pl-menu--static" role="menu" aria-label="Example">
    <button class="pl-menu-item" role="menuitem"><svg class="pl-icon"><use href="pulsar-icons.svg#link"/></svg>Copy link</button>
    <button class="pl-menu-item" role="menuitem"><svg class="pl-icon"><use href="pulsar-icons.svg#settings"/></svg>Settings</button>
    <div class="pl-menu-sep" role="separator"></div>
    <button class="pl-menu-item pl-menu-item--danger" role="menuitem"><svg class="pl-icon"><use href="pulsar-icons.svg#trash"/></svg>Remove</button>
  </div>
  <button class="pl-icon-btn pl-icon-btn--field" id="m1" aria-label="More" aria-haspopup="menu"><svg class="pl-icon"><use href="pulsar-icons.svg#more"/></svg></button>
</div>

<button class="pl-btn pl-btn--secondary" data-pl-sheet="s1">Open the sheet</button>

<div class="pl-sheet" id="s1" hidden>
  <span class="pl-grab" aria-hidden="true"></span>
  <div class="pl-sheet-head">
    <span class="pl-tile pl-tint-blue"><svg class="pl-icon"><use href="pulsar-icons.svg#globe"/></svg></span>
    <div class="pl-row-text"><h2 class="pl-sheet-title">Allow on news.example?</h2><p class="pl-sheet-sub">You can change this later</p></div>
  </div>
  <p class="pl-body pl-mut">Price Watch reads prices on this site. Nothing leaves your phone.</p>
  <div class="pl-sheet-actions">
    <button class="pl-btn pl-btn--block" data-pl-close>Allow</button>
    <button class="pl-btn pl-btn--ghost pl-btn--block" data-pl-close>Not now</button>
  </div>
</div>

<div class="pl-stack">
  <div class="pl-dialog pl-dialog--static" role="dialog" aria-labelledby="d-t">
    <h2 class="pl-dialog-title" id="d-t">Remove this list?</h2>
    <p class="pl-dialog-body">Its 14 items go too.</p>
    <div class="pl-dialog-actions"><button class="pl-btn pl-btn--ghost pl-btn--md">Cancel</button><button class="pl-btn pl-btn--danger pl-btn--md">Remove</button></div>
  </div>
  <button class="pl-btn pl-btn--secondary" id="d1">Open a dialog</button>
</div>

<div class="pl-hstack" style="gap:24px">
  <button class="pl-icon-btn pl-icon-btn--field is-tip" aria-label="Sync now" data-pl-tip="Sync now"><svg class="pl-icon"><use href="pulsar-icons.svg#bolt"/></svg></button>
  <span class="pl-tooltip">Sync now</span>
</div>