tests/html-elements.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="Skelet." property="Sēlekkt. Studio" content="https://selekkt.dk/skelet/v3/">

    <meta name="theme-color" content="#181818">

    <meta name="description" content="">
    <meta name="robots" content="index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1">

    <title>Skelet.css - HTML5 elements test page</title>
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="../css/skelet.css">
    <link rel="stylesheet" href="../css/skelet-tooltips.css">
    <style>#top { max-width: 900px; margin: 0 auto; } article { margin-top: 5rem; }</style>

    <script>document.documentElement.className='js'</script>
  </head>
  <body dark-mode class="all-states">
    <div id="top" class="page" role="document">
      <x-grid columns="3">
        <header role="banner" span="2">
          <h1 class="h2 text-normal" style="margin-block: 5rem">This is a test page that provides visual feedback on how <strong>Skelet.css</strong> styles common HTML elements.</h1>
        </header>
        <nav role="navigation" style="padding-block:5rem">
          <ul>
            <li>
              <a href="#text">Text</a>
              <ul>
                <li><a href="#text__headings">Headings</a></li>
                <li><a href="#text__paragraphs">Paragraphs</a></li>
                <li><a href="#text__blockquotes">Blockquotes</a></li>
                <li><a href="#text__lists">Lists</a></li>
                <li><a href="#text__hr">Horizontal rules</a></li>
                <li><a href="#text__tables">Tabular data</a></li>
                <li><a href="#text__code">Code</a></li>
                <li><a href="#text__inline">Inline elements</a></li>
                <li><a href="#text__comments">HTML Comments</a></li>
              </ul>
            </li>
            <li>
              <a href="#embedded">Embedded content</a>
              <ul>
                <li><a href="#embedded__images">Images</a></li>
                <li><a href="#embedded__audio">Audio</a></li>
                <li><a href="#embedded__video">Video</a></li>
                <li><a href="#embedded__canvas">Canvas</a></li>
                <li><a href="#embedded__meter">Meter</a></li>
                <li><a href="#embedded__progress">Progress</a></li>
                <li><a href="#embedded__svg">Inline SVG</a></li>
                <li><a href="#embedded__iframe">IFrames</a></li>
              </ul>
            </li>
            <li>
              <a href="#forms">Form elements</a>
              <ul>
                <li><a href="#forms__input">Input fields</a></li>
                <li><a href="#forms__select">Select menus</a></li>
                <li><a href="#forms__checkbox">Checkboxes</a></li>
                <li><a href="#forms__checkbox">Radio buttons</a></li>
                <li><a href="#forms__checkbox">Switch buttons</a></li>
                <li><a href="#forms__checkbox">Toggle tokens</a></li>
                <li><a href="#forms__textareas">Textareas</a></li>
                <li><a href="#forms__html5">HTML5 inputs</a></li>
                <li><a href="#forms__action">Action buttons</a></li>
              </ul>
            </li>
            <li>
              <a href="#cssgrid">Grid elements</a>
            </li>
          </ul>
        </nav>
      </x-grid>
      <hr>
      <main role="main">
        <section id="text">
          <header><h1>Text</h1></header>
          <article id="text__headings">
            <header>
              <h1>Headings</h1>
            </header>
            <div>
              <h1>Heading 1</h1>
              <h2>Heading 2</h2>
              <h3>Heading 3</h3>
              <h4>Heading 4</h4>
              <h5>Heading 5</h5>
              <h6>Heading 6</h6>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__paragraphs">
            <header><h1>Paragraphs</h1></header>
            <div>
              <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__blockquotes">
            <header><h1>Blockquotes</h1></header>
            <div>
              <blockquote>
                <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
                <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
                <cite><a href="#!">Said no one, ever.</a></cite>
              </blockquote>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__lists">
            <header><h1>Lists</h1></header>
            <div>
              <h3>Definition list</h3>
              <dl>
                <dt>Definition List Title</dt>
                <dd>This is a definition list division.</dd>
              </dl>
              <h3>Ordered List</h3>
              <ol>
                <li>List Item 1</li>
                <li>List Item 2</li>
                <li>List Item 3</li>
              </ol>
              <h3>Unordered List</h3>
              <ul>
                <li>List Item 1</li>
                <li>List Item 2</li>
                <li>List Item 3</li>
              </ul>
              <h3>Unordered List no bullet</h3>
              <ul class="no-style">
                <li>List Item 1</li>
                <li>List Item 2</li>
                <li>List Item 3</li>
              </ul>
              <h3>Unordered List no bullet and no styles inside</h3>
              <ul class="no-style inside">
                <li>List Item 1</li>
                <li>List Item 2</li>
                <li>List Item 3</li>
              </ul>
              <br>
              <h3>Inline</h3>
              <ul class="inline">
                <li>List Item 1</li>
                <li>List Item 2</li>
                <li>List Item 3</li>
              </ul>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__hr">
            <header><h1>Horizontal rules</h1></header>
            <div>
              <hr>
              <hr class="full">
              <hr class="gradient">
              <hr class="space">
              <span class="text-hr">hr w/ text</span>
              <span class="text-hrs">hr w/ text start</span>
              <span class="text-hre">hr w/ text end</span>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__tables">
            <header><h1>Tabular data</h1></header>
            <table>
              <caption>Table Caption</caption>
              <thead>
                <tr>
                  <th>Table Heading 1</th>
                  <th>Table Heading 2</th>
                  <th>Table Heading 3</th>
                  <th>Table Heading 4</th>
                  <th>Table Heading 5</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <th>Table Footer 1</th>
                  <th>Table Footer 2</th>
                  <th>Table Footer 3</th>
                  <th>Table Footer 4</th>
                  <th>Table Footer 5</th>
                </tr>
              </tfoot>
              <tbody>
                <tr>
                  <td>Table Cell 1</td>
                  <td>Table Cell 2</td>
                  <td>Table Cell 3</td>
                  <td>Table Cell 4</td>
                  <td>Table Cell 5</td>
                </tr>
                <tr>
                  <td>Table Cell 1</td>
                  <td>Table Cell 2</td>
                  <td>Table Cell 3</td>
                  <td>Table Cell 4</td>
                  <td>Table Cell 5</td>
                </tr>
                <tr>
                  <td>Table Cell 1</td>
                  <td>Table Cell 2</td>
                  <td>Table Cell 3</td>
                  <td>Table Cell 4</td>
                  <td>Table Cell 5</td>
                </tr>
                <tr>
                  <td>Table Cell 1</td>
                  <td>Table Cell 2</td>
                  <td>Table Cell 3</td>
                  <td>Table Cell 4</td>
                  <td>Table Cell 5</td>
                </tr>
              </tbody>
            </table>

            <h3>Sticky head</h3>
            <p>If sticky head or foot is active the table will overflow on smaller screens.</p>
            <br>
              <table class="is-sticky-head">
                <thead>
                  <tr>
                    <th>Header Cell</th>
                    <th>Header Cell</th>
                    <th>Header Cell</th>
                    <th>Header Cell</th>
                    <th>Header Cell</th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <th>Footer Cell</th>
                    <th>Footer Cell</th>
                    <th>Footer Cell</th>
                    <th>Footer Cell</th>
                    <th>Footer Cell</th>
                  </tr>
                </tfoot>
                <tbody>
                  <tr>
                    <td>Row Header</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                  </tr>
                  <tr>
                    <td>Row Header</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                  </tr>
                  <tr>
                    <td>Row Header</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                  </tr>
                  <tr>
                    <td>Row Header</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                  </tr>
                  <tr>
                    <td>Row Header</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                  </tr>
                  <tr>
                    <td>Row Header</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                  </tr>
                  <tr>
                    <td>Row Header</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                  </tr>
                  <tr>
                    <td>Row Header</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                  </tr>
                  <tr>
                    <td>Row Header</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                  </tr>
                  <tr>
                    <td>Row Header</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                    <td>Cell Data</td>
                  </tr>
                </tbody>
              </table>

            <h3>No head</h3>

            <table>
              <tbody>
                <tr>
                  <td>Table Cell 1</td>
                  <td>Table Cell 2</td>
                  <td>Table Cell 3</td>
                  <td>Table Cell 4</td>
                  <td>Table Cell 5</td>
                </tr>
                <tr>
                  <td>Table Cell 1</td>
                  <td>Table Cell 2</td>
                  <td>Table Cell 3</td>
                  <td>Table Cell 4</td>
                  <td>Table Cell 5</td>
                </tr>
                <tr>
                  <td>Table Cell 1</td>
                  <td>Table Cell 2</td>
                  <td>Table Cell 3</td>
                  <td>Table Cell 4</td>
                  <td>Table Cell 5</td>
                </tr>
                <tr>
                  <td>Table Cell 1</td>
                  <td>Table Cell 2</td>
                  <td>Table Cell 3</td>
                  <td>Table Cell 4</td>
                  <td>Table Cell 5</td>
                </tr>
              </tbody>
            </table>

            <h3>No foot</h3>            

            <p>
            <table>
              <thead>
                <tr>
                  <th>First name</th>
                  <th>Last name</th>
                  <th>Email</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>John</td>
                  <td>Dorothy</td>
                  <td>Baby</td>
                </tr>
                <tr>
                  <td>Doe</td>
                  <td>Boe</td>
                  <td>Moe</td>
                </tr>
                <tr>
                  <td>john@doe.com</td>
                  <td>dorothy@boe.com</td>
                  <td>baby@moe.com</td>
                </tr>
              </tbody>
            </table>
          </p>

            <h3>is-striped</h3>            

            <p>
            <table class="is-striped">
              <thead>
                <tr>
                  <th>First name</th>
                  <th>Last name</th>
                  <th>Email</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>John</td>
                  <td>Dorothy</td>
                  <td>Baby</td>
                </tr>
                <tr>
                  <td>Doe</td>
                  <td>Boe</td>
                  <td>Moe</td>
                </tr>
                <tr>
                  <td>john@doe.com</td>
                  <td>dorothy@boe.com</td>
                  <td>baby@moe.com</td>
                </tr>
                <tr>
                  <td>john@doe.com</td>
                  <td>dorothy@boe.com</td>
                  <td>baby@moe.com</td>
                </tr>
                <tr>
                  <td>john@doe.com</td>
                  <td>dorothy@boe.com</td>
                  <td>baby@moe.com</td>
                </tr>
              </tbody>
            </table>
          </p>

            <h3>is-hover</h3>            

            <p>
            <table class="is-hover">
              <thead>
                <tr>
                  <th>First name</th>
                  <th>Last name</th>
                  <th>Email</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>John</td>
                  <td>Dorothy</td>
                  <td>Baby</td>
                </tr>
                <tr>
                  <td>Doe</td>
                  <td>Boe</td>
                  <td>Moe</td>
                </tr>
                <tr>
                  <td>john@doe.com</td>
                  <td>dorothy@boe.com</td>
                  <td>baby@moe.com</td>
                </tr>
              </tbody>
            </table>
          </p>

            <h3>Column borders</h3>            

            <p>
            <table class="has-borders">
              <tbody>
              <thead>
                <tr>
                  <th>First name</th>
                  <th>Last name</th>
                  <th>Email</th>
                </tr>
              </thead>
                <tr>
                  <td>John</td>
                  <td>Dorothy</td>
                  <td>Baby</td>
                </tr>
                <tr>
                  <td>Doe</td>
                  <td>Boe</td>
                  <td>Moe</td>
                </tr>
                <tr>
                  <td>john@doe.com</td>
                  <td>dorothy@boe.com</td>
                  <td>baby@moe.com</td>
                </tr>
              </tbody>
            </table>
          </p>

            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__code">
            <header><h1>Code</h1></header>
            <div>

            <p><kbd>`</kbd><kbd>1</kbd><kbd>2</kbd><kbd>3</kbd><kbd>4</kbd><kbd>5</kbd><kbd>6</kbd><kbd>7</kbd><kbd>8</kbd><kbd>9</kbd><kbd>0</kbd><kbd>-</kbd><kbd>=</kbd><kbd>Bkspc</kbd></p>

            <p><kbd>Tab</kbd><kbd>q</kbd><kbd>w</kbd><kbd>e</kbd><kbd>r</kbd><kbd>t</kbd><kbd>y</kbd><kbd>u</kbd><kbd>i</kbd><kbd>o</kbd><kbd>p</kbd><kbd>[</kbd><kbd>]</kbd><kbd>\</kbd></p>

            <p><kbd>Caps</kbd><kbd>a</kbd><kbd>s</kbd><kbd>d</kbd><kbd>f</kbd><kbd>g</kbd><kbd>h</kbd><kbd>j</kbd><kbd>k</kbd><kbd>l</kbd><kbd>;</kbd><kbd>'</kbd><kbd>Enter</kbd></p>

            <p><kbd>Shift</kbd><kbd>z</kbd><kbd>x</kbd><kbd>c</kbd><kbd>v</kbd><kbd>b</kbd><kbd>n</kbd><kbd>m</kbd><kbd>,</kbd><kbd>.</kbd><kbd>/</kbd><kbd>Shift</kbd></p>

            <p><kbd>Ctrl</kbd><kbd>⌥ Alt</kbd><kbd>⌘ Cmd</kbd><kbd style="min-width:215px">Space</kbd><kbd>⌘</kbd><kbd>⌥</kbd></p>

              <p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p>
              <p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
              <h2>Pre-formatted text</h2>
              <pre>P R E F O R M A T T E D T E X T
  ! " # $ % &amp; ' ( ) * + , - . /
  0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
  @ A B C D E F G H I J K L M N O
  P Q R S T U V W X Y Z [ \ ] ^ _
  ` a b c d e f g h i j k l m n o
  p q r s t u v w x y z { | } ~ </pre>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__inline">
            <header><h1>Inline elements</h1></header>
            <div>
              <p><a href="#!">This is a text link</a>.</p>
              <p><strong>Strong is used to indicate strong importance.</strong></p>
              <p><em>This text has added emphasis.</em></p>
              <p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
              <p>The <i>i element</i> is text that is offset from the normal text.</p>
              <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
              <p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
              <p><s>This text has a strikethrough</s>.</p>
              <p>Superscript<sup>®</sup>.</p>
              <p>Subscript for things like H<sub>2</sub>O.</p>
              <p><small>This small text is small for for fine print, etc.</small></p>
              <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
              <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
              <p><cite>This is a citation.</cite></p>
              <p>The <dfn>dfn element</dfn> indicates a definition.</p>
              <p>The <mark>mark element</mark> indicates a highlight.</p>
              <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
              <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__comments">
            <header><h1>HTML Comments</h1></header>
            <div>
              <p>There is comment here: <!--This comment should not be displayed--></p>
              <p>There is a comment spanning multiple tags and lines below here.</p>
              <!--<p><a href="#!">This is a text link. But it should not be displayed in a comment</a>.</p>
              <p><strong>Strong is used to indicate strong importance. But, it should not be displayed in a comment</strong></p>
              <p><em>This text has added emphasis. But, it should not be displayed in a comment</em></p>-->
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
        </section>
        <section id="embedded">
          <header><h1>Embedded content</h1></header>
          <article id="embedded__images">
            <header><h2>Images</h2></header>
            <div>
              <h3>No <code>&lt;figure&gt;</code> element</h3>
              <p><img src="https://placehold.co/600x600/7A43C4/FFFFFF?text=Skelet.css" alt="Image alt text"></p>
              <h3>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h3>
              <figure><img src="https://placehold.co/600x600/7A43C4/FFFFFF?text=Skelet.css" alt="Image alt text"></figure>
              <h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h3>
              <figure>
                <img src="https://placehold.co/600x600/7A43C4/FFFFFF?text=Skelet.css" alt="Image alt text">
                <figcaption>Here is a caption for this image.</figcaption>
              </figure>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__audio">
            <header><h2>Audio</h2></header>
            <div>
            <audio controls>
              <source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
            </audio>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__video">
            <header><h2>Video</h2></header>
            <div>
            <video controls>
              <source src="https://placehold.co/3840x2160.mp4?text=Skelet.css" type="video/mp4">
            Your browser does not support the video tag.
            </video>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__canvas">
            <header><h2>Canvas</h2></header>
            <div><canvas>canvas</canvas></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__meter">
            <header><h2>Meter</h2></header>
            <div><meter value="2" min="0" max="10">2 out of 10</meter></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__progress">
            <header><h2>Progress</h2></header>
            <div><progress>progress</progress></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__svg">
            <header><h2>Inline SVG</h2></header>
            <div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="embedded__iframe">
            <header><h2>IFrame</h2></header>
            <div><iframe src="index.html" height="300"></iframe></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
        </section>
        <section id="forms">
          <header><h1>Form elements</h1></header>
          <form>
            <fieldset id="forms__input">
              <legend>Input fields</legend>
              <p>
                <label for="input__notype">Input no type</label>
                <input id="input__notype" placeholder="No type Input">
              </p>
              <p>
                <label for="input__text">Text Input</label>
                <input id="input__text" type="text" placeholder="Text Input">
              </p>
              <p>
                <label for="input__password">Password</label>
                <input id="input__password" type="password" placeholder="Type your Password">
              </p>
              <p>
                <label for="input__webaddress">Web Address</label>
                <input id="input__webaddress" type="url" placeholder="http://yoursite.com">
              </p>
              <p>
                <label for="input__emailaddress">Email Address</label>
                <input id="input__emailaddress" type="email" placeholder="name@email.com">
              </p>
              <p>
                <label for="input__phone">Phone Number</label>
                <input id="input__phone" type="tel" placeholder="(999) 999-9999">
              </p>
              <p>
                <label for="input__search">Search</label>
                <input id="input__search" type="search" placeholder="Enter Search Term">
              </p>
              <p>
                <label for="input__text2">Number Input</label>
                <input id="input__text2" type="number" placeholder="Enter a Number">
              </p>
              <p>
                <label for="input__text3" class="error">Error</label>
                <input id="input__text3" class="is-red" type="text" placeholder="Text Input">
              </p>
              <p>
                <label for="input__text4" class="valid">Valid</label>
                <input id="input__text4" class="is-green" type="text" placeholder="Text Input">
              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__select">
              <legend>Select menus</legend>
              <p>
                <label for="select">Select</label>
                <select id="select">
                  <optgroup label="Option Group">
                    <option>Option One</option>
                    <option>Option Two</option>
                    <option>Option Three</option>
                  </optgroup>
                </select>
              </p>

              <p>
                <label for="myBrowser">Choose a browser from this list:</label>
                <input list="browsers" id="myBrowser" name="myBrowser">
                <datalist id="browsers">
                  <option value="Chrome"></option>
                  <option value="Firefox"></option>
                  <option value="Opera"></option>
                  <option value="Safari"></option>
                  <option value="Microsoft Edge"></option>
                </datalist>             
              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__checkbox">
              <legend>Checkboxes</legend>
<ul class="no-style">
  <li>
    <input id="c1" type="checkbox">
    <label for="c1">Checkbox</label>
  </li>
  <li>
    <input id="c2" type="checkbox" checked>
    <label for="c2">Checkbox</label>
  </li>
  <li>
    <input id="r1" type="radio" name="radio" value="1">
    <label for="r1">Radio</label>
  </li>
  <li>
    <input id="r2" type="radio" name="radio" value="2" checked>
    <label for="r2">Radio</label>
  </li>
  <li>
    <input id="s1" type="checkbox" class="switch">
    <label for="s1">Switch</label>
  </li>
  <li>
    <input id="s2" type="checkbox" class="switch" checked>
    <label for="s2">Switch</label>
  </li>
  <li><input id="c1" type="checkbox"></li>
  <li><input id="r1" type="radio" name="radio" value="1"></li>
  <li><input id="s1" type="checkbox" class="switch"></li>

  <li>
    <input id="c50" type="checkbox">
    <label for="c50">Checkbox</label>
  </li>

  <li>
    <x-flex wrap ai="center" style="gap:0">
      <span class="toggle-token">
          <label for="toggle-token-1">
              <input id="toggle-token-1" type="checkbox" name="toggleToken" value="toggleToken">
              <span>Token 1</span>
          </label>
      </span>
      <span class="toggle-token">
          <input id="toggle-token-2" type="checkbox" name="toggleToken" value="toggleToken">
          <label for="toggle-token-2"><span>Token 2</span></label>
      </span>
      <span class="toggle-token">
          <label for="toggle-token-3">
              <input id="toggle-token-3" type="checkbox" name="toggleToken" value="toggleToken" checked>
              <span>Token 3</span>
          </label>
      </span>
      <span class="toggle-token">
          <label for="toggle-token-4">
              <input id="toggle-token-4" type="checkbox" name="toggleToken" value="toggleToken">
              <span>Token 4</span>
          </label>
      </span>
    </x-flex>
  </li>

</ul>

<p class="text-hr">Disabled state</p>
<ul class="no-style">
  <li>
    <input id="c1d" type="checkbox" disabled>
    <label for="c1d">Checkbox</label>
  </li>
  <li>
    <input id="c2d" type="checkbox" checked disabled>
    <label for="c2d">Checkbox</label>
  </li>
  <li>
    <input id="r1d" type="radio" name="radiod" value="1" disabled>
    <label for="r1d">Radio</label>
  </li>
  <li>
    <input id="r2d" type="radio" name="radiod" value="2" checked disabled>
    <label for="r2d">Radio</label>
  </li>
  <li>
    <input id="s1d" type="checkbox" class="switch" disabled>
    <label for="s1d">Switch</label>
  </li>
  <li>
    <input id="s2d" type="checkbox" class="switch" checked disabled>
    <label for="s2d">Switch</label>
  </li>

  <li>
    <x-flex wrap ai="center" style="gap:0">
      <span class="toggle-token">
          <label for="toggle-token-1-dis">
              <input id="toggle-token-1-dis" type="radio" name="toggleToken" value="toggleToken" disabled>
              <span>Token 1</span>
          </label>
      </span>
      <span class="toggle-token">
          <input id="toggle-token-2-dis" type="radio" name="toggleToken" value="toggleToken" disabled>
          <label for="toggle-token-2-dis"><span>Token 2</span></label>
      </span>
      <span class="toggle-token">
          <label for="toggle-token-3-dis">
              <input id="toggle-token-3-dis" type="radio" name="toggleToken" value="toggleToken" disabled>
              <span>Token 3</span>
          </label>
      </span>
      <span class="toggle-token">
          <label for="toggle-token-4-dis">
              <input id="toggle-token-4-dis" type="radio" name="toggleToken" value="toggleToken" disabled checked>
              <span>Token 4</span>
          </label>
      </span>
    </x-flex>
  </li>
</ul>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__textareas">
              <legend>Textareas</legend>
              <p>
                <label for="textarea">Textarea</label>
                <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
              </p>
            </fieldset>
            <fieldset id="forms__textareas">
              <legend>Contact form</legend>

                <form>
                    <x-grid columns="8">
                        <x-cell span="1-4" span-s="row">
                            <label for="exampleEmailInput">Your email</label>
                            <input class="fullwidth" placeholder="example@example.com" id="exampleEmailInput" type="email">
                        </x-cell>

                        <x-cell span="5.." span-s="row">
                            <label for="exampleRecipientInput">Reply to</label>
                            <select class="fullwidth" id="exampleRecipientInput">
                                <option selected="" disabled="" value="Option 1">-- Select --</option>
                                <option value="Option 2">Sarude</option>
                                <option value="Option 3">Dancestorm</option>
                            </select>
                        </x-cell>
                    </x-grid>
                    <x-grid columns="1">
                        <x-cell span="row">
                            <label for="exampleMessage">Comment</label>
                            <textarea class="fullwidth" placeholder="Comment..." id="exampleMessage"></textarea>
                            <label class="agree-with-terms">
                                <input type="checkbox"><span>I agree with the term of use</span>
                            </label>
                        </x-cell>
                        <x-cell span="row" justify="start">
                            <input class="button is-green" value="Comment" type="submit">
                        </x-cell>
                    </x-grid>
                </form>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__html5">
              <legend>HTML5 inputs</legend>
              <p>
                <label for="ic">Color input</label>
                <input type="color" id="ic" value="#000000">
              </p>
              <p>
                <label for="fi">File input</label>
                <input id="fi" type="file">
              </p>
              <p>
                <label for="fii">File input multiple</label>
                <input id="fii" type="file" name="files[]" multiple>
              </p>
              <p>
                <label for="in">Number input</label>
                <input type="number" id="in" min="0" max="10" value="5">
              </p>
              <p>
                <label for="ir">Range input</label>
                <input type="range" id="ir" value="10">
              </p>
              <p>
                <label for="idd">Date input</label>
                <input type="date" id="idd" value="1970-01-01">
              </p>
              <p>
                <label for="idm">Month input</label>
                <input type="month" id="idm" value="1970-01">
              </p>
              <p>
                <label for="idw">Week input</label>
                <input type="week" id="idw" value="1970-W01">
              </p>
              <p>
                <label for="idt">Datetime input</label>
                <input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
              </p>
              <p>
                <label for="idtl">Datetime-local input</label>
                <input type="datetime-local" id="idtl" value="1970-01-01T00:00">
              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__action">
              <legend>Action buttons</legend>
              <p>
                  <button>Normal</button>
                  <button disabled>Button disabled</button>
                  <hr>
                  <input type="button" value="input button">
                  <input type="submit" value="input submit">
                  <input type="reset" value="input reset">
                  <input type="reset" value="input disabled" disabled>
                  <hr>
                  <button class="is-small">button small</button>
                  <button class="is-large">button large</button>
                  <hr>
                  <button>default</button>
                  <button class="text-capitalize">button text-capitalize</button>
                  <button class="text-uppercase">button text-uppercase</button>
                  <button class="text-lowercase">button text-lowercase</button>
                  <hr>
                  <button class="is-blank">button is-blank</button>
                  <button class="is-outline">button is-outline</button>
                  <button class="is-square">button is-square</button>
                  <button class="is-pill">button is-pill</button>

                  <button class="is-circle">5000</button>
                  <button class="is-circle has-icon"><i class="fas fa-bomb"></i></button>
                  <button class="is-circle has-icon"><i class="g-xcircle"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M15 9L9 15M9 9L15 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"></path></svg></i></button>

                  <button class="is-outline is-pill">button is-outline is-pill</button>
                  <hr>
                  <button class="is-loading"></button>
                  <button class="is-loading is-yellow"></button>
                  <button class="is-loading">loading</button>
                  <button class="is-loading is-outline is-small"></button>
                  <hr>
                  <button class="button has-icon">
                      <i class="fas fa-bold"></i>
                  </button>

                  <button class="button has-icon">
                      <i class="fab fa-github"></i>
                      <span>icon + text</span>
                  </button>

                  <button class="button has-icon">
                      <span>text + icon</span>
                      <i class="fab fa-github"></i>
                  </button>

                <button type="reset" class="is-circle has-icon">
                    <span class="visually-hidden">Close</span>
                    <i class="g-xcircle"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M15 9L9 15M9 9L15 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"></path></svg></i>
                </button>

                  <hr>
                  <button class="is-white">button is-white</button>
                  <button class="is-light">button is-light</button>
                  <button class="is-black">button is-black</button>
                  <button class="is-dark">button is-dark</button>
                  <hr>
                  <button class="is-primary">button primary</button>
                  <button class="is-blue">button is-blue</button>
                  <button class="is-green">button is-green</button>
                  <button class="is-yellow">button is-yellow</button>
                  <button class="is-red">button is-red</button>
                  <hr>
                  <button class="is-outline is-white">button is-outline is-white</button>
                  <button class="is-outline is-black">button is-outline is-black</button>
                  <button class="is-outline is-primary">button is-outline is-primary</button>
                  <button class="is-outline is-blue">button is-outline is-blue</button>
                  <button class="is-outline is-outline is-green">button is-outline is-green</button>
                  <button class="is-outline is-yellow">button is-outline is-yellow</button>
                  <button class="is-outline is-red">button is-outline is-red</button>
                  <hr>
                  <a href="" class="button">a.button</a>
                  <a href="" class="button disabled">a.button.disabled</a>
                  <a href="" class="button is-loading is-green">is-loading is-outline is-small</a>
              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
          </form>
        </section>

<fieldset id="stack">
    <legend>.stack</legend>
    <div class="stack">
        <input type="text" placeholder="Input">
        <button class="is-primary">Button</button>
    </div>
</fieldset>
<a href="#stack">url</a>

<style>
.stack.my-style { border: var(--inputBorderWidth) var(--inputBorderStyle) var(--inputBorderColor); border-radius: var(--inputRadius); }
.stack.my-style:focus-within { background: var(--inputBg); border-color: var(--inputActive) }
</style>
<fieldset id="stack-no-style">
    <legend>.stack.no-style</legend>
    <div class="stack no-style my-style">
        <input type="text" placeholder="Input" class="is-blank">
        <button class="is-primary">Button</button>
    </div>
</fieldset>
<a href="#stack-no-style">url</a>

<section id="presuffix">
<fieldset>
    <legend>Prefix and suffix</legend>
    <div class="stack presuffix">
        <input type="text" placeholder="https://selekkt.dk" class="is-blank">
        <span>/skelet/v3</span>
    </div>
    <code>class="stack presuffix"</code>
<br>
    <div class="stack no-style presuffix">
        <label for="full-url">https://</label>
        <input id="full-url" type="text" placeholder="selekkt.dk/skelet/v3" class="is-blank">
    </div>
    <code>class="stack no-style presuffix"</code>
<br>
    <div class="stack no-style presuffix">
        <label for="part-url">https://</label>
        <input id="part-url" type="text" placeholder="skelet" class="is-blank">
        <span>.dk</span>
    </div>
    <code>class="stack no-style presuffix"</code>
<br>
    <div class="stack no-style presuffix">
        <label for="searchbox"><i class="fa-solid fa-magnifying-glass"></i></label>
        <input id="searchbox" type="text" placeholder="Search" class="is-blank">
        <button class="text-normal">Clear</button>
    </div>
    <code>class="stack no-style presuffix"</code>
<br>
    <div class="stack no-style presuffix">
        <i class="fa-solid fa-magnifying-glass"></i>
        <input type="text" placeholder="Search" class="is-blank">
        <button class="text-uppercase"><i class="fa-regular fa-circle-xmark"></i></button>
    </div>
    <code>class="stack no-style presuffix"</code>
<br>
    <div class="stack no-style presuffix">
        <i class="fa-solid fa-magnifying-glass"></i>
        <input type="text" placeholder="Search" class="is-blank">
        <span class="is-loading"></span>
    </div>
    <code>class="stack no-style presuffix"</code>
</fieldset>
<a href="#presuffix">url</a>
</section>

           <div id="tooltips">
              <legend>Tooltips</legend>
                  <fieldset>
                      <legend>Position</legend>
                      <button data-tooltip="ziooo" tooltip-pos="up">Up</button>
                      <button data-tooltip="ziooo" tooltip-pos="down">Down</button>
                      <button data-tooltip="ziooo" tooltip-pos="left">Left</button>
                      <button data-tooltip="ziooo" tooltip-pos="right">Right</button>

                      <button data-tooltip="ziooo" tooltip-pos="up-left">Up left</button>
                      <button data-tooltip="ziooo" tooltip-pos="down-left">Down left</button>
                  </fieldset>

                  <fieldset>
                      <legend>Lenght</legend>

                      <span data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit." tooltip-length="medium" tooltip-pos="up">Medium Tooltip</span>

                      <button data-tooltip="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam exercitationem tempore excepturi inventore ea deleniti natus hic necessitatibus dolorum maxime." tooltip-pos="down">N/A</button>
                      <button data-tooltip="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam exercitationem tempore excepturi inventore ea deleniti natus hic necessitatibus dolorum maxime." tooltip-pos="down" tooltip-length="small">small</button>
                      <button data-tooltip="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam exercitationem tempore excepturi inventore ea deleniti natus hic necessitatibus dolorum maxime." tooltip-pos="down" tooltip-length="medium">medium</button>
                      <button data-tooltip="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam exercitationem tempore excepturi inventore ea deleniti natus hic necessitatibus dolorum maxime." tooltip-pos="down" tooltip-length="large">large</button>
                      <button data-tooltip="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam exercitationem tempore excepturi inventore ea deleniti natus hic necessitatibus dolorum maxime." tooltip-pos="down" tooltip-length="xlarge">xlarge</button>
                      <button data-tooltip="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam exercitationem tempore excepturi inventore ea deleniti natus hic necessitatibus dolorum maxime." tooltip-pos="down" tooltip-length="fit">Fit</button>
                  </fieldset>

                  <fieldset>
                      <legend>Other</legend>
                      <button data-tooltip="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam exercitationem tempore excepturi inventore ea deleniti natus hic necessitatibus dolorum maxime." tooltip-pos="down" tooltip-length="fit" tooltip-blunt>No animation</button>
                      <button data-tooltip="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam exercitationem tempore excepturi inventore ea deleniti natus hic necessitatibus dolorum maxime." tooltip-pos="down" tooltip-length tooltip-break>Break</button>
                  </fieldset>

                  <fieldset>
                      <legend>Visible by default</legend>
                      <button data-tooltip="ziooo" tooltip-pos="down-right">Top</button>
                      <button data-tooltip="ziooo" tooltip-pos="down">Down</button>
                      <button data-tooltip="ziooo" tooltip-pos="left">Left</button>
                      <button data-tooltip="ziooo" tooltip-pos="right">Right</button>
                  </fieldset>
            </div>

            <style>
                x-cell, #cssgrid span:not(.text-hr) { color: var(--white); padding: var(--padding); border-radius: var(--radius); }
            </style>

            <fieldset id="cssgrid">
                <legend>CSS Grid</legend>

                <x-grid columns="12" class="debug">
                  <x-cell span="1..">row</x-cell>

                  <x-cell span="1-2">1-2</x-cell>
                  <x-cell span="3..">3..</x-cell>

                  <x-cell span="1-4">1-4</x-cell>
                  <x-cell span="5..">5..</x-cell>

                  <x-cell span="1-5">1-5</x-cell>
                  <x-cell span="6..">6..</x-cell>

                  <x-cell span="1-6">1-6</x-cell>
                  <x-cell span="7..">7..</x-cell>

                  <x-cell span="1-7">1-7</x-cell>
                  <x-cell span="8..">8..</x-cell>

                  <x-cell span="1-8">1-8</x-cell>
                  <x-cell span="9..">9..</x-cell>
                </x-grid>

                <span class="text-hr">8 columns</span>

                <x-grid columns="8" class="debug">
                  <x-cell></x-cell>
                  <x-cell span="3">3</x-cell>
                  <x-cell></x-cell>
                  <x-cell span="7-8">7-8</x-cell>
                  <x-cell span="2+2">2+2</x-cell>
                  <x-cell span="5-8">5-8</x-cell>
                  <x-cell span="1-4">1-4</x-cell>
                  <x-cell span="6..">6..</x-cell>
                  <x-cell span="2..">2..</x-cell>
                  <x-cell span="4..">4..</x-cell>
                  <x-cell span="1-2">1-2</x-cell>
                  <x-cell span="4-5">4-5</x-cell>
                </x-grid>

                <span class="text-hr">6 columns</span>

                <x-grid columns="6" class="debug">
                  <x-cell span="2" span-s="row">span 2</x-cell>
                  <x-cell span="3-6" span-s="row">span 3-6</x-cell>
                  <x-cell span="1-2" span-s="1">span 1-2</x-cell>
                  <x-cell span="3.." span-s="2..">span 3..</x-cell>
                </x-grid>

                <span class="text-hr">Auto grid &mdash; columns="fill"</span>
                
                <x-grid columns="fill" class="debug">
                    <x-cell>Box 1</x-cell>
                    <x-cell>Box 2</x-cell>
                    <x-cell>Box 3</x-cell>
                    <x-cell>Box 4</x-cell>
                    <x-cell>Box 5</x-cell>
                    <x-cell>Box 6</x-cell>
                    <x-cell span="2">Box 7</x-cell>
                </x-grid>

                <span class="text-hr">Auto grid &mdash; columns="fit"</span>
                
                <x-grid columns="fit" class="debug">
                  <x-cell>Box 1</x-cell>
                  <x-cell>Box 2</x-cell>
                  <x-cell>Box 3</x-cell>
                  <x-cell>Box 4</x-cell>
                  <x-cell>Box 5</x-cell>
                  <x-cell>Box 6</x-cell>
                  <x-cell span="2">Box 7</x-cell>
                </x-grid>

                <span class="text-hr">Site layout</span>

                <x-grid columns="8" class="debug">
                  <x-cell span="row">Head</x-cell>
                  <x-cell span="1-5">Main</x-cell>
                  <x-cell span="6..">Sidebar</x-cell>
                  <x-cell span="row">Footer</x-cell>
                </x-grid>

                <span class="text-hr">Multidimensional grid</span>

                <x-grid class="debug" columns="10">
                  <x-cell span="1+2" span-y="1-3">cell 1</x-cell>
                  <x-cell span="3+2">cell 2</x-cell>
                  <x-cell span="5+4">cell 3</x-cell>
                  <x-cell span="9+2">cell 4</x-cell>

                  <x-cell span="3+4">cell 5</x-cell>
                  <x-cell span="7+4" span-y="2-3">cell 6</x-cell>
                  <x-cell span="3-6">cell 7</x-cell>
                </x-grid>

                <span class="text-hr">Div with [x-grid] and spans instead of x-cell</span>
                <div class="debug" x-grid align="stretch">
                  <span span="2">Box 1</span>
                  <span>Box 2</span>
                  <span>Box 3</span>

                  <span>Box 4</span>
                  <span span="2">Box 5</span>
                  <span>Box 6</span>

                  <span span="row">Box 7</span>
                </div>
            </fieldset>

            <fieldset class="flexbox">
              <legend>Flex</legend>

            <x-flex class="debug">
                <x-cell>Box 1</x-cell>
                <x-cell>Box 2</x-cell>
                <x-cell>Box 3</x-cell>
                <x-cell>Box 4</x-cell>
                <x-cell>Box 5</x-cell>
            </x-flex>

            <span class="text-hr">Flex with span="#"</span>

              <x-flex class="debug">
                  <x-cell span="2">span="2"</x-cell>
                  <x-cell>Box 2</x-cell>
                  <x-cell span="4">span="4"</x-cell>
                  <x-cell>Box 4</x-cell>
                  <x-cell>Box 5</x-cell>
              </x-flex>

              <span class="text-hr">Flex with .even</span>

              <x-flex jc="between" class="debug even">
                  <x-cell>Box 1</x-cell>
                  <x-cell>Box 2</x-cell>
                  <x-cell>Box 3</x-cell>
                  <x-cell>Box 4</x-cell>
                  <x-cell>Box 5</x-cell>
              </x-flex>

              <span class="text-hr">Flex with span="row"</span>

              <x-flex wrap="wrap" class="debug">
                  <x-cell span="row">span="row"</x-cell>
                  <x-cell>Box 2</x-cell>
                  <x-cell>Box 3</x-cell>
                  <x-cell>Box 4</x-cell>
                  <x-cell>Box 5</x-cell>
                  <x-cell span="3">span="3"</x-cell>
              </x-flex>

              <span class="text-hr">Flex with .fullflex</span>

              <x-flex wrap="wrap" class="debug">
                  <x-cell class="fullflex">.fullflex</x-cell>
                  <x-cell>Box 2</x-cell>
                  <x-cell>Box 3</x-cell>
                  <x-cell>Box 4</x-cell>
                  <x-cell>Box 5</x-cell>
                  <x-cell span="3">span="3"</x-cell>
              </x-flex>

            </fieldset>
    
      </main>
    </div>
    <style>
      #light {
        position: fixed;
        top: var(--margin);
        right: var(--margin);
        z-index: 999;
        cursor: pointer;
        aspect-ratio: 1/1;
        background: var(--color);
        height: 30px;
        border-radius: 100vw;
      }
    </style>
    <div id="light"></div>
  </body>
  <script>document.querySelector('#light').addEventListener("click", () => { document.body.toggleAttribute("dark-mode") }, false);</script>
</html>