@plangrid/structure

<!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