Prose

<dt-prose :size="100"> ... </dt-prose>
<dt-prose :size="200"> ... </dt-prose>
<dt-prose> ... </dt-prose>

<dt-prose :density="100"> ... </dt-prose>
<dt-prose> ... </dt-prose>
<dt-prose :density="300"> ... </dt-prose>

<dt-prose>
  <h1>Heading Level 1</h1>
  <p>This is a standard paragraph of body text. It contains enough words to wrap across multiple lines.</p>
  <h2>Heading Level 2</h2>
  <p>This is a standard paragraph of body text. It contains enough words to wrap across multiple lines.</p>
  <h3>Heading Level 3</h3>
  <p>This is a standard paragraph of body text. It contains enough words to wrap across multiple lines.</p>
  <h4>Heading Level 4</h4>
  <p>This is a standard paragraph of body text. It contains enough words to wrap across multiple lines.</p>
  <h5>Heading Level 5</h5>
  <p>This is a standard paragraph of body text.</p>
</dt-prose>

<dt-prose>
  <p><strong>Bold text</strong>, <em>italic text</em>, <strong><em>bold italic</em></strong>, and <u>underlined text</u>. Here is <s>strikethrough</s> for deleted content.</p>
  <p>Here is <a href="#">a standard link</a> and a <a href="#">link with <strong>bold</strong> inside</a>.</p>
  <p><code>inline code</code>, <kbd>Ctrl</kbd> + <kbd>S</kbd>, <mark>highlighted</mark>, <small>small</small>, <sub>subscript</sub> and <sup>superscript</sup>, and <abbr title="Abbreviation">abbr</abbr>.</p>
  <p><var>x</var> = <var>y</var> + <var>z</var> for variables, <samp>Error: file not found</samp> for sample output, <dfn>definition</dfn> for terms, and <q>an inline quotation</q>.</p>
</dt-prose>

<dt-prose>
  <ul>
    <li>First item in an unordered list</li>
    <li>Second item with more text to test wrapping</li>
    <li>Third item with nested list:
      <ul>
        <li>Nested item one</li>
        <li>Nested item two</li>
        <li>Deeply nested:
          <ul>
            <li>Third level item</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Fourth item back at the top level</li>
  </ul>
</dt-prose>

<dt-prose>
  <ol>
    <li>First step in a process</li>
    <li>Second step with more detail to test line wrapping</li>
    <li>Third step with a nested ordered list:
      <ol>
        <li>Sub-step one</li>
        <li>Sub-step two</li>
      </ol>
    </li>
    <li>Fourth step back at the top level</li>
  </ol>
</dt-prose>

<dt-prose>
  <ul>
    <li>Unordered item with an ordered sub-list:
      <ol>
        <li>Ordered sub-item one</li>
        <li>Ordered sub-item two</li>
      </ol>
    </li>
    <li>Another unordered item</li>
  </ul>
</dt-prose>

<dt-prose>
  <blockquote>
    <p>This is a single-paragraph blockquote.</p>
  </blockquote>
  <blockquote>
    <p>This is a multi-paragraph blockquote. The first paragraph introduces the idea.</p>
    <p>The second paragraph continues the thought.</p>
  </blockquote>
  <blockquote>
    <p>Good design is as little design as possible.</p>
    <footer>— <cite>Dieter Rams</cite>, Ten Principles of Good Design</footer>
  </blockquote>
</dt-prose>

<dt-prose>
    <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}
const message = greet('world');
console.log(message);</code></pre>
  </dt-prose>

<dt-prose>
  <table>
    <caption>Layout token scale</caption>
    <thead>
      <tr>
        <th>Token</th>
        <th>Value</th>
        <th>Pixels</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row"><code>--dt-layout-100</code></th>
        <td>4rem</td>
        <td>64px</td>
      </tr>
      <tr>
        <th scope="row"><code>--dt-layout-200</code></th>
        <td>8rem</td>
        <td>128px</td>
      </tr>
      <tr>
        <th scope="row"><code>--dt-layout-400</code></th>
        <td>16rem</td>
        <td>256px</td>
      </tr>
    </tbody>
  </table>
</dt-prose>

<dt-prose>
  <dl>
    <dt>Design token</dt>
    <dd>A named value that represents a design decision, such as a color, spacing unit, or font size.</dd>
    <dt>Component</dt>
    <dd>A reusable UI element that encapsulates structure, style, and behavior.</dd>
    <dt>Utility class</dt>
    <dd>A single-purpose CSS class that applies one specific style rule.</dd>
  </dl>
</dt-prose>

<dt-prose>
  <details>
    <summary>Click to expand for more information</summary>
    <p>This content is hidden by default and revealed when the user interacts with the summary element.</p>
    <ul>
      <li>Detail item one</li>
      <li>Detail item two</li>
    </ul>
  </details>
</dt-prose>

<dt-prose>
  <ul>
    <li><input type="checkbox" checked disabled> Design review complete</li>
    <li><input type="checkbox" checked disabled> Implementation merged</li>
    <li><input type="checkbox" disabled> Documentation published</li>
  </ul>
</dt-prose>