@plangrid/structure
Version:
CSS structure library
1,189 lines • 66.6 kB
HTML
<!DOCTYPE html>
<html class="bg-snow c-black font-os line-compact" lang="en-US">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Structure</title>
<link rel="stylesheet" href="main.css?">
<link rel="stylesheet" href="https://unpkg.com/@plangrid/paint@0.34.0/main.css">
<body class="m0 border-box size-text">
<header class="m0 mb2 p2">
<h1 class="font-xl bold m0 mb1">
<a
data-paint="MattePurple focus-g10"
data-structure="UnderSome font-xl round-medium block-table outline-none"
href="https://plangrid.github.io/structure/">structure</a>
</h1>
<a
data-paint="MattePurple focus-g10"
data-structure="TapHF round-medium block-table outline-none"
href="https://github.com/plangrid/structure">github.com/<b>plangrid/structure</b></a>
</header>
<nav class="m0 mb2 p2 line-passing">
<button
data-click="toggleDrawerR1 toggleExpanded"
data-paint="VividPurple lift-f10 focus-g10 hover-f20 active-b10-g10"
data-structure="TapHF p1 border-1px border-solid round-medium mb2 outline-none"
>toggleDrawerR1
</button>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#fonts">#fonts</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#frames">#frames</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#corners">#corners</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#buttons">#buttons</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#pill">#pill</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#disclosure">#disclosure</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#grouped">#grouped</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#checkbox">#checkbox</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#checklist">#checklist</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#radio">#radio</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#radiogroup">#radiogroup</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#dropdowns">#dropdowns</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#opdown">#opdown</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#dropdown">#dropdown</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#pillbox">#pillbox</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#autocomplete">#autocomplete</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#profile">#profile</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#fields">#fields</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#unitcap">#unitcap</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#checkcap">#checkcap</a>
<a data-paint="MatteBlue focus-g10" data-structure="TapHF round-medium block-table outline-none focus-relative" href="#loading">#loading</a>
</nav>
<section class="p2 mb3" id="fonts">
<header>
<h2 class="font-l m0 mb1">
<a href="#fonts" data-structure="UnderAll round-medium" data-paint="MattePurple outline-none focus-g10">Fonts</a>
</h2>
<p contenteditable class="m0 font-os weight-bold size-12px line-passing case-upper">
Samples are editable so that you can experiment with text length.
Inspect to see the classes.
</p>
</header>
<figure>
<figcaption contenteditable class="font-os weight-normal size-26px line-compact">Display fonts</figcaption>
<ul class="list-none p0 ml4">
<li contenteditable data-structure="FontXL">FontXL</li>
<li contenteditable data-structure="FontL">FontL</li>
<li contenteditable data-structure="FontM">FontM</li>
<li contenteditable data-structure="FontS">FontS</li>
<li contenteditable data-structure="FontXS">FontXS</li>
<li contenteditable data-structure="FontXXS">FontXXS</li>
</ul>
</figure>
<figure>
<figcaption contenteditable class="m0 mb2 font-os weight-normal size-26px line-compact">Text fonts</figcaption>
<ul class="list-none p0 ml4">
<li contenteditable class="font-os weight-normal size-14px line-passing">FontB</li>
<li contenteditable class="font-os weight-normal size-12px line-compact">FontC</li>
</ul>
</figure>
<figure>
<figcaption contenteditable class="m0 mb2 font-os weight-normal size-26px line-compact">Long sample</figcaption>
<blockquote contenteditable class="m0 ml4 mb1 font-os weight-normal size-14px line-passing"
cite="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html">
People with some visual or cognitive disabilities need to be able to select the color of text and the color of the background.
They sometimes choose combinations that seem unintuitive to someone without that disability.
Sometimes these combinations have very low contrast.
Sometimes only very specific color combinations work for them.
Control of color or other aspects of text presentation makes a huge difference to their comprehension.
</blockquote>
</figure>
</section>
<section class="p2 mb3" id="frames">
<header class="mb2">
<h2 class="font-l m0 mb1">
<a href="#frames" data-structure="UnderAll round-medium" data-paint="MattePurple outline-none focus-g10">Frames</a>
</h2>
Frames provide structural framing foundations for components.
They're designed to correlate with Sketch symbols.
Shown here are different frames each applied to multiple elements for quality assurance.
Blank frames are white-space and :empty tests for preceding tag
</header>
<figure class="preset-box mb3">
<figcaption class="font-xs">.frame-dense</figcaption>
<input class="font-os font-b preset-input frame-dense ccc-black ggg-transparent bbb-black" value="input" disabled>
<button class="font-os font-b preset-button frame-dense ccc-black ggg-transparent bbb-black" type="button" disabled>button</button>
<button class="font-os font-b preset-button frame-dense ccc-black ggg-transparent bbb-black" type="button" disabled> </button>
<button class="font-os font-b preset-button frame-dense ccc-black ggg-transparent bbb-black" type="button" disabled></button>
<span class="font-os font-b preset-box frame-dense">span</span>
<span class="font-os font-b preset-box frame-dense"> </span>
<span class="font-os font-b preset-box frame-dense"></span>
</figure>
<figure class="preset-box mb3">
<figcaption class="font-xs">.frame-basic</figcaption>
<input class="font-os font-b preset-input frame-basic ccc-black ggg-transparent bbb-black" value="input" disabled>
<button class="font-os font-b preset-button frame-basic ccc-black ggg-transparent bbb-black" type="button" disabled>button</button>
<button class="font-os font-b preset-button frame-basic ccc-black ggg-transparent bbb-black" type="button" disabled> </button>
<button class="font-os font-b preset-button frame-basic ccc-black ggg-transparent bbb-black" type="button" disabled></button>
<span class="font-os font-b preset-box frame-basic">span</span>
<span class="font-os font-b preset-box frame-basic"> </span>
<span class="font-os font-b preset-box frame-basic"></span>
</figure>
<figure class="preset-box mb3">
<figcaption class="font-xs">.frame-plush</figcaption>
<input class="font-os font-b preset-input frame-plush ccc-black ggg-transparent bbb-black" value="input" disabled>
<button class="font-os font-b preset-button frame-plush ccc-black ggg-transparent bbb-black" type="button" disabled>button</button>
<button class="font-os font-b preset-button frame-plush ccc-black ggg-transparent bbb-black" type="button" disabled> </button>
<button class="font-os font-b preset-button frame-plush ccc-black ggg-transparent bbb-black" type="button" disabled></button>
<span class="font-os font-b preset-box frame-plush">span</span>
<span class="font-os font-b preset-box frame-plush"> </span>
<span class="font-os font-b preset-box frame-plush"></span>
</figure>
</section>
<section class="p2 mb3" id="corners">
<h2 class="font-l m0 mb1">
<a href="#corners" data-structure="UnderAll round-medium" data-paint="MattePurple outline-none focus-g10">Corners</a>
</h2>
<h4>Round corners</h4>
<figure class="m-auto mb2 mb0-last border-box flex items-center justify-start">
<div class="border p2 mr1 width-rem height-rem round-small"></div>
<code class="family-inherit block">.round-small</code>
</figure>
<figure class="m-auto mb2 mb0-last border-box flex items-center justify-start">
<div class="border p2 mr1 width-rem height-rem round-medium"></div>
<code class="family-inherit block">.round-medium</code>
</figure>
<figure class="m-auto mb2 mb0-last border-box flex items-center justify-start">
<div class="border p2 mr1 width-rem height-rem round-large"></div>
<code class="family-inherit block">.round-large</code>
</figure>
<figure class="m-auto mb2 mb0-last border-box flex items-center justify-start">
<div class="border p2 mr1 width-rem height-rem round-circle"></div>
<code class="family-inherit block">.round-circle</code>
</figure>
<h4>Sharpen any side</h4>
<figure class="m-auto mb2 mb0-last border-box flex items-center justify-start">
<div class="border p2 mr1 width-rem height-rem round-circle sharp-top"></div>
<code class="family-inherit block">.sharp-top</code>
</figure>
<figure class="m-auto mb2 mb0-last border-box flex items-center justify-start">
<div class="border p2 mr1 width-rem height-rem round-circle sharp-left"></div>
<code class="family-inherit block">.sharp-left</code>
</figure>
<figure class="m-auto mb2 mb0-last border-box flex items-center justify-start">
<div class="border p2 mr1 width-rem height-rem round-circle sharp-right"></div>
<code class="family-inherit block">.sharp-right</code>
</figure>
<figure class="m-auto mb2 mb0-last border-box flex items-center justify-start">
<div class="border p2 mr1 width-rem height-rem round-circle sharp-bottom"></div>
<code class="family-inherit block">.sharp-bottom</code>
</figure>
<h4>Sharpen inners</h4>
<figure class="m-auto mb2 mb0-last border-box">
<code class="border p2 family-inherit inline-block round-large sharp-shelf">.sharp-shelf</code>
<code class="border p2 family-inherit inline-block round-large sharp-shelf">.sharp-shelf</code>
<code class="border p2 family-inherit inline-block round-large sharp-shelf">.sharp-shelf</code>
</figure>
<figure class="m-auto mb2 mb0-last border-box">
<code class="border p2 family-inherit block round-large sharp-stack">.sharp-stack</code>
<code class="border p2 family-inherit block round-large sharp-stack">.sharp-stack</code>
<code class="border p2 family-inherit block round-large sharp-stack">.sharp-stack</code>
</figure>
</section>
<section class="p2 mb3" id="buttons">
<h2 class="font-l m0 mb1">
<a href="#buttons" data-structure="UnderAll round-medium" data-paint="MattePurple outline-none focus-g10">Buttons</a>
</h2>
<figure class="preset-box mb2 flex-auto">
<figcaption class="size-coarse m0 mb1">
Buttons may appear in many form factors.
Recommended sizing is as shown below.
In certain layouts we may flex the button.
<a data-paint="MatteBlue focus-g10 outline-none" href="https://plangrid.github.io/paint/#button-paint">Apply color via button paint.</a>
</figcaption>
<button
data-structure="TapHF FontB border-1px border-solid round-medium m1"
data-paint="MatteBlue focus-g10 outline-none">
Inline
</button>
<button
data-structure="TapHF FontB frame-dense m1"
data-paint="VividBlue lift-f10 focus-g10 hover-f20 active-b10-g10 outline-none">
Dense
</button>
<button
data-structure="TapHF FontB frame-basic m1"
data-paint="VividBlue lift-f10 focus-g10 hover-f20 active-b10-g10 outline-none">
Basic
</button>
<button
data-structure="TapHF FontB frame-plush m1"
data-paint="VividBlue lift-f10 focus-g10 hover-f20 active-b10-g10 outline-none">
Plush
</button>
<p data-structure="FontS">Buttons may contain more than just text.</p>
<button
data-structure="
TapHF FontB frame-dense
inline-flex items-center m1
"
data-paint="VividBlue lift-f10 focus-g10 hover-f20 active-b10-g10 outline-none">
<svg data-structure="overflow-hidden inline ml1 mr1 ml0-first mr0-last"
width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path fill="currentColor" d="M10,4 L12,6 L20,6 C21.1,6 22,6.9 22,8 L22,18 C22,19.1 21.1,20 20,20 L4,20 C2.9,20 2,19.1 2,18 L2,6 C2,4.9 2.9,4 4,4 L10,4 Z M9.378,5.5 L4,5.5 C3.729,5.5 3.5,5.729 3.5,6 L3.5,18 C3.5,18.271 3.729,18.5 4,18.5 L20,18.5 C20.271,18.5 20.5,18.271 20.5,18 L20.5,8 C20.5,7.729 20.271,7.5 20,7.5 L12,7.5 L11.379,7.5 L10.939,7.061 L9.378,5.5 Z"/>
</svg>
<span>Open</span>
</button>
<button
data-structure="
TapHF FontB frame-basic
inline-flex items-center m1
"
data-paint="VividBlue lift-f10 focus-g10 hover-f20 active-b10-g10 outline-none">
<svg data-structure="overflow-hidden inline ml1 mr1 ml0-first mr0-last"
width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path fill="currentColor" d="M10,4 L12,6 L20,6 C21.1,6 22,6.9 22,8 L22,18 C22,19.1 21.1,20 20,20 L4,20 C2.9,20 2,19.1 2,18 L2,6 C2,4.9 2.9,4 4,4 L10,4 Z M9.378,5.5 L4,5.5 C3.729,5.5 3.5,5.729 3.5,6 L3.5,18 C3.5,18.271 3.729,18.5 4,18.5 L20,18.5 C20.271,18.5 20.5,18.271 20.5,18 L20.5,8 C20.5,7.729 20.271,7.5 20,7.5 L12,7.5 L11.379,7.5 L10.939,7.061 L9.378,5.5 Z"/>
</svg>
<span>Open</span>
</button>
<button
data-structure="
TapHF FontB frame-plush
inline-flex items-center m1
"
data-paint="VividBlue lift-f10 focus-g10 hover-f20 active-b10-g10 outline-none">
<svg data-structure="overflow-hidden inline ml1 mr1 ml0-first mr0-last"
width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path fill="currentColor" d="M10,4 L12,6 L20,6 C21.1,6 22,6.9 22,8 L22,18 C22,19.1 21.1,20 20,20 L4,20 C2.9,20 2,19.1 2,18 L2,6 C2,4.9 2.9,4 4,4 L10,4 Z M9.378,5.5 L4,5.5 C3.729,5.5 3.5,5.729 3.5,6 L3.5,18 C3.5,18.271 3.729,18.5 4,18.5 L20,18.5 C20.271,18.5 20.5,18.271 20.5,18 L20.5,8 C20.5,7.729 20.271,7.5 20,7.5 L12,7.5 L11.379,7.5 L10.939,7.061 L9.378,5.5 Z"/>
</svg>
<span>Open</span>
</button>
</figure>
<figure class="preset-box mb3 flex-auto" id="pill">
<figcaption class="m0 mb2">
<h3 class="m0 mb1 font-inherit weight-semibold">Pill</h3>
<ul class="preset-box list-none ml2">
<li class="mb1">See related: <a class="tone-link shadow-ring round-medium" href="#pillbox">#pillbox</a>
</ul>
</figcaption>
<button
aria-label="Delete"
disabled
style="min-height: 1.5rem"
class="preset-button p0 pl1 line-initial size-body round-medium border pointer fill-current shadow-ring tone-pill border-none overflow-hidden ws-nowrap width-fit">
<span class="inline-block align-middle mr-auto overflow-hidden overflow-dots ws-nowrap" style="max-width: 8rem">keep@example.com</span>
</button>
<button
aria-label="Delete"
style="min-height: 1.5rem"
class="preset-button p0 pl1 line-initial size-body round-medium border pointer fill-current shadow-ring tone-pill border-none overflow-hidden ws-nowrap width-fit">
<span class="inline-block align-middle mr-auto overflow-hidden overflow-dots ws-nowrap" style="max-width: 8rem">doe@example.com</span>
<svg class="overflow-hidden align-middle ml-auto" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path fill="currentColor" d="M17.7803,16.7197 C18.0703,17.0097 18.0703,17.4907 17.7803,17.7807 C17.6403,17.9197 17.4403,17.9997 17.2503,17.9997 C17.0603,17.9997 16.8603,17.9197 16.7203,17.7807 L12.0003,13.0597 L7.2803,17.7807 C6.9903,18.0707 6.5093,18.0707 6.2203,17.7807 C5.9303,17.4907 5.9303,17.0097 6.2203,16.7197 L10.9403,11.9997 L6.2203,7.2807 C5.9303,6.9907 5.9303,6.5097 6.2203,6.2197 C6.3603,6.0797 6.5603,5.9997 6.7503,5.9997 C6.9403,5.9997 7.1403,6.0797 7.2803,6.2197 L12.0003,10.9407 L16.7203,6.2197 C16.8603,6.0797 17.0603,5.9997 17.2503,5.9997 C17.4403,5.9997 17.6403,6.0797 17.7803,6.2197 C18.0703,6.5097 18.0703,6.9907 17.7803,7.2807 L13.0603,11.9997 L17.7803,16.7197 Z"/>
</svg>
</button>
<button
aria-label="Delete"
style="min-height: 1.5rem"
class="preset-button p0 pl1 line-initial size-body round-medium border pointer fill-current shadow-ring tone-pill border-none overflow-hidden ws-nowrap width-fit">
<span class="inline-block align-middle mr-auto overflow-hidden overflow-dots ws-nowrap" style="max-width: 8rem">truncationexample@example.com</span>
<svg class="overflow-hidden align-middle ml-auto" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path fill="currentColor" d="M17.7803,16.7197 C18.0703,17.0097 18.0703,17.4907 17.7803,17.7807 C17.6403,17.9197 17.4403,17.9997 17.2503,17.9997 C17.0603,17.9997 16.8603,17.9197 16.7203,17.7807 L12.0003,13.0597 L7.2803,17.7807 C6.9903,18.0707 6.5093,18.0707 6.2203,17.7807 C5.9303,17.4907 5.9303,17.0097 6.2203,16.7197 L10.9403,11.9997 L6.2203,7.2807 C5.9303,6.9907 5.9303,6.5097 6.2203,6.2197 C6.3603,6.0797 6.5603,5.9997 6.7503,5.9997 C6.9403,5.9997 7.1403,6.0797 7.2803,6.2197 L12.0003,10.9407 L16.7203,6.2197 C16.8603,6.0797 17.0603,5.9997 17.2503,5.9997 C17.4403,5.9997 17.6403,6.0797 17.7803,6.2197 C18.0703,6.5097 18.0703,6.9907 17.7803,7.2807 L13.0603,11.9997 L17.7803,16.7197 Z"/>
</svg>
</button>
<button
aria-label="Delete"
style="min-height: 1.5rem"
class="preset-button p0 pl1 line-initial size-body round-medium border pointer fill-current shadow-ring tone-pill border-none overflow-hidden ws-nowrap width-fit">
<svg class="overflow-hidden align-middle -m1 mt0 mb0" style="margin-right: -.25rem" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,5 C10.067,5 8.5,6.567 8.5,8.5 C8.5,10.433 10.067,12 12,12 C13.933,12 15.5,10.433 15.5,8.5 C15.5,6.567 13.933,5 12,5 M12,6.5 C13.103,6.5 14,7.397 14,8.5 C14,9.603 13.103,10.5 12,10.5 C10.897,10.5 10,9.603 10,8.5 C10,7.397 10.897,6.5 12,6.5 M18.5,18 L18.5,18.25 C18.5,18.664 18.164,19 17.75,19 C17.336,19 17,18.664 17,18.25 L17,18 C17,16.35 15.65,15 14,15 L10,15 C8.35,15 7,16.35 7,18 L7,18.25 C7,18.664 6.664,19 6.25,19 C5.836,19 5.5,18.664 5.5,18.25 L5.5,18 C5.5,15.515 7.515,13.5 10,13.5 L14,13.5 C16.485,13.5 18.5,15.515 18.5,18"/>
</svg>
<span class="inline-block align-middle mr-auto overflow-hidden overflow-dots ws-nowrap" style="max-width: 8rem">truncationexample@example.com</span>
<svg class="overflow-hidden align-middle ml-auto" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path fill="currentColor" d="M17.7803,16.7197 C18.0703,17.0097 18.0703,17.4907 17.7803,17.7807 C17.6403,17.9197 17.4403,17.9997 17.2503,17.9997 C17.0603,17.9997 16.8603,17.9197 16.7203,17.7807 L12.0003,13.0597 L7.2803,17.7807 C6.9903,18.0707 6.5093,18.0707 6.2203,17.7807 C5.9303,17.4907 5.9303,17.0097 6.2203,16.7197 L10.9403,11.9997 L6.2203,7.2807 C5.9303,6.9907 5.9303,6.5097 6.2203,6.2197 C6.3603,6.0797 6.5603,5.9997 6.7503,5.9997 C6.9403,5.9997 7.1403,6.0797 7.2803,6.2197 L12.0003,10.9407 L16.7203,6.2197 C16.8603,6.0797 17.0603,5.9997 17.2503,5.9997 C17.4403,5.9997 17.6403,6.0797 17.7803,6.2197 C18.0703,6.5097 18.0703,6.9907 17.7803,7.2807 L13.0603,11.9997 L17.7803,16.7197 Z"/>
</svg>
</button>
</figure>
<figure class="preset-box mb2 flex-auto" id="disclosure">
<figcaption class="size-coarse m0 mb1">Disclosure</figcaption>
<ul class="preset-box list-none ml2 mb2">
<li class="mb1">For disclosing another element. Works with any button tone.
<li class="mb1">Use <a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded" class="tone-link shadow-ring round-medium">aria-expanded</a> to indicate the open state
<li class="mb1">Use <a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-controls" class="tone-link shadow-ring round-medium">aria-controls</a> if disclosed element is outside
</ul>
<button class="preset-button inline-flex items-center p1 line-initial size-body round-medium border pointer fill-current shadow-ring tone-secondary" aria-expanded="false">
<span class="align-middle preset-box inline-block overflow-hidden overflow-dots ws-nowrap flex-auto pr3 text-left">Ready</span>
<svg class="overflow-hidden -m1 ml-auto mr0 shrink-0" width="24" height="24" viewBox="0 0 24 24">
<polygon fill="currentColor" points="8 10 16 10 12 14"/>
</svg>
</button>
<button class="preset-button inline-flex items-center p1 line-initial size-body round-medium border pointer fill-current shadow-ring tone-secondary" aria-expanded="false" disabled>
<span class="align-middle preset-box inline-block overflow-hidden overflow-dots ws-nowrap flex-auto pr3 text-left">Disabled</span>
<svg class="overflow-hidden -m1 ml0 mr0 shrink-0" width="24" height="24" viewBox="0 0 24 24">
<polygon fill="currentColor" points="8 10 16 10 12 14"/>
</svg>
</button>
<button class="preset-button inline-flex items-center p1 line-initial size-body round-medium border pointer fill-current shadow-ring tone-secondary" aria-expanded="true">
<span class="align-middle preset-box inline-block overflow-hidden overflow-dots ws-nowrap flex-auto pr3 text-left">Opened</span>
<svg class="overflow-hidden -m1 ml0 mr0 shrink-0" width="24" height="24" viewBox="0 0 24 24">
<polygon fill="currentColor" points="16 13 8 13 12 9"/>
</svg>
</button>
<button class="preset-button inline-flex items-center p1 line-initial size-body round-medium border pointer fill-current shadow-ring tone-secondary" aria-expanded="true" disabled>
<span class="align-middle preset-box inline-block overflow-hidden overflow-dots ws-nowrap flex-auto pr3 text-left">Trapped</span>
<svg class="overflow-hidden -m1 ml0 mr0 shrink-0" width="24" height="24" viewBox="0 0 24 24">
<polygon fill="currentColor" points="16 13 8 13 12 9"/>
</svg>
</button>
</figure>
<figure class="m-auto border-box flex-auto" id="grouped">
<figcaption class="size-coarse m0 mb1">Grouped</figcaption>
<p class="m0 mb2">Use <a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed" class="tone-link shadow-ring round-medium">aria-pressed</a> to indicate the chosen one(s)
<fieldset class="preset-box border-none">
<button
aria-pressed="false"
class="preset-box overflow-visible p1 line-single size-body round-medium sharp-shelf weld-shelf border case-none pointer fill-current shadow-ring tone-secondary">
Grid
</button><button
aria-pressed="true"
class="preset-box overflow-visible p1 line-single size-body round-medium sharp-shelf weld-shelf border case-none pointer fill-current shadow-ring tone-secondary">
List
</button><button
aria-pressed="false"
class="preset-box overflow-visible p1 line-single size-body round-medium sharp-shelf weld-shelf border case-none pointer fill-current shadow-ring tone-secondary">
Dot
</button>
</fieldset>
</figure>
</section>
<section class="p2 mb3">
<figure class="m-auto" id="checkbox">
<h2 class="font-l m0 mb1">
<a href="#checkbox" data-structure="UnderAll round-medium" data-paint="MattePurple outline-none focus-g10">Checkbox</a>
</h2>
<form class="preset-box mb3">
<fieldset class="preset-box">
<legend class="preset-box">ARIA checkbox states</legend>
<div class="mb1"></div>
<button class="preset-button cbox tone-check shadow-raised shadow-ring" type="button" role="checkbox" aria-checked="false"></button>
<button class="preset-button cbox tone-check shadow-raised shadow-ring" type="button" role="checkbox" aria-checked="true"></button>
<button class="preset-button cbox tone-check shadow-raised shadow-ring" type="button" role="checkbox" aria-checked="mixed"></button>
<button disabled class="preset-button cbox tone-check shadow-raised shadow-ring" type="button" role="checkbox" aria-checked="false"></button>
<button disabled class="preset-button cbox tone-check shadow-raised shadow-ring" type="button" role="checkbox" aria-checked="true"></button>
<button disabled class="preset-button cbox tone-check shadow-raised shadow-ring" type="button" role="checkbox" aria-checked="mixed"></button>
</fieldset>
</form>
</figure>
<figure class="m-auto" id="checklist">
<h2 class="font-l m0 mb1">
<a href="#checklist" data-structure="UnderAll round-medium" data-paint="MattePurple outline-none focus-g10">Checklist</a>
</h2>
<form class="preset-box mb3">
<fieldset class="preset-box">
<legend class="preset-box font-b">Materials</legend>
<div class="mb1"></div>
<label class="block-table mb1 mb0-last">
<button class="preset-button cbox tone-check shadow-raised shadow-ring align-middle" type="button" role="checkbox" aria-checked="true"></button>
<span class="ml1 line-passing size-body align-middle">Lumber</span>
</label>
<label class="block-table mb1 mb0-last">
<button class="preset-button cbox tone-check shadow-raised shadow-ring align-middle" type="button" role="checkbox" aria-checked="true"></button>
<span class="ml1 line-passing size-body align-middle">Metal</span>
</label>
<label class="block-table mb1 mb0-last">
<button class="preset-button cbox tone-check shadow-raised shadow-ring align-middle" type="button" role="checkbox" aria-checked="false"></button>
<span class="ml1 line-passing size-body align-middle">Paper</span>
</label>
</fieldset>
</form>
</figure>
<figure class="m-auto" id="radio">
<h2 class="font-l m0 mb1">
<a href="#radio" data-structure="UnderAll round-medium" data-paint="MattePurple outline-none focus-g10">Radio</a>
</h2>
<form class="preset-box mb3">
<fieldset class="preset-box">
<legend class="preset-box">Radio states</legend>
<div class="mb1"></div>
<input class="preset-button rdio tone-check shadow-raised shadow-ring" type="radio" name="citrus" value="enabled-checked" checked>
<input class="preset-button rdio tone-check shadow-raised shadow-ring" type="radio" name="citrus" value="enabled-unchecked">
<input class="preset-button rdio tone-check shadow-raised shadow-ring" type="radio" name="flavor" value="disabled-checked" checked disabled>
<input class="preset-button rdio tone-check shadow-raised shadow-ring" type="radio" name="flavor" value="disabled-unchecked" disabled>
</fieldset>
</form>
</figure>
<figure class="m-auto" id="radiogroup">
<h2 class="font-l m0 mb1">
<a href="#radiogroup" data-structure="UnderAll round-medium" data-paint="MattePurple outline-none focus-g10">Radiogroup</a>
</h2>
<form class="preset-box mb3">
<fieldset class="preset-box">
<legend class="preset-box font-b">Material</legend>
<div class="mb1"></div>
<label class="block-table mb1 mb0-last">
<input class="preset-button rdio tone-check shadow-raised shadow-ring align-middle" type="radio" name="material" value="lumber">
<span class="ml1 line-passing size-body align-middle">Lumber</span>
</label>
<label class="block-table mb1 mb0-last">
<input class="preset-button rdio tone-check shadow-raised shadow-ring align-middle" type="radio" name="material" value="metal" checked>
<span class="ml1 line-passing size-body align-middle">Metal</span>
</label>
<label class="block-table mb1 mb0-last">
<input class="preset-button rdio tone-check shadow-raised shadow-ring align-middle" type="radio" name="material" value="paper">
<span class="ml1 line-passing size-body align-middle">Paper</span>
</label>
</fieldset>
</form>
</figure>
</section>
<section class="p2 mb3" id="dropdowns">
<h2 class="font-l m0 mb1">
<a href="#dropdowns" data-structure="UnderAll round-medium" data-paint="MattePurple outline-none focus-g10">Dropdowns</a>
</h2>
<a id="optionbox" class="font-collapse">#optionbox => #opdown</a>
<figure id="opdown">
<figcaption class="m0 mb3">
<h3 class="m0 font-inherit weight-semibold">
<a href="#opdown" class="tone-link shadow-ring round-medium">Opdown</a>
</h3>
<ul>
<li class="m1">Box uses <a class="tone-link shadow-ring round-medium" href="https://www.w3.org/TR/wai-aria-1.1/#listbox">role=listbox</a> and <a class="tone-link shadow-ring round-medium" href="https://www.w3.org/TR/wai-aria-1.1/#aria-multiselectable">aria-multiselectable</a>=false|true
<li class="m1">Box uses <a class="tone-link shadow-ring round-medium" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex=0</a> for focus support
<li class="m1">Options use <a class="tone-link shadow-ring round-medium" href="https://www.w3.org/TR/wai-aria-1.1/#option">role=option</a> and <a class="tone-link shadow-ring round-medium" href="https://www.w3.org/TR/wai-aria-1.1/#aria-selected">aria-selected</a>
<li class="m1">JavaScript <a class="tone-link shadow-ring round-medium" href="https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox">must manage keyboard interaction</a>
<li class="m1">Options truncate via CSS. Box overflow-y is auto
<li class="m1">CSS forthcoming: shadows, max-height, z-index, coloring class
</ul>
</figcaption>
<div
data-structure="OpdownWIP"
data-paint="ggg-white ccc-black lift-f30"
aria-disabled="false"
aria-label="Housewraps"
aria-multiselectable="false"
aria-required="false"
role="listbox"
tabindex="0"
>
<div data-structure="OptionHF" data-paint="ggg-white c-black" role="option" aria-selected="false">Asphalt felt paper</div>
<div data-structure="OptionHF" data-paint="ggg-blue-500 c-white" role="option" aria-selected="true">Micro-perforated cross-lapped films</div>
<div data-structure="OptionHF" data-paint="ggg-white c-black" role="option" aria-selected="false">Films laminated to spunbond nonwovens</div>
<div data-structure="OptionHF" data-paint="ggg-white c-black" role="option" aria-selected="false">Films laminated or coated to polypropylene wovens</div>
<div data-structure="OptionHF" data-paint="ggg-white c-black" role="option" aria-selected="false">Drainable housewraps</div>
</div>
</figure>
<figure class="mt4" id="pillbox">
<figcaption class="m0 mb3">
<h3 class="m0 font-inherit weight-semibold"><a class="tone-link shadow-ring round-medium" href="#pillbox">Pillbox</a></h3>
<ul>
<li class="m1"><b>role</b> may be either <a class="tone-link shadow-ring round-medium" href="https://www.w3.org/TR/wai-aria-1.1/#textbox">textbox</a> or <a class="tone-link shadow-ring round-medium" href="https://www.w3.org/TR/wai-aria-1.1/#searchbox">searchbox</a>
<li class="m1">Defaults to <a class="tone-link shadow-ring round-medium" href="https://www.w3.org/TR/wai-aria-1.1/#aria-autocomplete">aria-autocomplete</a>=none
<li class="m1">Suitable as <a class="tone-link shadow-ring round-medium" href="#autocomplete">#autocomplete</a> input by specifying <a class="tone-link shadow-ring round-medium" href="https://www.w3.org/TR/wai-aria-1.1/#aria-autocomplete">aria-autocomplete</a>=list
<li class="m1">Uses <a class="tone-link shadow-ring round-medium" href="https://www.w3.org/TR/wai-aria-1.1/#aria-multiline">aria-multiline</a>=false for compatibility with usage in <a class="tone-link shadow-ring round-medium" href="https://www.w3.org/TR/wai-aria-1.1/#combobox">combobox</a>
<li class="m1">Uses <a class="tone-link shadow-ring round-medium" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex=0</a> for focus support
<li class="m1">Supports
<a class="tone-link shadow-ring round-medium" href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>
<a class="tone-link shadow-ring round-medium" href="https://www.w3.org/TR/wai-aria-1.1/#aria-invalid">aria-invalid</a>
<a class="tone-link shadow-ring round-medium" href="https://www.w3.org/TR/wai-aria-1.1/#aria-required">aria-required</a>
etc
<li class="m1">Refer to <a class="tone-link shadow-ring round-medium" href="#pill">#pill</a> for details about pills
<li class="m1">CSS forthcoming: unclipping descenders, spacing finetuning
</ul>
</figcaption>
<div
aria-autocomplete="none"
aria-label="People"
aria-disabled="false"
aria-invalid="false"
aria-multiline="false"
aria-required="false"
class="preset-box block border-1px border-solid round-medium resize-none ox-hidden oy-auto shadow-ring tone-validate pt1 pl1"
role="textbox"
style="max-width: 33rem"
tabindex="0">
<button
aria-label="Delete"
class="align-middle preset-button p0 pl1 line-initial size-body round-medium border pointer fill-current shadow-ring tone-pill border-none overflow-hidden ws-nowrap width-fit mr1 mb1">
<span class="inline-block align-middle mr-auto overflow-hidden overflow-dots ws-nowrap" style="max-width: 8rem">hello@example.com</span>
<svg class="overflow-hidden align-middle ml-auto" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path fill="currentColor" d="M17.7803,16.7197 C18.0703,17.0097 18.0703,17.4907 17.7803,17.7807 C17.6403,17.9197 17.4403,17.9997 17.2503,17.9997 C17.0603,17.9997 16.8603,17.9197 16.7203,17.7807 L12.0003,13.0597 L7.2803,17.7807 C6.9903,18.0707 6.5093,18.0707 6.2203,17.7807 C5.9303,17.4907 5.9303,17.0097 6.2203,16.7197 L10.9403,11.9997 L6.2203,7.2807 C5.9303,6.9907 5.9303,6.5097 6.2203,6.2197 C6.3603,6.0797 6.5603,5.9997 6.7503,5.9997 C6.9403,5.9997 7.1403,6.0797 7.2803,6.2197 L12.0003,10.9407 L16.7203,6.2197 C16.8603,6.0797 17.0603,5.9997 17.2503,5.9997 C17.4403,5.9997 17.6403,6.0797 17.7803,6.2197 C18.0703,6.5097 18.0703,6.9907 17.7803,7.2807 L13.0603,11.9997 L17.7803,16.7197 Z"/>
</svg>
</button>
<button
aria-label="Delete"
class="align-middle preset-button p0 pl1 line-initial size-body round-medium border pointer fill-current shadow-ring tone-pill border-none overflow-hidden ws-nowrap width-fit mr1 mb1">
<span class="inline-block align-middle mr-auto overflow-hidden overflow-dots ws-nowrap" style="max-width: 8rem">doe@example.com</span>
<svg class="overflow-hidden align-middle ml-auto" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path fill="currentColor" d="M17.7803,16.7197 C18.0703,17.0097 18.0703,17.4907 17.7803,17.7807 C17.6403,17.9197 17.4403,17.9997 17.2503,17.9997 C17.0603,17.9997 16.8603,17.9197 16.7203,17.7807 L12.0003,13.0597 L7.2803,17.7807 C6.9903,18.0707 6.5093,18.0707 6.2203,17.7807 C5.9303,17.4907 5.9303,17.0097 6.2203,16.7197 L10.9403,11.9997 L6.2203,7.2807 C5.9303,6.9907 5.9303,6.5097 6.2203,6.2197 C6.3603,6.0797 6.5603,5.9997 6.7503,5.9997 C6.9403,5.9997 7.1403,6.0797 7.2803,6.2197 L12.0003,10.9407 L16.7203,6.2197 C16.8603,6.0797 17.0603,5.9997 17.2503,5.9997 C17.4403,5.9997 17.6403,6.0797 17.7803,6.2197 C18.0703,6.5097 18.0703,6.9907 17.7803,7.2807 L13.0603,11.9997 L17.7803,16.7197 Z"/>
</svg>
</button>
<button
aria-label="Delete"
class="align-middle preset-button p0 pl1 line-initial size-body round-medium border pointer fill-current shadow-ring tone-pill border-none overflow-hidden ws-nowrap width-fit mr1 mb1">
<span class="inline-block align-middle mr-auto overflow-hidden overflow-dots ws-nowrap" style="max-width: 8rem">looonnngggggggggggggggggggggggggggggggg@example.com</span>
<svg class="overflow-hidden align-middle ml-auto" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path fill="currentColor" d="M17.7803,16.7197 C18.0703,17.0097 18.0703,17.4907 17.7803,17.7807 C17.6403,17.9197 17.4403,17.9997 17.2503,17.9997 C17.0603,17.9997 16.8603,17.9197 16.7203,17.7807 L12.0003,13.0597 L7.2803,17.7807 C6.9903,18.0707 6.5093,18.0707 6.2203,17.7807 C5.9303,17.4907 5.9303,17.0097 6.2203,16.7197 L10.9403,11.9997 L6.2203,7.2807 C5.9303,6.9907 5.9303,6.5097 6.2203,6.2197 C6.3603,6.0797 6.5603,5.9997 6.7503,5.9997 C6.9403,5.9997 7.1403,6.0797 7.2803,6.2197 L12.0003,10.9407 L16.7203,6.2197 C16.8603,6.0797 17.0603,5.9997 17.2503,5.9997 C17.4403,5.9997 17.6403,6.0797 17.7803,6.2197 C18.0703,6.5097 18.0703,6.9907 17.7803,7.2807 L13.0603,11.9997 L17.7803,16.7197 Z"/>
</svg>
</button>
<button
aria-label="Delete"
class="align-middle preset-button p0 pl1 line-initial size-body round-medium border pointer fill-current shadow-ring tone-pill border-none overflow-hidden ws-nowrap width-fit mr1 mb1">
<span class="inline-block align-middle mr-auto overflow-hidden overflow-dots ws-nowrap" style="max-width: 8rem">chip@example.com</span>
<svg class="overflow-hidden align-middle ml-auto" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path fill="currentColor" d="M17.7803,16.7197 C18.0703,17.0097 18.0703,17.4907 17.7803,17.7807 C17.6403,17.9197 17.4403,17.9997 17.2503,17.9997 C17.0603,17.9997 16.8603,17.9197 16.7203,17.7807 L12.0003,13.0597 L7.2803,17.7807 C6.9903,18.0707 6.5093,18.0707 6.2203,17.7807 C5.9303,17.4907 5.9303,17.0097 6.2203,16.7197 L10.9403,11.9997 L6.2203,7.2807 C5.9303,6.9907 5.9303,6.5097 6.2203,6.2197 C6.3603,6.0797 6.5603,5.9997 6.7503,5.9997 C6.9403,5.9997 7.1403,6.0797 7.2803,6.2197 L12.0003,10.9407 L16.7203,6.2197 C16.8603,6.0797 17.0603,5.9997 17.2503,5.9997 C17.4403,5.9997 17.6403,6.0797 17.7803,6.2197 C18.0703,6.5097 18.0703,6.9907 17.7803,7.2807 L13.0603,11.9997 L17.7803,16.7197 Z"/>
</svg>
</button>
<input
aria-label="Add"
class="align-middle preset-input p0 border-none font-os font-b round-medium outline-none bg-transparent c-inherit mr1 mb1"
placeholder="team@example.com"
type="email"
value />
</div>
</figure>
<figure class="mt4" id="dropdown">
<figcaption class="m0 mb3">
<h3 class="m0 font-inherit weight-semibold">
<a class="tone-link shadow-ring round-medium" href="#dropdown">Dropdown</a>
</h3>
<ul>
<li class="m1">Combines
<a class="tone-link shadow-ring round-medium" href="#disclosure">#disclosure</a> +
<a class="tone-link shadow-ring round-medium" href="#optionbox">#optionbox</a>
<li class="m1">State difference
<p class="m1"><b>Closed:</b> button is [aria-expanded=false] and listbox is [hidden]
<p class="m1"><b>Open:</b> button is [aria-expanded=true] and listbox is :not([hidden])
<p class="m1">TBD if SVG will change via [path] or [points] or CSS
<li class="m1">Sizeable by part or container via max-width
<li class="m1">Sizeable by part or container via max-width
<li class="m1">Wrappable in fieldset for semantic grouping or for disabling as whole
<li class="m1">CSS forthcoming: trigger layout, positioning, z-index, svg change, TBD some styles
</ul>
</figcaption>
<fieldset class="preset-box border-none" style="max-width: 20rem">
<button class="width-all preset-button inline-flex items-center p1 line-initial size-body round-medium border pointer fill-current shadow-ring tone-secondary" aria-expanded="true">
<span class="align-middle preset-box inline-block overflow-hidden overflow-dots ws-nowrap flex-auto pr3 text-left">Buildings</span>
<svg class="overflow-hidden -m1 ml0 mr0 shrink-0" width="24" height="24" viewBox="0 0 24 24">
<polygon fill="currentColor" points="16 13 8 13 12 9"/>
</svg>
</button>
<div class="m4px mb0"></div>
<div
data-structure="OpdownWIP"
data-paint="ggg-white ccc-black lift-f30"
aria-disabled="false"
aria-label="Buildings"
aria-multiselectable="false"
aria-required="false"
role="listbox"
tabindex="0">
<div data-structure="OptionHF" data-paint="ggg-white ccc-black" role="option" aria-selected="false">The Exchange 106</div>
<div data-structure="OptionHF" data-paint="ggg-blue-500 ccc-white" role="option" aria-selected="true">Central Park Tower</div>
<div data-structure="OptionHF" data-paint="ggg-white ccc-black" role="option" aria-selected="false">30 Hudson Yards</div>
<div data-structure="OptionHF" data-paint="ggg-white ccc-black" role="option" aria-selected="false">555 California Street</div>
</div>
</fieldset>
</figure>
<figure class="mt4" id="autocomplete">
<figcaption class="m0 mb3">
<h3 class="m0 font-inherit weight-semibold">
<a class="tone-link shadow-ring round-medium" href="#autocomplete">Autocomplete</a>
</h3>
<ul>
<li class="m1">Uses <a class="tone-link shadow-ring round-medium" href="https://www.w3.org/TR/wai-aria-1.1/#combobox">role=combobox</a> containing input and <a class="tone-link shadow-ring round-medium" href="#optionbox">role=listbox</a>
<li class="m1">Disable ARIA via divs via aria-disabled="true"
<li class="m1">Disable HTML input via disabled=""
<li class="m1">Disable via the parent fieldset when applicable for both semantic and CSS sake
<li class="m1">CSS forthcoming: z-index, TBD about shadow behavior
</ul>
</figcaption>
<div
aria-disabled="false"
aria-expanded="false"
data-structure="preset-box round-medium"
role="combobox"
style="max-width: 20rem">
<input
aria-autocomplete="list"
aria-label="Buildings"
aria-invalid="false"
class="preset-input block width-all p1 font-os font-b round-medium border shadow-ring tone-validate"
type="text"
value="">
<div class="m4px mb0"></div>
<div
data-structure="OpdownWIP"
data-paint="ggg-white ccc-black lift-f30"
aria-disabled="false"
aria-label="Buildings"
aria-multiselectable="false"
aria-required="false"
class="preset-box ox-hidden oy-auto round-medium shadow-raised shadow-ring mt2"
role="listbox"
tabindex="0">
<div data-structure="OptionHF" data-paint="ggg-white ccc-black" role="option" aria-selected="false">The Exchange 106</div>
<div data-structure="OptionHF" data-paint="ggg-blue-500 ccc-white" role="option" aria-selected="true">Central Park Tower</div>
<div data-structure="OptionHF" data-paint="ggg-white ccc-black" role="option" aria-selected="false">30 Hudson Yards</div>
<div data-structure="OptionHF" data-paint="ggg-white ccc-black" role="option" aria-selected="false">555 California Street</div>
</div>
</div>
</figure>
</section>
<figure class="mt4" id="profile">
<figcaption class="m0 mb3">
<h3 class="m0 font-inherit weight-semibold">
<a class="tone-link shadow-ring round-medium" href="#profile">Profile</a>
</h3>
</figcaption>
<h3 data-structure="FontXS">Groups</h3>
<article
data-structure="preset-box flex items-center overflow-hidden"
data-paint="ggg-white ccc-black"
style="max-width: 288px"
>
<div
data-structure="preset-box round-circle flex-none min-zero m2"
data-paint="ggg-blue-500 ccc-white"
style="width: 2.25rem; height: 2.25rem"
>
</div>
<div
data-structure="preset-box round-medium flex-auto min-zero pr2"
data-paint="ggg-white ccc-black"
>
<h3 data-structure="preset-box FontB flex">
<span data-structure="TruncateBox block">Collaborators</span>
<span data-structure="block flex-none ml1">(12)</span>
</h3>
<div
data-paint="ggg-white ccc-silver"
data-structure="TruncateBox FontC block"
>
collaborators@example.com
</div>
</div>
</article>
<article
data-structure="preset-box flex items-center overflow-hidden"
data-paint="ggg-white ccc-black"
style="max-width: 288px"
>
<div
data-structure="preset-box round-circle flex-none min-zero m2"
data-paint="ggg-blue-500 ccc-white"
style="width: 2.25rem; height: 2.25rem"
>
</div>
<div
data-structure="preset-box round-medium flex-auto min-zero pr2"
data-paint="ggg-white ccc-black"
>
<h3 data-structure="preset-box FontB flex">
<span data-structure="TruncateBox block">Elongated collaboration squad</span>
<span data-structure="block flex-none ml1">(21)</span>
</h3>
<div
data-paint="ggg-white ccc-silver"
data-structure="TruncateBox FontC block"
>
elongatedcollaborationsquad@example.com
</div>
</div>
</article>
<h3 data-structure="FontXS">People</h3>
<article
data-structure="preset-box flex items-center overflow-hidden"
data-paint="ggg-white ccc-black"
style="max-width: 288px"
>
<div
data-structure="preset-box round-circle flex-none min-zero m2"
data-paint="ggg-blue-500 ccc-white"
style="width: 2.25rem; height: 2.25rem"
>
</div>
<div
data-structure="preset-box round-medium flex-auto min-zero pr2"
data-paint="ggg-white ccc-black"
>
<h3 data-structure="preset-box FontB flex">
<span data-structure="TruncateBox block">Jane Doe</span>
<span data-structure="block flex-none ml1"></span>
</h3>
<div
data-paint="ggg-white ccc-silver"
data-structure="TruncateBox FontC block"
>
jane@example.com
</div>
</div>
</article>
<article
data-structure="preset-box flex items-center overflow-hidden"
data-paint="ggg-white ccc-black"
style="max-width: 288px"
>
<div
data-structure="preset-box round-circle flex-none min-zero m2"
data-paint="ggg-blue-500 ccc-white"
style="width: 2.25rem; height: 2.25rem"
>
</div>
<div
data-structure="preset-box round-medium flex-auto min-zero pr2"
data-paint="ggg-white ccc-black"
>
<h3 data-structure="preset-box FontB flex">
<span data-structure="TruncateBox block">Jane Doe names truncate regardless of count</span>
<span data-structure="block flex-none ml1"></span>
</h3>
<div
data-paint="ggg-white ccc-silver"
data-structure="TruncateBox FontC block"
>
elongatedemailaddress@example.com
</div>
</div>
</article>
</figure>
<section class="p2 mb3" id="fields">
<h2 class="font-l m0 mb1">
<a href="#fields" data-structure="UnderAll round-medium" data-paint="MattePurple outline-none focus-g10">Fields</a>
</h2>
<figure class="preset-box mb2" id="field-model">
<figcaption class="size-coarse m0 mb2">Model</figcaption>
<figure class="preset-box ml2">
Field (fieldset for grouping or disabling)
<figure class="preset-box ml2">
Tactile (label touch area)
<figure class="preset-box ml2">
Identify
</figure>
<figure class="preset-box ml2">
Clarify
</figure>
<figure class="preset-box ml2">
Input
</figure>
<figure class="preset-box ml2">
Feedback
</figure>
</figure>
</figure>
</figure>
<figure class="m-auto p2 border-box flex-auto" id="input-ready">
<figcaption class="size-coarse m0 mb2">Ready</figcaption>
<fieldset class="preset-box border-none" data-spacing>
<label class="preset-box block-table">
<b class="preset-box block-table font-b" data-spacing="mb1">Choose username</b>
<input
aria-invalid="false"
data-spacing="mb1 mb0-last"
data-structure="InputHF FontB"
data-paint="shadow-ring tone-validate"
value
>
</label>
</fieldset>
</figure>
<figure class="m-auto p2 border-box flex-auto" id="input-clarified">
<figcaption class="size-coarse m0 mb2">Clarified</figcaption>
<fieldset class="preset-box border-none" data-spacing>
<label class="preset-box block-table">
<b class="preset-box block-table font-b" data-spacing="mb1">Choose username</b>
<span class="preset-box block-table font-c c-slate" data-spacing="mb1">Be creative :)</span>
<input
aria-invalid="false"
data-spacing="mb1 mb0-last"
data-structure="InputHF FontB"
data-paint="shadow-ring tone-validate"
value
>
</label>
</fieldset>
</figure>
<figure class="m-auto p2 border-box flex-auto" id="input-error">
<figcaption class="size-coarse m0 mb2">Error</figcaption>
<fieldset class="preset-box border-none" data-spacing>
<label class="preset-box block-table">
<b class="preset-box block-table font-b" data-spacing="mb1">Choose username</b>
<input
aria-invalid="true"
data-spacing="mb1 mb0-last"
data-structure="InputHF FontB"
data-paint="shadow-ring tone-validate"
value="doe"
>
<strong class="preset-box block-table unbold line-single size-caption c-red-hard">Unavailable :(</strong>
</label>
</fieldset>
</figure>
<figure class="m-auto p2 border-box flex-auto" id="unitcap">
<figcaption class="size-coarse m0 mb2">Unitcap</figcaption>
<fieldset class="preset-box border-none" data-spacing>
<label class="preset-box block-table">
<b class="preset-box block-table unbold line-single size-body" data-spacing="mb1">Duration</b>
<span class="ws-nowrap width-fit">
<input
aria-invalid="false"
data-paint="focus-g10 outline-none tone-validate"
data-structure="PutHF static focus-relative"
data-spacing="mb1 mb0-last"
type="number"
value
><span
data-paint="focus-g10 outline-none ccc-steel bbb-smog"
data-structure="PutHF static focus-relative"
>Days</span>
</span>
</label>
</fieldset>
</figure>
<figure class="m-auto p2 border-box flex-auto" id="checkcap">
<figcaption class="size-coarse m0 mb2">Checkcap</figcaption>
<fieldset class="preset-box border-none" data-spacing>
<legend class="preset-box block-table font-b mb1">Limit</legend>
<span class="ws-nowrap width-fit mb1 mb0-last"><label
data-paint="focus-g10 outline-none tone-valid"
data-structure="PutLF p1 pl2 pr2 border static focus-relative"
><button
class="
align-descent
preset-button
cbox
tone-check
shadow-ring"
type="button"
role="checkbox"
aria-checked="true"
aria-label="Toggle"
></button
></label
><input
aria-invalid="false"
aria-label="Amount"
data-paint="focus-g10 outline-none tone-validate"
data-structure="PutLF p1 pl2 pr2 border static focus-relative"
type="number"
value
></span>
</fieldset>
</figure>
<figure class="m-auto p2 border-box flex-auto" id="icon-inside-input">
<figcaption class="size-coarse m0 mb2">
Icon inside input (WIP)
</figcaption>
<fieldset class="preset-box border-none" data-spacing>
<label
aria-invalid="false"
class="
preset-box
border-1px border-solid
block-table
font-inherit
tone-validate
relative
round-medium
mb1 mb0-last">
<span
aria-hidden="true"
class="
align-middle
preset-box
p1 pr0
font-os font-b
border-none
absolute
flex items-center
round-medium sharp-shelf meld-shelf weld-shelf
"
>
<svg class="align-middle overflow-hidden" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M6.5,10.25 C6.5,8.18 8.18,6.5 10.25,6.5 C12.32,6.5 14,8.18 14,10.25 C14,12.32 12.32,14 10.25,14 C8.18,14 6.5,12.32 6.5,10.25 M18.78,17.72 L14.45,13.39 C15.11,12.52 15.5,11.43 15.5,10.25 C15.5,7.35 13.15,5 10.25,5 C7.35,5 5,7.35 5,10.25 C5,13.15 7.35,15.5 10.25,15.5 C11.43,15.5 12.52,15.11 13.39,14.45 L17.72,18.78 C17.86,18.92 18.06,19 18.25,19 C18.44,19 18.64,18.92 18.78,18.78 C19.07,18.49 19.07,18.01 18.78,17.72"/>
</g>
</svg>
</span>
<input
aria-invalid="false"
data-spacing="mb1 mb0-last"
data-structure="InputHF FontB width-all relative meld-shelf weld-shelf border-none"
data-paint="shadow-raised shadow-ring c-inherit bg-transparent bc-transparent"
type="search"
style="padding-left: 3rem"
value>
</label>
<!-- Like above but with both aria-invalid instances set to true -->
<label
aria-invalid="true"
class="
preset-box
border-1px border-solid
block-table
font-inherit
tone-validate
relative
round-medium
mb1 mb0-last">
<span
aria-hidden="true"
class="
align-middle
preset-box
p1 pr0
font-os font-b
border-none
absolute
flex items-center
round-medium sharp-shelf meld-shelf weld-shelf
"
>
<svg class="align-middle overflow-hidden" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path fill="currentColor" d="M6.5,10.25 C6.5,8.18 8.18,6.5 10.25,6.5 C12.32,6.5 14,8.18 14,10.25 C14,12.32 12.32,14 10.25,14 C8.18,14 6.5,12.32 6.5,10.25 M18.78,17.72 L14.45,13.39 C15.11,12.52 15.5,11.43 15.5,10.25 C15.5,7.35 13.15,5 10.25,5 C7.35,5 5,7.35 5,10.25 C5,13.15 7.35,15.5 10.25,15.5 C11.43,15.5 12.52,15.11 13.39,14.45 L17.72,18.78 C17.86,18.92 18.06,19 18.25,19 C18.44,19 18.64,18.92 18.78,18.78 C19.07,18.49 19.07,18.01 18.78,17.72"/>
</g>
</svg>
</span>
<input
aria-invalid="true"
data-spacing="mb1 mb0-last"
data-structure="InputHF FontB width-all relative meld-shelf weld-shelf border-none"
data-paint="shadow-raised shadow-ring c-inherit bg-transparent bc-transparent"
type="search"
style="padding-left: 3rem"
value>
</label>
</fieldset>
</figure>
<figure class="m-auto p2 border-box flex-auto" id="textareas">
<figcaption class="size-coarse m0 mb2">Textareas are similar to inputs.</figcaption>
<div class="preset-box border-none" data-spacing="mb3" aria-disabled="false">
<label class="preset-box inline-block">
<b class="preset-box block-table font-b" data-spacing="mb1">Description</b>
<textarea
aria-invalid="false"
data-spacing="mb1 mb0-last"
data-structure="TextareaHF FontB"
data-paint="shadow-ring tone-validate"
cols="38"
rows="4"
>The textarea element represents a multiline plain text edit control for the element's raw value.</textarea>
</label>
</div>
</figure>
<figure class="m-auto p2 border-box flex-auto">
<figcaption class="size-coarse m0 mb2">Textareas may set <a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid" class="tone-link shadow-ring round-medium">aria-invalid</a> like inputs do.</figcaption>
<div class="preset-box border-none" data-spacing="mb3" aria-disabled="false">
<label class="preset-box inline-block">
<b class="preset-box block-table font-b" data-spacing="mb1">Description</b>
<span class="preset-box block-table font-c c-slate" data-spacing="mb1">Be precise :)</span>
<textarea
aria-invalid="true"
data-spacing="mb1 mb0-last"
data-structure="TextareaHF FontB"
data-paint="shadow-ring tone-validate"
cols="38"
rows="4"
>The textarea element represents a multiline plain text edit control for the element's raw value.</textarea>
<strong class="preset-box block-table unbold line-single size-caption c-red-hard">Missing details :(</strong>
</label>
</div>
</figure>
</section>
<section class="p2 mb3" id="loading">
<h2 class="font-l m0 mb1">
<a href="#loading" data-structure="UnderAll round-medium" data-paint="MattePurple outline-none focus-g10">Loading</a>
</h2>
<figure id="spinner">
<figcaption class="m0 mb3">
<h3 class="m0 font-inherit weight-semibold">
<a href="#spinner" class="tone-link shadow-ring round-medium">Spinner</a>
</h3>
<ul>
<li>Design team recommends 3 sizes as shown. 48x48 24x24 16x16
<li>Design team recommends that stroke-width computes differently per size
<ul>
<li>Target stroke-width computed value for 48x48 is 3px
<li>Target stroke-width computed value for 24x24 is 3px <em>or</em> 2.5px
<li>Target stroke-width computed value for 16x16 is 2px
</ul>
<li>CSS forthcoming: spinning
</ul>
<p>
</figcaption>
<figure class="preset-box mb2 mb0-last">
<figcaption class="mb1">
Here the 0 0 16 16 SVG is manually scaled to match the targets
</figcaption>
<span role="status" aria-label="...">
<svg class="overflow-hidden inline" width="48" height="48" viewBox="0 0 16 16" aria-hidden="true">
<g fill="none" fill-rule="evenodd" stroke-width="1" transform="translate(1 1)">
<circle cx="7" cy="7" r="7" stroke="#E6ECF0"/>
<circle cx="7" cy="7" r="7" stroke="#5194E7" stroke-dasharray="35 10000" stroke-linecap="round" transform="matrix(1 0 0 -1 0 14)"/>
</g>
</svg>
</span>
<span role="status" aria-label="...">
<svg class="overflow-hidden inline" width="24" height="24" viewBox="0 0 16 16" aria-hidden="true">
<g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
<circle cx="7" cy="7" r="7" stroke="#E6ECF0"/>
<circle cx="7" cy="7" r="7" stroke="#5194E7" stroke-dasharray="35 10000" stroke-linecap="round" transform="matrix(1 0 0 -1 0 14)"/>
</g>
</svg>
</span>
<span role="status" aria-label="...">
<svg class="overflow-hidden inline" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
<circle cx="7" cy="7" r="7" stroke="#E6ECF0"/>
<circle cx="7" cy="7" r="7" stroke="#5194E7" stroke-dasharray="35 10000" stroke-linecap="round" transform="matrix(1 0 0 -1 0 14)"/>
</g>
</svg>
</span>
</figure>
<figure class="preset-box mb2 mb0-last">
<figcaption class="mb1">
Raw SVGs from design. <a href="http://jenkins-output.planfront.net/structure/spinner-compare/">Demo'd at scale on VPN</a>
</figcaption>
<span role="status" aria-label="...">
<svg xmlns="http://www.w3.org/2000/svg" width="49" height="49" viewBox="0 0 49 49">
<g fill="none" fill-rule="evenodd" stroke-width="3" transform="translate(2 2)">
<circle cx="22.5" cy="22.5" r="22.5" stroke="#E6ECF0"/>
<circle cx="22.5" cy="22.5" r="22.5" stroke="#5194E7" stroke-dasharray="118 10000" stroke-linecap="round" transform="matrix(1 0 0 -1 0 45)"/>
</g>
</svg>
</span>
<span role="status" aria-label="...">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
<g fill="none" fill-rule="evenodd" stroke-width="3" transform="translate(2 2)">
<circle cx="10.5" cy="10.5" r="10.5" stroke="#E6ECF0"/>
<circle cx="10.5" cy="10.5" r="10.5" stroke="#5194E7" stroke-dasharray="54 10000" stroke-linecap="round" transform="matrix(1 0 0 -1 0 21)"/>
</g>
</svg>
</span>
<span role="status" aria-label="...">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
<circle cx="7" cy="7" r="7" stroke="#E6ECF0"/>
<circle cx="7" cy="7" r="7" stroke="#5194E7" stroke-dasharray="35 10000" stroke-linecap="round" transform="matrix(1 0 0 -1 0 14)"/>
</g>
</svg>
</span>
</figure>
<details class="preset-box mb2 mb0-last">
<summary
data-paint="TapHF p1 mb1"
data-structure="VividPurple"
>Show animation
</summary>
<span role="status" aria-label="...">
<svg data-structure="overflow-hidden inline AnimSpin"
width="48" height="48" viewBox="0 0 16 16" aria-hidden="true">
<g fill="none" fill-rule="evenodd" stroke-width="1" transform="translate(1 1)">
<circle cx="7" cy="7" r="7" stroke="#E6ECF0"/>
<circle cx="7" cy="7" r="7" stroke="#5194E7" stroke-dasharray="35 10000" stroke-linecap="round" transform="matrix(1 0 0 -1 0 14)"/>
</g>
</svg>
</span>
</details>
</figure>
</section>
<form
data-demo="DrawerR1"
data-paint="ggg-sleet bbb-smog ccc-black lift-f30"
data-structure="
preset-box flex flex-column
fixed top-0 right-0 bottom-0
FontB
tx100
"
data-open-union="tx0"
data-open-diff="tx100"
hidden
style="width: 380px;"
>
<header
data-paint="ggg-white bbb-smog ccc-black"
data-structure="
p2 pt1 pb1 preset-box flex-none flex items-center
relative
FontB
"
style="min-height: 48px"
>
<button
aria-label="X"
data-click="toggleDrawerR1"
data-paint="MatteMono"
data-structure="TapHF round-medium mr2 flex items-center"
type="button"
>
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
<path fill="currentColor" d="M17.7803,16.7197 C18.0703,17.0097 18.0703,17.4907 17.7803,17.7807 C17.6403,17.9197 17.4403,17.9997 17.2503,17.9997 C17.0603,17.9997 16.8603,17.9197 16.7203,17.7807 L12.0003,13.0597 L7.2803,17.7807 C6.9903,18.0707 6.5093,18.0707 6.2203,17.7807 C5.9303,17.4907 5.9303,17.0097 6.2203,16.7197 L10.9403,11.9997 L6.2203,7.2807 C5.9303,6.9907 5.9303,6.5097 6.2203,6.2197 C6.3603,6.0797 6.5603,5.9997 6.7503,5.9997 C6.9403,5.9997 7.1403,6.0797 7.2803,6.2197 L12.0003,10.9407 L16.7203,6.2197 C16.8603,6.0797 17.0603,5.9997 17.2503,5.9997 C17.4403,5.9997 17.6403,6.0797 17.7803,6.2197 C18.0703,6.5097 18.0703,6.9907 17.7803,7.2807 L13.0603,11.9997 L17.7803,16.7197 Z"/>
</svg>
</button>
<h1
data-paint="ccc-steel"
data-structure="TruncateBox FontXS mr1 mr0-last"
>
<span>
Drawer title will nicely truncate itself whether action is beside it or not
</span>
</h1>
<button
data-click="detachThis"
data-paint="MatteMono"
data-structure="TruncateBox TapHF round-medium mr1 flex items-center justify-end free-left shrink-0 relative"
type="button"
style="min-width: 76px"
>
Show actionless
</button>
</header>
<div
data-demo="ContentR1"
data-paint="ggg-white bbb-smog ccc-black"
data-structure="
p2 preset-box flex-1
relative
FontB
border-1px border-solid bl-none br-none
PaneY
"
>
Content goes here. Content scrolls vertically as needed. Scroll propagation may be stopped.
</div>
<div
data-paint="ggg-snow bbb-smog ccc-black"
data-structure="
p2 pt1 pb1 preset-box flex-none flex items-center justify-between
relative
"
style="min-height: 48px"
>
<button
data-click="toggleDrawerR1"
data-paint="GlazeBlue"
data-structure="TapHF p4px border-1px border-solid round-medium basis-6 flex-auto ml1 mr1 ml0-first mr0-last"
type="button"
>Cancel
</button>
<button
data-click="fillContentR1"
data-paint="VividBlue"
data-structure="TapHF p4px border-1px border-solid round-medium basis-6 flex-auto ml1 mr1 ml0-first mr0-last"
type="button"
>Fill
</button>
</div>
</form>
<script>
!function() {
var file = "demo.dist.js"
var stamp = Date.now()
var script = document.createElement("script")
script.src = file + "?stamp=" + stamp
document.body.appendChild(script)
}();
</script>