# nodes

id: docs:docs/components/ren-link.html
type: docs_page
name: ren-link docs
path: docs/components/ren-link.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Link — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .dx-vgrid { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
    .dx-vrow { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: start; }
    .dx-vrow-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding-top: var(--space-3); }
    .dx-vrow-items { padding: var(--space-3); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
    @media (max-width: 720px) { .dx-vrow { grid-template-columns: 1fr; gap: var(--space-2); } .dx-vrow-label { padding-top: 0; } }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html" aria-current="page">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Link</li></ol></nav>
        <p class="dx-kicker">Primitive</p>
        <h1>Link <span class="dx-api-badge dx-api-badge-css" title="Works without any JavaScript">CSS-only</span></h1>
        <p class="lede">Variants of <code>&lt;a&gt;</code> beyond the default — subtle, plain (no underline), destructive, with leading/trailing icon, standalone block. The base <code>&lt;a&gt;</code> uses the classless default; reach for <code>.ren-link</code> when you need one of the variants.</p>
      </header>
      <section class="dx-section" id="overview"><p class="dx-kicker">About</p><h2>Overview</h2><p>Most links should just be <code>&lt;a href&gt;</code> — the base classless styling already handles color, hover and focus. Use <code>.ren-link</code> when you specifically need one of the variants below.</p></section>
      <section class="dx-section" id="demo"><p class="dx-kicker">Live</p><h2>Demo</h2><div class="dx-demo"><div class="dx-demo-preview"><a href="#" class="ren-link">Primary link</a><a href="#" class="ren-link-subtle">Subtle</a><a href="#" class="ren-link-plain">Plain (no underline)</a><a href="#" class="ren-link-destructive">Destructive</a></div><pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;a href="/contact" class="ren-link"&gt;Get in touch&lt;/a&gt;
&lt;a href="/policy" class="ren-link-subtle"&gt;Privacy policy&lt;/a&gt;
&lt;a href="/delete" class="ren-link-destructive"&gt;Delete account&lt;/a&gt;</code></pre></div></section>
      <section class="dx-section" id="api"><p class="dx-kicker">Reference</p><h2>API</h2><table class="dx-api"><thead><tr><th>Class</th><th>Effect</th></tr></thead><tbody><tr><td><code class="dx-api-name">.ren-link</code></td><td>Standard link styling. Use when the inherited classless style needs explicit control.</td></tr><tr><td><code class="dx-api-name">.ren-link-subtle</code></td><td>Quieter — secondary text color, underline only on hover.</td></tr><tr><td><code class="dx-api-name">.ren-link-plain</code></td><td>No underline. Use inside cards or list rows where the whole row is clickable.</td></tr><tr><td><code class="dx-api-name">.ren-link-destructive</code></td><td>Danger color. For "Delete", "Cancel subscription", etc.</td></tr></tbody></table></section>
      <section class="dx-section" id="a11y"><p class="dx-kicker">Inclusive by default</p><h2>Accessibility</h2><ul><li>Always use a real <code>&lt;a href&gt;</code>. A clickable <code>&lt;span&gt;</code> is not a link.</li><li>Don't remove the underline from prose links — it's the primary affordance for color-blind users. Reserve <code>.ren-link-plain</code> for self-evident click targets like card surfaces.</li><li>Use descriptive link text. "Click here" tells a screen reader user nothing.</li></ul></section>
    </main>
  </div>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-menu.html
type: docs_page
name: ren-menu docs
path: docs/components/ren-menu.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: visible; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .dx-vgrid { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
    .dx-vrow { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: start; }
    .dx-vrow-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding-top: var(--space-3); }
    .dx-vrow-items { padding: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
    @media (max-width: 720px) { .dx-vrow { grid-template-columns: 1fr; gap: var(--space-2); } .dx-vrow-label { padding-top: 0; } }

    /* Static menu mock */
    .demo-menu {
      list-style: none; margin: 0; padding: var(--space-1);
      width: 240px;
      background: var(--color-surface-raised);
      border: 1px solid var(--color-border); border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
    }
    .demo-menu-item {
      display: flex; align-items: center; gap: var(--space-3);
      padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
      cursor: pointer; font-size: var(--text-sm);
    }
    .demo-menu-item:hover, .demo-menu-item[data-highlighted] { background: var(--color-fill); }
    .demo-menu-item-icon { width: 16px; height: 16px; color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; }
    .demo-menu-item-label { flex: 1; }
    .demo-menu-item-shortcut { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
    .demo-menu-item-danger { color: var(--color-danger); }
    .demo-menu-item-danger:hover, .demo-menu-item-danger[data-highlighted] { background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface)); }
    .demo-menu-separator { height: 1px; margin: var(--space-1) 0; background: var(--color-border); }
    .demo-menu-label { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: var(--weight-semibold); }
  </style>
</head>
<body>

  <header class="dx-nav">
    <div class="dx-nav-inner">
      <a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a>
      <nav class="dx-nav-menu" aria-label="Primary">
        <a href="../index.html">Docs</a>
        <a href="../components.html" aria-current="page">Components</a>
        <a href="../../templates/index.html">Templates</a>
        <a href="../../create/index.html">Theme Builder</a>
      </nav>
      <div class="dx-nav-actions">
        <a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a>
        <a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a>
      </div>
    </div>
  </header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html" aria-current="page">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);">
          <ol>
            <li><a href="../index.html" class="ren-link-plain">Docs</a></li>
            <li><a href="../components.html" class="ren-link-plain">Components</a></li>
            <li aria-current="page">Menu</li>
          </ol>
        </nav>
        <p class="dx-kicker">Composite</p>
        <h1>Menu <span class="dx-api-badge dx-api-badge-js" title="JavaScript is required for interaction">Requires JS</span></h1>
        <p class="lede">A dropdown list of <em>actions</em>, anchored to a trigger. Use it for "More options" buttons, account menus, and contextual action lists. Each item runs a command — unlike Select, which holds state.</p>
      </header>

      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>A Menu is a transient floating list opened by a trigger button (or a right-click for the context-menu variant). Each item is an action: clicking runs it and closes the menu. Items can be grouped with separators, labelled, or marked as destructive.</p>
        <div class="dx-callout">
          <p><strong>Menu vs Select.</strong> Menu = "do something". Select = "choose something". A menu item disappears the moment you click it; a select option stays as the chosen state.</p>
        </div>
      </section>

      <section class="dx-section" id="anatomy">
        <p class="dx-kicker">Parts</p>
        <h2>Anatomy</h2>
        <p>Three layers: the trigger that opens the menu, the menu itself, and the items inside (with optional icons, shortcuts, descriptions, and dangerous-action styling).</p>
        <div style="background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-5); margin: var(--space-4) 0;">
          <p style="font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: var(--weight-semibold); margin: 0 0 var(--space-3);">Assembled</p>
          <div style="display: flex; justify-content: center;">
            <ul class="demo-menu" role="menu" aria-label="Project actions" data-anatomy>
              <li class="demo-menu-label" role="presentation">Project</li>
              <li class="demo-menu-item" role="menuitem"><span class="demo-menu-item-icon"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg></span><span class="demo-menu-item-label">Rename</span><span class="demo-menu-item-shortcut">⌘R</span></li>
              <li class="demo-menu-item" role="menuitem"><span class="demo-menu-item-icon">↗</span><span class="demo-menu-item-label">Move to…</span></li>
              <li class="demo-menu-item" role="menuitem"><span class="demo-menu-item-icon">⎘</span><span class="demo-menu-item-label">Duplicate</span><span class="demo-menu-item-shortcut">⌘D</span></li>
              <li class="demo-menu-separator" role="separator"></li>
              <li class="demo-menu-item demo-menu-item-danger" role="menuitem"><span class="demo-menu-item-icon">⌫</span><span class="demo-menu-item-label">Delete</span><span class="demo-menu-item-shortcut">⌘⌫</span></li>
            </ul>
          </div>
        </div>
      </section>

      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <div class="dx-demo">
          <div class="dx-demo-preview">
            <ul class="demo-menu" role="menu" aria-label="Demo project actions" id="demo-menu" style="margin-inline: auto;">
              <li class="demo-menu-label" role="presentation">Project</li>
              <li class="demo-menu-item" role="menuitem" tabindex="-1"><span class="demo-menu-item-icon"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg></span><span class="demo-menu-item-label">Rename</span><span class="demo-menu-item-shortcut">⌘R</span></li>
              <li class="demo-menu-item" role="menuitem" tabindex="-1"><span class="demo-menu-item-icon">↗</span><span class="demo-menu-item-label">Move to…</span></li>
              <li class="demo-menu-item" role="menuitem" tabindex="-1"><span class="demo-menu-item-icon">⎘</span><span class="demo-menu-item-label">Duplicate</span><span class="demo-menu-item-shortcut">⌘D</span></li>
              <li class="demo-menu-separator" role="separator"></li>
              <li class="demo-menu-item demo-menu-item-danger" role="menuitem" tabindex="-1"><span class="demo-menu-item-icon">⌫</span><span class="demo-menu-item-label">Delete project</span><span class="demo-menu-item-shortcut">⌘⌫</span></li>
            </ul>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;button data-menu-trigger="actions"&gt;More&lt;/button&gt;

&lt;ren-menu id="actions"&gt;
  &lt;div class="ren-menu-label"&gt;Project&lt;/div&gt;

  &lt;button class="ren-menu-item" role="menuitem"&gt;
    &lt;span class="ren-menu-item-icon"&gt;…&lt;/span&gt;
    &lt;span&gt;Rename&lt;/span&gt;
    &lt;span class="ren-menu-item-shortcut"&gt;⌘R&lt;/span&gt;
  &lt;/button&gt;

  &lt;hr class="ren-menu-separator"&gt;

  &lt;button class="ren-menu-item ren-menu-item-danger" role="menuitem"&gt;
    Delete project
  &lt;/button&gt;
&lt;/ren-menu&gt;</code></pre>
        </div>
      </section>

      <section class="dx-section" id="variants">
        <p class="dx-kicker">Item types</p>
        <h2>Variants</h2>
        <div class="dx-vgrid">
          <div class="dx-vrow">
            <span class="dx-vrow-label">Plain item</span>
            <div class="dx-vrow-items"><p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);"><code>.ren-menu-item</code> — basic action. Click runs the action and closes the menu.</p></div>
          </div>
          <div class="dx-vrow">
            <span class="dx-vrow-label">With icon + shortcut</span>
            <div class="dx-vrow-items"><p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);">Add <code>.ren-menu-item-icon</code> at the start and <code>.ren-menu-item-shortcut</code> at the end. The icon renders muted; the shortcut uses mono type.</p></div>
          </div>
          <div class="dx-vrow">
            <span class="dx-vrow-label">Destructive</span>
            <div class="dx-vrow-items"><p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);"><code>.ren-menu-item-danger</code> tints the item red on hover/highlight. Pair with a confirmation Dialog for irreversible actions.</p></div>
          </div>
          <div class="dx-vrow">
            <span class="dx-vrow-label">Group label</span>
            <div class="dx-vrow-items"><p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);"><code>.ren-menu-label</code> — non-interactive section header (uppercase, muted). Use to group related items.</p></div>
          </div>
          <div class="dx-vrow">
            <span class="dx-vrow-label">Separator</span>
            <div class="dx-vrow-items"><p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);"><code>.ren-menu-separator</code> or a plain <code>&lt;hr&gt;</code> with that class — divides groups visually.</p></div>
          </div>
          <div class="dx-vrow">
            <span class="dx-vrow-label">Disabled</span>
            <div class="dx-vrow-items"><p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);">Add <code>aria-disabled="true"</code> on a menuitem to gray it out and skip it during keyboard navigation.</p></div>
          </div>
        </div>
      </section>

      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>
        <h3>CSS classes</h3>
        <table class="dx-api">
          <thead><tr><th>Class</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-menu</code></td><td>The floating menu container. Use with <code>role="menu"</code>. Designed to live inside a popover (or be positioned by the component).</td></tr>
            <tr><td><code class="dx-api-name">.ren-menu-item</code></td><td>One action. <code>role="menuitem"</code>. Best as a <code>&lt;button type="button"&gt;</code>.</td></tr>
            <tr><td><code class="dx-api-name">.ren-menu-item-icon</code></td><td>Leading icon inside an item. 16 px square, muted color.</td></tr>
            <tr><td><code class="dx-api-name">.ren-menu-item-shortcut</code></td><td>Trailing keyboard shortcut text. Mono font, muted.</td></tr>
            <tr><td><code class="dx-api-name">.ren-menu-item-description</code></td><td>Optional second line under the item label. Smaller, muted.</td></tr>
            <tr><td><code class="dx-api-name">.ren-menu-item-danger</code></td><td>Destructive styling. Red text + red hover background.</td></tr>
            <tr><td><code class="dx-api-name">.ren-menu-label</code></td><td>Section heading inside the menu. Uppercase, muted, non-interactive.</td></tr>
            <tr><td><code class="dx-api-name">.ren-menu-separator</code></td><td>Thin divider between groups.</td></tr>
          </tbody>
        </table>

        <h3>Web Component attributes</h3>
        <table class="dx-api dx-api-cols-4">
          <thead><tr><th>Attribute</th><th>Type</th><th>Default</th><th>Notes</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">data-menu-trigger</code></td><td><span class="dx-api-type">string (id)</span></td><td><span class="dx-api-default">—</span></td><td>On any element. Click opens the matching <code>&lt;ren-menu&gt;</code>.</td></tr>
            <tr><td><code class="dx-api-name">placement</code></td><td><span class="dx-api-type">"bottom-start" | "bottom-end" | "top-start" | "top-end" | "right-start" | "right-end" | "left-start" | "left-end"</span></td><td><span class="dx-api-default">"bottom-start"</span></td><td>Where the menu floats relative to the trigger. Reflected to <code>data-side</code> and <code>data-align</code>.</td></tr>
          </tbody>
        </table>

        <h3>Events</h3>
        <table class="dx-api">
          <thead><tr><th>Event</th><th>Detail</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">ren-menu-select</code></td><td>An item was activated. <code>{ item, value }</code>.</td></tr>
            <tr><td><code class="dx-api-name">ren-menu-open</code> / <code class="dx-api-name">ren-menu-close</code></td><td>Menu opened / closed.</td></tr>
          </tbody>
        </table>
      </section>

      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <p>Implements the WAI-ARIA Menu Button pattern.</p>
        <h3>Keyboard</h3>
        <div class="dx-keys">
          <div class="dx-keyrow"><span class="keys"><kbd>Space</kbd> / <kbd>Enter</kbd> / <kbd>↓</kbd></span><span>On the trigger: opens the menu, focuses the first item.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>↑</kbd> / <kbd>↓</kbd></span><span>Move highlight through items. Skips disabled and separators.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>Home</kbd> / <kbd>End</kbd></span><span>Jump to the first / last item.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>Enter</kbd></span><span>Activate the highlighted item.</span></div>
          <div class="dx-keyrow"><span class="keys">Type</span><span>Typeahead — jumps to the first item starting with the typed letter(s).</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>Esc</kbd></span><span>Close the menu, return focus to the trigger.</span></div>
        </div>
        <div class="dx-callout">
          <p><strong>Pair destructive items with a confirmation.</strong> A menu item that deletes data should open a Dialog with explicit confirm/cancel — never delete on first click.</p>
        </div>
      </section>

      <section class="dx-section" id="examples">
        <p class="dx-kicker">Patterns</p>
        <h2>Examples</h2>
        <h3>Account menu</h3>
        <div class="dx-pre" tabindex="0"><code>&lt;button class="ren-btn ren-btn-ghost" data-menu-trigger="account"&gt;
  &lt;img src="/avatar.jpg" class="ren-avatar"&gt;
&lt;/button&gt;

&lt;ren-menu id="account" placement="bottom-end"&gt;
  &lt;div class="ren-menu-label"&gt;Signed in as ren@example.com&lt;/div&gt;

  &lt;button class="ren-menu-item"&gt;Profile&lt;/button&gt;
  &lt;button class="ren-menu-item"&gt;Settings&lt;/button&gt;
  &lt;button class="ren-menu-item"&gt;Help &amp; feedback&lt;/button&gt;

  &lt;hr class="ren-menu-separator"&gt;

  &lt;button class="ren-menu-item"&gt;Sign out&lt;/button&gt;
&lt;/ren-menu&gt;</code></pre>

        <h3>Run an action</h3>
        <div class="dx-pre" tabindex="0"><code>document.querySelector('ren-menu').addEventListener('ren-menu-select', (e) =&gt; {
  const action = e.detail.item.dataset.action;
  switch (action) {
    case 'rename':    openRenameDialog(); break;
    case 'duplicate': duplicateProject(); break;
    case 'delete':    confirmDelete(); break;
  }
});</code></pre>
      </section>

    </main>
  </div>

  <script type="module" src="../../components/composites/ren-menu/ren-menu.js"></script>
  <script>
    // Keyboard navigation for the static demo menu
    const menu = document.getElementById('demo-menu');
    if (menu) {
      const items = menu.querySelectorAll('.demo-menu-item');
      let idx = 0;
      const highlight = (i) => {
        items.forEach((it, j) => it.toggleAttribute('data-highlighted', i === j));
        if (items[i]) items[i].focus();
      };
      items.forEach((it, i) => {
        it.addEventListener('mouseenter', () => { idx = i; highlight(i); });
        it.addEventListener('keydown', (e) => {
          if (e.key === 'ArrowDown') { e.preventDefault(); idx = (idx + 1) % items.length; highlight(idx); }
          else if (e.key === 'ArrowUp') { e.preventDefault(); idx = (idx - 1 + items.length) % items.length; highlight(idx); }
          else if (e.key === 'Home') { e.preventDefault(); idx = 0; highlight(0); }
          else if (e.key === 'End') { e.preventDefault(); idx = items.length - 1; highlight(idx); }
        });
      });
      // Make the first item focusable
      if (items[0]) items[0].setAttribute('tabindex', '0');
    }
  </script>

  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-menubar.html
type: docs_page
name: ren-menubar docs
path: docs/components/ren-menubar.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menubar — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html" aria-current="page">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Menubar</li></ol></nav>
        <p class="dx-kicker">Composite</p>
        <h1>Menubar <span class="dx-api-badge dx-api-badge-js" title="JavaScript is required for interaction">Requires JS</span></h1>
        <p class="lede">Horizontal menu bar with sub-menus. For desktop-style apps with a top-level File / Edit / View structure.</p>
      </header>
      <section class="dx-section" id="overview"><p class="dx-kicker">About</p><h2>Overview</h2><p>Use a Menubar when your app has more global commands than fit in a button row, and the desktop-app metaphor (File menu, Edit menu) makes sense — IDEs, design tools, document editors.</p></section>
      <section class="dx-section" id="demo"><p class="dx-kicker">Live</p><h2>Demo</h2><div class="dx-demo"><div class="dx-demo-preview" style="display: block;"><div role="menubar" class="ren-menubar" style="display: flex; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);"><button role="menuitem" type="button" style="padding: var(--space-1) var(--space-3); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm);">File</button><button role="menuitem" type="button" style="padding: var(--space-1) var(--space-3); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm);">Edit</button><button role="menuitem" type="button" style="padding: var(--space-1) var(--space-3); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm);">View</button><button role="menuitem" type="button" style="padding: var(--space-1) var(--space-3); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm);">Help</button></div></div><pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;ren-menubar aria-label="Main menu"&gt;
  &lt;button role="menuitem"&gt;File&lt;/button&gt;
  &lt;button role="menuitem"&gt;Edit&lt;/button&gt;
  &lt;button role="menuitem"&gt;View&lt;/button&gt;
&lt;/ren-menubar&gt;</code></pre></div></section>
      <section class="dx-section" id="api"><p class="dx-kicker">Reference</p><h2>API</h2><p>Each top-level item is a <code>&lt;button role="menuitem"&gt;</code>. Submenus use <a href="ren-menu.html" class="ren-link">Menu</a> popovers triggered by each item.</p></section>
      <section class="dx-section" id="a11y"><p class="dx-kicker">Inclusive by default</p><h2>Accessibility</h2><ul><li>Wrapper has <code>role="menubar"</code> + descriptive <code>aria-label</code>.</li><li>Arrow keys navigate horizontally between top-level items, vertically inside an open submenu.</li><li><kbd>Esc</kbd> closes any open submenu.</li></ul></section>
    </main>
  </div>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-nav.html
type: docs_page
name: ren-nav docs
path: docs/components/ren-nav.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nav — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html" aria-current="page">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Nav</li></ol></nav>
        <p class="dx-kicker">Pattern</p>
        <h1>Nav <span class="dx-api-badge dx-api-badge-hybrid" title="Renders without JS; JS adds enhancements">Hybrid</span></h1>
        <p class="lede">Top navigation bar with brand, primary links, search, account menu. The pattern most apps put at the top of every page.</p>
      </header>
      <section class="dx-section" id="overview"><p class="dx-kicker">About</p><h2>Overview</h2><p>Nav is the global header. It tells the user where they are, what's available, and how to switch context. Make it sticky so it's reachable without scrolling, and keep it simple — primary destinations only, secondary stuff goes in account menus or settings.</p></section>
      <section class="dx-section" id="demo"><p class="dx-kicker">Live</p><h2>Demo</h2><div class="dx-demo"><div class="dx-demo-preview" style="display: block; padding: 0;"><nav class="ren-nav" style="display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border); background: var(--color-surface);"><div style="display: flex; align-items: center; gap: var(--space-4);"><strong>Acme</strong><a href="#" class="ren-link-plain" style="font-size: var(--text-sm);">Dashboard</a><a href="#" class="ren-link-plain" style="font-size: var(--text-sm); color: var(--color-text-muted);">Reports</a><a href="#" class="ren-link-plain" style="font-size: var(--text-sm); color: var(--color-text-muted);">Settings</a></div><div style="display: flex; align-items: center; gap: var(--space-2);"><button class="ren-btn ren-btn-ghost ren-btn-sm" type="button">Search</button><button class="ren-btn ren-btn-secondary ren-btn-sm" type="button">Account</button></div></nav></div><pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;nav class="ren-nav" aria-label="Primary"&gt;
  &lt;a href="/" class="ren-nav-brand"&gt;Acme&lt;/a&gt;
  &lt;ul class="ren-nav-links"&gt;
    &lt;li&gt;&lt;a href="/dashboard" aria-current="page"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/reports"&gt;Reports&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="ren-nav-actions"&gt;…&lt;/div&gt;
&lt;/nav&gt;</code></pre></div></section>
      <section class="dx-section" id="api"><p class="dx-kicker">Reference</p><h2>API</h2><table class="dx-api"><thead><tr><th>Class</th><th>Effect</th></tr></thead><tbody><tr><td><code class="dx-api-name">.ren-nav</code></td><td>The wrapper. Sticky-top, blurred backdrop, bottom border.</td></tr><tr><td><code class="dx-api-name">.ren-nav-brand</code></td><td>The logo / app name link. Always returns to home.</td></tr><tr><td><code class="dx-api-name">.ren-nav-links</code></td><td>The horizontal list of primary links.</td></tr><tr><td><code class="dx-api-name">.ren-nav-actions</code></td><td>Trailing slot for buttons / account menu.</td></tr></tbody></table></section>
      <section class="dx-section" id="a11y"><p class="dx-kicker">Inclusive by default</p><h2>Accessibility</h2><ul><li>Wrap in <code>&lt;nav aria-label="Primary"&gt;</code>.</li><li>Mark the active link with <code>aria-current="page"</code>.</li><li>On mobile, collapse the links into a button-triggered <a href="ren-sheet.html" class="ren-link">Sheet</a> rather than overflow off-screen.</li></ul></section>
    </main>
  </div>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-number-field.html
type: docs_page
name: ren-number-field docs
path: docs/components/ren-number-field.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Number Field — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html" aria-current="page">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Number Field</li></ol></nav>
        <p class="dx-kicker">Composite</p>
        <h1>Number Field <span class="dx-api-badge dx-api-badge-js" title="JavaScript is required for interaction">Requires JS</span></h1>
        <p class="lede">Numeric input with stepper buttons, min / max / step, and clamping. Native <code>&lt;input type=&quot;number&quot;&gt;</code> on steroids.</p>
      </header>
      <section class="dx-section" id="overview"><p class="dx-kicker">About</p><h2>Overview</h2><p>Use Number Field for quantities, prices, ages, durations — anywhere a precise number matters. Renders bigger increment / decrement buttons than the native browser controls and clamps to your min / max.</p></section>
      <section class="dx-section" id="demo"><p class="dx-kicker">Live</p><h2>Demo</h2><div class="dx-demo"><div class="dx-demo-preview" style="flex-direction: column; align-items: stretch;"><label class="ren-field"><span class="ren-field-label">Quantity</span><div style="display: flex; gap: var(--space-1); align-items: center;"><button type="button" class="ren-btn ren-btn-secondary ren-btn-sm" style="width: 32px; height: 32px;">−</button><input class="ren-input" type="number" value="3" min="0" max="99" style="text-align: center; width: 80px;"><button type="button" class="ren-btn ren-btn-secondary ren-btn-sm" style="width: 32px; height: 32px;">+</button></div></label></div><pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;ren-number-field name="qty" value="3" min="0" max="99" step="1"&gt;
  &lt;label slot="label"&gt;Quantity&lt;/label&gt;
&lt;/ren-number-field&gt;</code></pre></div></section>
      <section class="dx-section" id="api"><p class="dx-kicker">Reference</p><h2>API</h2><table class="dx-api dx-api-cols-4"><thead><tr><th>Attribute</th><th>Type</th><th>Default</th><th>Notes</th></tr></thead><tbody><tr><td><code class="dx-api-name">value</code></td><td><span class="dx-api-type">number</span></td><td><span class="dx-api-default">—</span></td><td>Current value. Submitted with the form.</td></tr><tr><td><code class="dx-api-name">min</code> / <code class="dx-api-name">max</code></td><td><span class="dx-api-type">number</span></td><td><span class="dx-api-default">—</span></td><td>Clamped on input and on stepper press.</td></tr><tr><td><code class="dx-api-name">step</code></td><td><span class="dx-api-type">number</span></td><td><span class="dx-api-default">1</span></td><td>Stepper increment / decrement size.</td></tr></tbody></table></section>
      <section class="dx-section" id="a11y"><p class="dx-kicker">Inclusive by default</p><h2>Accessibility</h2><ul><li>The actual control is a real <code>&lt;input type="number"&gt;</code> with native validation and form participation.</li><li>Stepper buttons have <code>aria-label="Increment"</code> / <code>"Decrement"</code> and stay keyboard-reachable.</li><li>Arrow Up / Down on the input also steps by <code>step</code>.</li></ul></section>
    </main>
  </div>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-otp.html
type: docs_page
name: ren-otp docs
path: docs/components/ren-otp.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Input OTP — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html" aria-current="page">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Input OTP</li></ol></nav>
        <p class="dx-kicker">Composite</p>
        <h1>Input OTP <span class="dx-api-badge dx-api-badge-js" title="JavaScript is required for interaction">Requires JS</span></h1>
        <p class="lede">One-time-code input. Auto-advances on each digit, accepts paste, supports a custom mask (4 / 6 / 8 cells).</p>
      </header>
      <section class="dx-section" id="overview"><p class="dx-kicker">About</p><h2>Overview</h2><p>For 2FA / verification codes. Each digit gets its own visible cell so users can see exactly how many digits are expected. Paste the whole code at once and it distributes across cells.</p></section>
      <section class="dx-section" id="demo"><p class="dx-kicker">Live</p><h2>Demo</h2><div class="dx-demo"><div class="dx-demo-preview" style="gap: var(--space-2);"><input type="text" inputmode="numeric" maxlength="1" style="width: 40px; height: 48px; text-align: center; font-size: var(--text-xl); border: 1px solid var(--color-border); border-radius: var(--radius-sm);"><input type="text" inputmode="numeric" maxlength="1" style="width: 40px; height: 48px; text-align: center; font-size: var(--text-xl); border: 1px solid var(--color-border); border-radius: var(--radius-sm);"><input type="text" inputmode="numeric" maxlength="1" style="width: 40px; height: 48px; text-align: center; font-size: var(--text-xl); border: 1px solid var(--color-border); border-radius: var(--radius-sm);"><span style="color: var(--color-text-muted);">—</span><input type="text" inputmode="numeric" maxlength="1" style="width: 40px; height: 48px; text-align: center; font-size: var(--text-xl); border: 1px solid var(--color-border); border-radius: var(--radius-sm);"><input type="text" inputmode="numeric" maxlength="1" style="width: 40px; height: 48px; text-align: center; font-size: var(--text-xl); border: 1px solid var(--color-border); border-radius: var(--radius-sm);"><input type="text" inputmode="numeric" maxlength="1" style="width: 40px; height: 48px; text-align: center; font-size: var(--text-xl); border: 1px solid var(--color-border); border-radius: var(--radius-sm);"></div><pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;ren-otp length="6" pattern="3-3"&gt;&lt;/ren-otp&gt;</code></pre></div></section>
      <section class="dx-section" id="api"><p class="dx-kicker">Reference</p><h2>API</h2><table class="dx-api dx-api-cols-4"><thead><tr><th>Attribute</th><th>Type</th><th>Default</th><th>Notes</th></tr></thead><tbody><tr><td><code class="dx-api-name">length</code></td><td><span class="dx-api-type">number</span></td><td><span class="dx-api-default">6</span></td><td>How many digits the code has.</td></tr><tr><td><code class="dx-api-name">pattern</code></td><td><span class="dx-api-type">string (e.g. "3-3")</span></td><td><span class="dx-api-default">—</span></td><td>Visual grouping with a separator. <code>"3-3"</code> = three cells, dash, three cells.</td></tr><tr><td><code class="dx-api-name">inputmode</code></td><td><span class="dx-api-type">"numeric" | "text"</span></td><td><span class="dx-api-default">"numeric"</span></td><td>Mobile keyboard hint.</td></tr></tbody></table></section>
      <section class="dx-section" id="a11y"><p class="dx-kicker">Inclusive by default</p><h2>Accessibility</h2><ul><li>Each cell is a real input — Tab moves between, paste splits, autocomplete <code>autocomplete="one-time-code"</code> is set so iOS / Android suggest codes from SMS.</li><li>Wrap in a <code>&lt;label&gt;</code> for the whole group.</li></ul></section>
    </main>
  </div>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-pagination.html
type: docs_page
name: ren-pagination docs
path: docs/components/ren-pagination.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagination — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .dx-vgrid { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
    .dx-vrow { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: start; }
    .dx-vrow-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding-top: var(--space-3); }
    .dx-vrow-items { padding: var(--space-3); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-2); align-items: center; }
    @media (max-width: 720px) { .dx-vrow { grid-template-columns: 1fr; gap: var(--space-2); } .dx-vrow-label { padding-top: 0; } }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html" aria-current="page">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Pagination</li></ol></nav>
        <p class="dx-kicker">Primitive</p>
        <h1>Pagination <span class="dx-api-badge dx-api-badge-hybrid" title="Renders without JS; JS adds enhancements">Hybrid</span></h1>
        <p class="lede">Page navigation for paginated lists, search results, and tables. Numbered links with prev/next arrows; an optional simple variant collapses to "Page N of M".</p>
      </header>

      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>Pagination splits a long list into pages so users don't scroll forever. Use it for: search results, data tables, blog post archives, anywhere users navigate by page rather than by infinite scroll. The current page is marked with <code>aria-current="page"</code>; prev/next are disabled at the boundaries.</p>
        <div class="dx-callout">
          <p><strong>Pagination vs infinite scroll.</strong> Use Pagination when users need to jump back ("page 3"), bookmark a position, or share a URL pointing at a specific page. Use infinite scroll for feed-like content where order rarely matters and users browse forward.</p>
        </div>
      </section>

      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <div class="dx-demo">
          <div class="dx-demo-preview">
            <nav class="ren-pagination" aria-label="Search results pagination">
              <a class="ren-pagination-prev" href="#" aria-label="Previous page">‹ Prev</a>
              <a class="ren-pagination-item" href="#">1</a>
              <a class="ren-pagination-item" href="#">2</a>
              <a class="ren-pagination-item" href="#" aria-current="page">3</a>
              <a class="ren-pagination-item" href="#">4</a>
              <a class="ren-pagination-item" href="#">5</a>
              <span class="ren-pagination-ellipsis" aria-hidden="true">…</span>
              <a class="ren-pagination-item" href="#">42</a>
              <a class="ren-pagination-next" href="#" aria-label="Next page">Next ›</a>
            </nav>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;nav class="ren-pagination" aria-label="Search results pagination"&gt;
  &lt;a class="ren-pagination-prev" href="?page=2" aria-label="Previous page"&gt;‹ Prev&lt;/a&gt;
  &lt;a class="ren-pagination-item" href="?page=1"&gt;1&lt;/a&gt;
  &lt;a class="ren-pagination-item" href="?page=2"&gt;2&lt;/a&gt;
  &lt;a class="ren-pagination-item" href="?page=3" aria-current="page"&gt;3&lt;/a&gt;
  &lt;a class="ren-pagination-item" href="?page=4"&gt;4&lt;/a&gt;
  &lt;span class="ren-pagination-ellipsis" aria-hidden="true"&gt;…&lt;/span&gt;
  &lt;a class="ren-pagination-item" href="?page=42"&gt;42&lt;/a&gt;
  &lt;a class="ren-pagination-next" href="?page=4" aria-label="Next page"&gt;Next ›&lt;/a&gt;
&lt;/nav&gt;</code></pre>
        </div>
      </section>

      <section class="dx-section" id="variants">
        <p class="dx-kicker">Shapes</p>
        <h2>Variants</h2>
        <div class="dx-vgrid">
          <div class="dx-vrow"><span class="dx-vrow-label">Numbered</span><div class="dx-vrow-items">
            <nav class="ren-pagination" aria-label="Numbered"><a class="ren-pagination-prev" href="#">‹</a><a class="ren-pagination-item" href="#">1</a><a class="ren-pagination-item" href="#" aria-current="page">2</a><a class="ren-pagination-item" href="#">3</a><a class="ren-pagination-next" href="#">›</a></nav>
          </div></div>
          <div class="dx-vrow"><span class="dx-vrow-label">Simple</span><div class="dx-vrow-items">
            <nav class="ren-pagination ren-pagination-simple" aria-label="Simple"><a class="ren-pagination-prev" href="#">‹ Prev</a><span>Page 3 of 42</span><a class="ren-pagination-next" href="#">Next ›</a></nav>
          </div></div>
          <div class="dx-vrow"><span class="dx-vrow-label">Boundary disabled</span><div class="dx-vrow-items">
            <nav class="ren-pagination" aria-label="At first page"><a class="ren-pagination-prev" aria-disabled="true">‹</a><a class="ren-pagination-item" href="#" aria-current="page">1</a><a class="ren-pagination-item" href="#">2</a><a class="ren-pagination-item" href="#">3</a><a class="ren-pagination-next" href="#">›</a></nav>
          </div></div>
        </div>
      </section>

      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>
        <table class="dx-api">
          <thead><tr><th>Class</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-pagination</code></td><td>Wrapping <code>&lt;nav&gt;</code>. Inline-flex row of links.</td></tr>
            <tr><td><code class="dx-api-name">.ren-pagination-item</code></td><td>One numbered page link. Square, 44 px touch target.</td></tr>
            <tr><td><code class="dx-api-name">.ren-pagination-prev</code> / <code class="dx-api-name">-next</code></td><td>The previous / next arrow links.</td></tr>
            <tr><td><code class="dx-api-name">.ren-pagination-ellipsis</code></td><td>The "…" between distant page numbers. Decorative — mark <code>aria-hidden</code>.</td></tr>
            <tr><td><code class="dx-api-name">.ren-pagination-simple</code></td><td>Compact variant — just prev / current label / next, for contexts with little room.</td></tr>
            <tr><td><code class="dx-api-name">[aria-current="page"]</code></td><td>Marks the current page. Solid accent fill, not a link visually.</td></tr>
            <tr><td><code class="dx-api-name">[aria-disabled="true"]</code></td><td>Marks prev/next at the boundaries. Lower opacity, not interactive.</td></tr>
          </tbody>
        </table>
      </section>

      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <ul>
          <li><strong>Wrap in <code>&lt;nav aria-label="…"&gt;</code></strong> with a label that describes what's being paginated ("Search results pagination").</li>
          <li><strong>Mark the current page</strong> with <code>aria-current="page"</code>. Don't link it.</li>
          <li><strong>Boundary disable</strong>: at page 1, <code>prev</code> gets <code>aria-disabled="true"</code> and no <code>href</code>. Same for <code>next</code> on the last page.</li>
          <li><strong>Touch targets</strong>: each link is at least 44×44 px. Don't shrink them on mobile — small targets fail Fitts.</li>
        </ul>
      </section>

      <section class="dx-section" id="examples">
        <p class="dx-kicker">Patterns</p>
        <h2>Examples</h2>
        <h3>Server-rendered pagination</h3>
        <div class="dx-pre" tabindex="0"><code>&lt;nav class="ren-pagination" aria-label="Posts pagination"&gt;
  &lt;a class="ren-pagination-prev" href="/posts?page=&lt;%= currentPage - 1 %&gt;"
     &lt;%= currentPage === 1 ? 'aria-disabled="true"' : '' %&gt;&gt;‹ Prev&lt;/a&gt;

  &lt;% for (const p of visiblePages) { %&gt;
    &lt;a class="ren-pagination-item" href="/posts?page=&lt;%= p %&gt;"
       &lt;%= p === currentPage ? 'aria-current="page"' : '' %&gt;&gt;&lt;%= p %&gt;&lt;/a&gt;
  &lt;% } %&gt;

  &lt;a class="ren-pagination-next" href="/posts?page=&lt;%= currentPage + 1 %&gt;"
     &lt;%= currentPage === totalPages ? 'aria-disabled="true"' : '' %&gt;&gt;Next ›&lt;/a&gt;
&lt;/nav&gt;</code></div>
      </section>

    </main>
  </div>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-popover.html
type: docs_page
name: ren-popover docs
path: docs/components/ren-popover.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Popover — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: visible; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-8) var(--space-5); display: flex; gap: var(--space-3); align-items: center; justify-content: center; min-height: 160px; }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .demo-pop { position: relative; }
    .demo-pop-content { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; padding: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 5; }
    .demo-pop-content[hidden] { display: none; }
    .demo-filter-group { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
    .demo-filter-legend { margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
    .demo-filter-options { --stack-gap: var(--space-3); }
    .demo-pop-actions { justify-content: flex-end; }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html" aria-current="page">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Popover</li></ol></nav>
        <p class="dx-kicker">Composite</p>
        <h1>Popover <span class="dx-api-badge dx-api-badge-js" title="JavaScript is required for interaction">Requires JS</span></h1>
        <p class="lede">A floating panel anchored to a trigger. Holds richer content than a Tooltip — small forms, action menus, settings panels — with full keyboard navigation. Built on the native Popover API where supported.</p>
      </header>

      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>Popovers open on click (not hover) and stay open until the user dismisses them. Use them for short forms, mini settings panels, or contextual choices that don't warrant a full Dialog. The trigger is always a button; the content can be anything keyboard-friendly.</p>
        <div class="dx-callout">
          <p><strong>Popover vs Dialog vs Tooltip.</strong> Tooltip = passive hint on hover. Popover = small interactive panel anchored to a trigger. Dialog = modal that blocks the rest of the page.</p>
        </div>
      </section>

      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <div class="dx-demo">
          <div class="dx-demo-preview">
            <div class="demo-pop" id="popover-demo">
              <button class="ren-btn ren-btn-secondary" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="popover-demo-content">Filters</button>
              <div class="demo-pop-content ren-stack" id="popover-demo-content" role="dialog" aria-label="Filters" hidden>
                <fieldset class="demo-filter-group">
                  <legend class="demo-filter-legend">Filter posts</legend>
                  <div class="ren-stack demo-filter-options">
                    <label class="ren-checkbox"><input type="checkbox" checked><span class="ren-checkbox-control"></span><span>Drafts</span></label>
                    <label class="ren-checkbox"><input type="checkbox"><span class="ren-checkbox-control"></span><span>Archived</span></label>
                  </div>
                </fieldset>
                <div class="ren-row demo-pop-actions">
                  <button class="ren-btn ren-btn-ghost ren-btn-sm" type="button" data-close>Cancel</button>
                  <button class="ren-btn ren-btn-primary ren-btn-sm" type="button" data-close>Apply</button>
                </div>
              </div>
            </div>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;ren-popover&gt;
  &lt;button slot="trigger"&gt;Filters&lt;/button&gt;
  &lt;div slot="content" role="dialog" aria-label="Filters"&gt;
    &lt;!-- form, checkboxes, etc. --&gt;
  &lt;/div&gt;
&lt;/ren-popover&gt;</code></pre>
        </div>
      </section>

      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>
        <table class="dx-api">
          <thead><tr><th>Class</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-popover</code></td><td>The floating panel. Card-like surface, shadow, padding.</td></tr>
            <tr><td><code class="dx-api-name">.ren-popover-arrow</code></td><td>Optional arrow pointing at the trigger.</td></tr>
          </tbody>
        </table>
        <h3>Web Component attributes</h3>
        <table class="dx-api dx-api-cols-4">
          <thead><tr><th>Attribute</th><th>Type</th><th>Default</th><th>Notes</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">placement</code></td><td><span class="dx-api-type">"top" | "right" | "bottom" | "left"</span></td><td><span class="dx-api-default">"bottom"</span></td><td>Side relative to the trigger; auto-flips when there isn't room.</td></tr>
            <tr><td><code class="dx-api-name">open</code></td><td><span class="dx-api-type">boolean</span></td><td><span class="dx-api-default">false</span></td><td>Programmatically toggle open state.</td></tr>
          </tbody>
        </table>
      </section>

      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <ul>
          <li>Trigger has <code>aria-haspopup="dialog"</code> and <code>aria-expanded</code> kept in sync.</li>
          <li>Open: focus moves to the first focusable element inside the popover.</li>
          <li>Close: focus returns to the trigger.</li>
          <li><kbd>Esc</kbd> closes the popover. Click outside also closes.</li>
        </ul>
      </section>

      <section class="dx-section" id="examples">
        <p class="dx-kicker">Patterns</p>
        <h2>Examples</h2>
        <h3>Quick filters panel</h3>
        <div class="dx-pre" tabindex="0"><code>&lt;ren-popover&gt;
  &lt;button slot="trigger" class="ren-btn ren-btn-secondary"&gt;Filters&lt;/button&gt;
  &lt;form slot="content"&gt;…&lt;/form&gt;
&lt;/ren-popover&gt;</code></div>
      </section>

    </main>
  </div>
  <script>
    // Vanilla popover toggle for the demo
    document.querySelectorAll('.demo-pop').forEach(root => {
      const trigger = root.querySelector('button');
      const content = root.querySelector('.demo-pop-content');
      const open = () => { content.hidden = false; trigger.setAttribute('aria-expanded', 'true'); content.querySelector('input,button')?.focus(); };
      const close = () => { content.hidden = true; trigger.setAttribute('aria-expanded', 'false'); trigger.focus(); };
      trigger.addEventListener('click', () => content.hidden ? open() : close());
      content.querySelectorAll('[data-close]').forEach(b => b.addEventListener('click', close));
      document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !content.hidden) close(); });
      document.addEventListener('click', (e) => { if (!root.contains(e.target) && !content.hidden) close(); });
    });
  </script>
  <script type="module" src="../../components/composites/ren-popover/ren-popover.js"></script>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-progress.html
type: docs_page
name: ren-progress docs
path: docs/components/ren-progress.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Progress — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .dx-vgrid { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
    .dx-vrow { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: start; }
    .dx-vrow-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding-top: var(--space-3); }
    .dx-vrow-items { padding: var(--space-3); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
    @media (max-width: 720px) { .dx-vrow { grid-template-columns: 1fr; gap: var(--space-2); } .dx-vrow-label { padding-top: 0; } }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html" aria-current="page">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Progress</li></ol></nav>
        <p class="dx-kicker">Primitive</p>
        <h1>Progress <span class="dx-api-badge dx-api-badge-css" title="Works without any JavaScript">CSS-only</span></h1>
        <p class="lede">Bar that fills from 0 to a max value. Determinate (you know the percentage) or indeterminate (continuous animation when the duration is unknown).</p>
      </header>
      <section class="dx-section" id="overview"><p class="dx-kicker">About</p><h2>Overview</h2><p>Use Progress when a long task has measurable progress: file upload, multi-step wizard, video buffering. For short waits where you don't know the duration, use a <a href="ren-spinner.html" class="ren-link">Spinner</a> instead.</p></section>
      <section class="dx-section" id="demo"><p class="dx-kicker">Live</p><h2>Demo</h2><div class="dx-demo"><div class="dx-demo-preview" style="flex-direction: column; align-items: stretch; gap: var(--space-3); width: 100%;"><div><label style="font-size: var(--text-sm);">Uploading… 60%</label><div class="ren-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><div class="ren-progress-bar" style="width: 60%;"></div></div></div><div><label style="font-size: var(--text-sm);">Saving…</label><div class="ren-progress ren-progress-indeterminate" role="progressbar" aria-label="Loading"></div></div></div><pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;div class="ren-progress" role="progressbar"
     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"&gt;
  &lt;div class="ren-progress-bar" style="width: 60%"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre></div></section>
      <section class="dx-section" id="api"><p class="dx-kicker">Reference</p><h2>API</h2><table class="dx-api"><thead><tr><th>Class</th><th>Effect</th></tr></thead><tbody><tr><td><code class="dx-api-name">.ren-progress</code></td><td>The track. Use with <code>role="progressbar"</code>.</td></tr><tr><td><code class="dx-api-name">.ren-progress-bar</code></td><td>The filled portion. Set <code>width: NN%</code> or use the data attribute on the parent.</td></tr><tr><td><code class="dx-api-name">.ren-progress-indeterminate</code></td><td>Continuous-loop animation when progress is unknown.</td></tr><tr><td><code class="dx-api-name">.ren-progress-success</code> / <code class="dx-api-name">-warning</code> / <code class="dx-api-name">-danger</code></td><td>Status colors for the bar.</td></tr></tbody></table></section>
      <section class="dx-section" id="a11y"><p class="dx-kicker">Inclusive by default</p><h2>Accessibility</h2><ul><li>Always set <code>role="progressbar"</code> on the track.</li><li>For determinate: <code>aria-valuenow</code>, <code>aria-valuemin</code>, <code>aria-valuemax</code>.</li><li>For indeterminate: omit <code>aria-valuenow</code>; add <code>aria-label</code>.</li></ul></section>
    </main>
  </div>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-radio.html
type: docs_page
name: ren-radio docs
path: docs/components/ren-radio.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Radio — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .dx-vgrid { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
    .dx-vrow { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: start; }
    .dx-vrow-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding-top: var(--space-3); }
    .dx-vrow-items { padding: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-3); }
    @media (max-width: 720px) { .dx-vrow { grid-template-columns: 1fr; gap: var(--space-2); } .dx-vrow-label { padding-top: 0; } }
  </style>
</head>
<body>

  <header class="dx-nav">
    <div class="dx-nav-inner">
      <a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a>
      <nav class="dx-nav-menu" aria-label="Primary">
        <a href="../index.html">Docs</a>
        <a href="../components.html" aria-current="page">Components</a>
        <a href="../../templates/index.html">Templates</a>
        <a href="../../create/index.html">Theme Builder</a>
      </nav>
      <div class="dx-nav-actions">
        <a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a>
        <a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a>
      </div>
    </div>
  </header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html" aria-current="page">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);">
          <ol>
            <li><a href="../index.html" class="ren-link-plain">Docs</a></li>
            <li><a href="../components.html" class="ren-link-plain">Components</a></li>
            <li aria-current="page">Radio</li>
          </ol>
        </nav>
        <p class="dx-kicker">Primitive</p>
        <h1>Radio <span class="dx-api-badge dx-api-badge-hybrid" title="Renders without JS; JS adds enhancements">Hybrid</span></h1>
        <p class="lede">Mutually-exclusive choice from a small set of options. Always grouped under a shared <code>name</code>; selecting one deselects the others. Same custom-styled-control / native-input pattern as Checkbox.</p>
      </header>

      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>A radio group lets the user pick exactly one option from 2–5 alternatives. Past 5, switch to a <a href="ren-select.html" class="ren-link">Select</a> dropdown — radios start to feel cramped and hard to scan. Each radio is a real <code>&lt;input type="radio"&gt;</code>, so arrow-key navigation between them works out of the box.</p>
        <div class="dx-callout">
          <p><strong>All radios in a group share the same <code>name</code>.</strong> Without it, each radio behaves as its own group — selecting one doesn't deselect the others, and only the last one submits. Wrap them in a <code>fieldset</code> with a <code>legend</code> for the group's label.</p>
        </div>
      </section>

      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <div class="dx-demo">
          <div class="dx-demo-preview">
            <fieldset style="border: 0; padding: 0; margin: 0;">
              <legend style="font-size: var(--label-size); font-weight: var(--label-weight); margin-bottom: var(--space-3);">How would you like to receive notifications?</legend>
              <div class="ren-radio-group">
                <label class="ren-radio"><input type="radio" name="demo-notif" value="all" checked><span class="ren-radio-control"></span><span>All updates</span></label>
                <label class="ren-radio"><input type="radio" name="demo-notif" value="mentions"><span class="ren-radio-control"></span><span>Mentions only</span></label>
                <label class="ren-radio"><input type="radio" name="demo-notif" value="none"><span class="ren-radio-control"></span><span>Nothing</span></label>
              </div>
            </fieldset>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;fieldset&gt;
  &lt;legend&gt;How would you like to receive notifications?&lt;/legend&gt;
  &lt;div class="ren-radio-group"&gt;
    &lt;label class="ren-radio"&gt;
      &lt;input type="radio" name="notif" value="all" checked&gt;
      &lt;span class="ren-radio-control"&gt;&lt;/span&gt;
      &lt;span&gt;All updates&lt;/span&gt;
    &lt;/label&gt;
    &lt;label class="ren-radio"&gt;
      &lt;input type="radio" name="notif" value="mentions"&gt;
      &lt;span class="ren-radio-control"&gt;&lt;/span&gt;
      &lt;span&gt;Mentions only&lt;/span&gt;
    &lt;/label&gt;
    &lt;label class="ren-radio"&gt;
      &lt;input type="radio" name="notif" value="none"&gt;
      &lt;span class="ren-radio-control"&gt;&lt;/span&gt;
      &lt;span&gt;Nothing&lt;/span&gt;
    &lt;/label&gt;
  &lt;/div&gt;
&lt;/fieldset&gt;</code></pre>
        </div>
      </section>

      <section class="dx-section" id="variants">
        <p class="dx-kicker">Layouts</p>
        <h2>Variants</h2>
        <div class="dx-vgrid">
          <div class="dx-vrow">
            <span class="dx-vrow-label">Vertical</span>
            <div class="dx-vrow-items">
              <div class="ren-radio-group">
                <label class="ren-radio"><input type="radio" name="v-demo" value="a" checked><span class="ren-radio-control"></span><span>Option A</span></label>
                <label class="ren-radio"><input type="radio" name="v-demo" value="b"><span class="ren-radio-control"></span><span>Option B</span></label>
                <label class="ren-radio"><input type="radio" name="v-demo" value="c"><span class="ren-radio-control"></span><span>Option C</span></label>
              </div>
            </div>
          </div>
          <div class="dx-vrow">
            <span class="dx-vrow-label">Horizontal</span>
            <div class="dx-vrow-items">
              <div class="ren-radio-group ren-radio-group-horizontal" style="display: flex; gap: var(--space-4); flex-wrap: wrap;">
                <label class="ren-radio"><input type="radio" name="h-demo" value="s" checked><span class="ren-radio-control"></span><span>Small</span></label>
                <label class="ren-radio"><input type="radio" name="h-demo" value="m"><span class="ren-radio-control"></span><span>Medium</span></label>
                <label class="ren-radio"><input type="radio" name="h-demo" value="l"><span class="ren-radio-control"></span><span>Large</span></label>
              </div>
            </div>
          </div>
          <div class="dx-vrow">
            <span class="dx-vrow-label">Disabled</span>
            <div class="dx-vrow-items">
              <div class="ren-radio-group">
                <label class="ren-radio"><input type="radio" name="d-demo" value="a" checked disabled><span class="ren-radio-control"></span><span>Selected & disabled</span></label>
                <label class="ren-radio"><input type="radio" name="d-demo" value="b" disabled><span class="ren-radio-control"></span><span>Unselected & disabled</span></label>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>
        <h3>CSS classes</h3>
        <table class="dx-api">
          <thead><tr><th>Class</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-radio</code></td><td>Single radio. The label wrapper around <code>&lt;input type="radio"&gt;</code> + <code>.ren-radio-control</code>.</td></tr>
            <tr><td><code class="dx-api-name">.ren-radio-control</code></td><td>The painted circle. Fills with the accent dot when its sibling input is checked.</td></tr>
            <tr><td><code class="dx-api-name">.ren-radio-group</code></td><td>Container for multiple radios. Default is vertical stack with consistent spacing.</td></tr>
            <tr><td><code class="dx-api-name">.ren-radio-group-horizontal</code></td><td>Lays the group out as a wrap-friendly horizontal row.</td></tr>
          </tbody>
        </table>
        <p>No JavaScript or Web Component. The browser handles the radio-group selection logic via the shared <code>name</code> attribute.</p>
      </section>

      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <p>Radios are one of the platform's most accessible form controls — when grouped correctly, the browser handles the rest.</p>
        <h3>Keyboard</h3>
        <div class="dx-keys">
          <div class="dx-keyrow"><span class="keys"><kbd>Tab</kbd></span><span>Moves focus to the currently selected radio in the group (or the first radio if none is selected).</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>↑</kbd> / <kbd>↓</kbd> / <kbd>←</kbd> / <kbd>→</kbd></span><span>Move focus AND selection to the next radio in the group. Skips disabled radios.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>Space</kbd></span><span>Selects the focused radio (rarely needed — arrow keys already select).</span></div>
        </div>
        <h3>Group labelling</h3>
        <p>Always wrap a radio group in a <code>&lt;fieldset&gt;</code> with a <code>&lt;legend&gt;</code>. Screen readers announce the legend before each option, so users hear the question and the answer in context.</p>
        <div class="dx-callout">
          <p><strong>One radio is not enough.</strong> A single radio with no siblings is meaningless — it can't be turned off. Use a Checkbox or Switch instead.</p>
        </div>
      </section>

      <section class="dx-section" id="examples">
        <p class="dx-kicker">Patterns</p>
        <h2>Examples</h2>
        <h3>Choosing a plan</h3>
        <div class="dx-pre" tabindex="0"><code>&lt;fieldset&gt;
  &lt;legend&gt;Choose a plan&lt;/legend&gt;
  &lt;div class="ren-radio-group"&gt;
    &lt;label class="ren-radio"&gt;
      &lt;input type="radio" name="plan" value="basic" checked&gt;
      &lt;span class="ren-radio-control"&gt;&lt;/span&gt;
      &lt;span&gt;
        &lt;strong&gt;Basic&lt;/strong&gt; — $9/mo, 1 project
      &lt;/span&gt;
    &lt;/label&gt;
    &lt;label class="ren-radio"&gt;
      &lt;input type="radio" name="plan" value="pro"&gt;
      &lt;span class="ren-radio-control"&gt;&lt;/span&gt;
      &lt;span&gt;
        &lt;strong&gt;Pro&lt;/strong&gt; — $29/mo, unlimited
      &lt;/span&gt;
    &lt;/label&gt;
  &lt;/div&gt;
&lt;/fieldset&gt;</code></pre>
      </section>

    </main>
  </div>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-scroll-area.html
type: docs_page
name: ren-scroll-area docs
path: docs/components/ren-scroll-area.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Area — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .demo-scroll { width: 280px; height: 200px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--color-surface); margin-inline: auto; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
    .demo-scroll::-webkit-scrollbar { width: 8px; }
    .demo-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
    .demo-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html" aria-current="page">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Scroll Area</li></ol></nav>
        <p class="dx-kicker">Composite</p>
        <h1>Scroll Area <span class="dx-api-badge dx-api-badge-hybrid" title="Renders without JS; JS adds enhancements">Hybrid</span></h1>
        <p class="lede">A scrollable region with branded thin scrollbars on platforms that support custom styling. For lists inside menus, sidebars inside dialogs, anywhere the scrollbar would otherwise be ugly or oversized.</p>
      </header>

      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>Native scrollbars look fine on macOS (where they're auto-hidden) but stand out on Windows and Linux. ScrollArea provides a thin, branded scrollbar that matches the design system on every platform. Use it inside containers — never on the document root, where the platform default belongs.</p>
        <div class="dx-callout">
          <p><strong>Don't replace the page-level scrollbar.</strong> The browser's main scrollbar is part of the platform. Custom scrollbars belong inside scrollable containers, not around the whole document.</p>
        </div>
      </section>

      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <div class="dx-demo">
          <div class="dx-demo-preview">
            <div class="demo-scroll ren-scroll-area">
              <p style="margin: 0; font-size: var(--text-sm); line-height: 1.6;">Item 1 — Lorem ipsum dolor sit amet.</p>
              <p style="font-size: var(--text-sm); line-height: 1.6;">Item 2 — Consectetur adipiscing elit.</p>
              <p style="font-size: var(--text-sm); line-height: 1.6;">Item 3 — Sed do eiusmod tempor incididunt ut labore.</p>
              <p style="font-size: var(--text-sm); line-height: 1.6;">Item 4 — Ut enim ad minim veniam.</p>
              <p style="font-size: var(--text-sm); line-height: 1.6;">Item 5 — Quis nostrud exercitation ullamco laboris.</p>
              <p style="font-size: var(--text-sm); line-height: 1.6;">Item 6 — Nisi ut aliquip ex ea commodo consequat.</p>
              <p style="font-size: var(--text-sm); line-height: 1.6;">Item 7 — Duis aute irure dolor in reprehenderit.</p>
              <p style="font-size: var(--text-sm); line-height: 1.6;">Item 8 — In voluptate velit esse cillum dolore.</p>
              <p style="font-size: var(--text-sm); line-height: 1.6;">Item 9 — Eu fugiat nulla pariatur.</p>
              <p style="font-size: var(--text-sm); line-height: 1.6;">Item 10 — Excepteur sint occaecat cupidatat non proident.</p>
            </div>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;div class="ren-scroll-area" style="height: 200px;"&gt;
  &lt;!-- Tall content --&gt;
&lt;/div&gt;</code></pre>
        </div>
      </section>

      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>
        <table class="dx-api">
          <thead><tr><th>Class</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-scroll-area</code></td><td>Apply on any container with <code>overflow-y: auto</code> (or <code>overflow-x</code>). Sets a thin scrollbar styled with system colors.</td></tr>
          </tbody>
        </table>
        <p>The class adjusts <code>scrollbar-width</code> and <code>::-webkit-scrollbar</code> consistently. No JavaScript needed.</p>
      </section>

      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <ul>
          <li>Native scrolling — keyboard, mouse wheel, touch, and screen-reader gestures all work without extra wiring.</li>
          <li>Mark scrollable regions with <code>tabindex="0"</code> when they don't already have a focusable child, so keyboard users can scroll with arrow keys.</li>
          <li>Don't hide the scrollbar entirely — it's the only visual hint that more content exists.</li>
        </ul>
      </section>

    </main>
  </div>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-select.html
type: docs_page
name: ren-select docs
path: docs/components/ren-select.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Select — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    /* Demo block */
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: visible; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .dx-vgrid { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
    .dx-vrow { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: start; }
    .dx-vrow-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding-top: var(--space-3); }
    .dx-vrow-items { padding: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
    @media (max-width: 720px) { .dx-vrow { grid-template-columns: 1fr; gap: var(--space-2); } .dx-vrow-label { padding-top: 0; } }
    .dx-anatomy { margin: var(--space-4) 0; display: grid; gap: var(--space-4); }
    .dx-anatomy-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-text); color: var(--color-surface); font-size: var(--text-xs); font-weight: var(--weight-bold); flex-shrink: 0; }
    .dx-anatomy-stage { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-5); }
    .dx-anatomy-stage-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: var(--weight-semibold); margin: 0 0 var(--space-3); }
    .dx-anatomy-parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    @media (max-width: 720px) { .dx-anatomy-parts { grid-template-columns: 1fr; } }
    .dx-anatomy-part { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); display: grid; gap: var(--space-2); }
    .dx-anatomy-part-header { display: flex; align-items: center; gap: var(--space-2); }
    .dx-anatomy-part-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
    .dx-anatomy-part-desc { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); margin: 0; }
    .dx-anatomy-part-desc code { font-size: 0.85em; }

    /* Mock select preview for anatomy */
    .demo-select { position: relative; width: 240px; }
    .demo-select-trigger {
      display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
      width: 100%; min-height: 40px;
      padding: var(--space-2) var(--space-3);
      background: var(--color-input-bg); color: var(--color-text);
      border: 1px solid var(--color-input-border); border-radius: var(--radius-md);
      cursor: pointer; font: inherit; font-size: var(--body-size);
      transition: border-color 150ms;
    }
    .demo-select-trigger:hover { border-color: var(--color-border-strong); }
    .demo-select-trigger[aria-expanded="true"] {
      border-color: var(--color-accent);
      box-shadow: 0 0 0 3px var(--color-accent-subtle);
    }
    .demo-select-list {
      list-style: none; margin: 0; padding: var(--space-1);
      position: absolute; top: calc(100% + var(--space-1)); inset-inline: 0;
      background: var(--color-surface-raised);
      border: 1px solid var(--color-border); border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      z-index: 5;
    }
    .demo-select-list[hidden] { display: none; }
    .demo-select-item {
      display: flex; align-items: center; gap: var(--space-2);
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-sm);
      cursor: pointer; font-size: var(--text-sm);
    }
    .demo-select-item:hover, .demo-select-item[data-highlighted] { background: var(--color-fill); }
    .demo-select-item[aria-selected="true"] { color: var(--color-accent); font-weight: var(--weight-medium); }
  </style>
</head>
<body>

  <header class="dx-nav">
    <div class="dx-nav-inner">
      <a href="../index.html" class="dx-brand">
        <span class="dx-brand-mark">R</span><span>RenDS</span>
        <span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span>
      </a>
      <nav class="dx-nav-menu" aria-label="Primary">
        <a href="../index.html">Docs</a>
        <a href="../components.html" aria-current="page">Components</a>
        <a href="../../templates/index.html">Templates</a>
        <a href="../../create/index.html">Theme Builder</a>
      </nav>
      <div class="dx-nav-actions">
        <a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a>
        <a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a>
      </div>
    </div>
  </header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html" aria-current="page">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);">
          <ol>
            <li><a href="../index.html" class="ren-link-plain">Docs</a></li>
            <li><a href="../components.html" class="ren-link-plain">Components</a></li>
            <li aria-current="page">Select</li>
          </ol>
        </nav>
        <p class="dx-kicker">Composite</p>
        <h1>Select <span class="dx-api-badge dx-api-badge-hybrid" title="Renders without JS; JS adds enhancements">Hybrid</span></h1>
        <p class="lede">A custom-styled dropdown for choosing one option from a list. Renders a trigger button and a popover list using the native Popover API where supported. Keyboard-accessible by default — typeahead, arrow keys, Home/End, Escape — and fully WAI-ARIA listbox compliant.</p>
      </header>

      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>Use a Select when the options need richer rendering than a native <code>&lt;select&gt;</code> can offer — icons, descriptions, group separators, custom layouts. For plain text options under ~10 items in a form, prefer the native element via <a href="ren-field.html" class="ren-link">Form Field</a>; the platform's behavior is hard to beat for accessibility and mobile pickers.</p>
        <div class="dx-callout">
          <p><strong>The trigger is a button, not an input.</strong> Selects don't accept typed input; they show a list and let the user pick. If you need free-text + suggestions, use <a href="ren-combobox.html" class="ren-link">Combobox</a> instead.</p>
        </div>
      </section>

      <section class="dx-section" id="anatomy">
        <p class="dx-kicker">Parts</p>
        <h2>Anatomy</h2>
        <p>A Select has three parts in the DOM: the trigger that's always visible, the listbox content that floats on open, and the items inside.</p>
        <div class="dx-anatomy">
          <div class="dx-anatomy-stage">
            <p class="dx-anatomy-stage-label">Assembled</p>
            <div style="display: flex; justify-content: center;">
              <div class="demo-select" data-anatomy>
                <button type="button" class="demo-select-trigger" aria-haspopup="listbox" aria-expanded="false">
                  <span>Argentina</span>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
                </button>
              </div>
            </div>
          </div>
          <div class="dx-anatomy-parts">
            <div class="dx-anatomy-part">
              <div class="dx-anatomy-part-header"><span class="dx-anatomy-num">1</span><span class="dx-anatomy-part-name">Container</span></div>
              <p class="dx-anatomy-part-desc"><code>&lt;ren-select&gt;</code> wrapper. Holds trigger + content. Owns selection state and exposes a <code>name</code>/<code>value</code> API for forms.</p>
            </div>
            <div class="dx-anatomy-part">
              <div class="dx-anatomy-part-header"><span class="dx-anatomy-num">2</span><span class="dx-anatomy-part-name">Trigger</span></div>
              <p class="dx-anatomy-part-desc"><code>.ren-select-trigger</code> button with <code>aria-haspopup="listbox"</code>. Shows the selected value or a placeholder. Click or Enter opens the list.</p>
            </div>
            <div class="dx-anatomy-part">
              <div class="dx-anatomy-part-header"><span class="dx-anatomy-num">3</span><span class="dx-anatomy-part-name">Content</span></div>
              <p class="dx-anatomy-part-desc"><code>.ren-select-content</code> with <code>role="listbox"</code>. Floats on open via the Popover API. Closes on Escape, click outside, or selection.</p>
            </div>
            <div class="dx-anatomy-part">
              <div class="dx-anatomy-part-header"><span class="dx-anatomy-num">4</span><span class="dx-anatomy-part-name">Item</span></div>
              <p class="dx-anatomy-part-desc"><code>.ren-select-item</code> with <code>role="option"</code> and <code>data-value</code>. Optional <code>data-highlighted</code> for keyboard focus, <code>aria-selected</code> for the active choice.</p>
            </div>
          </div>
        </div>
      </section>

      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <p>Click the trigger to open. Use Up/Down to navigate, Enter to select, Escape to close.</p>
        <div class="dx-demo">
          <div class="dx-demo-preview">
            <div class="demo-select" id="select-demo">
              <button type="button" class="demo-select-trigger" aria-haspopup="listbox" aria-expanded="false" aria-controls="select-demo-list">
                <span data-value-display>Select a country</span>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
              </button>
              <ul class="demo-select-list" id="select-demo-list" role="listbox" hidden>
                <li class="demo-select-item" role="option" data-value="ar">Argentina</li>
                <li class="demo-select-item" role="option" data-value="br">Brazil</li>
                <li class="demo-select-item" role="option" data-value="cl">Chile</li>
                <li class="demo-select-item" role="option" data-value="mx">Mexico</li>
                <li class="demo-select-item" role="option" data-value="us">United States</li>
              </ul>
            </div>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;ren-select name="country" placeholder="Select a country"&gt;
  &lt;button class="ren-select-trigger"&gt;
    &lt;span class="ren-select-value"&gt;&lt;/span&gt;
    &lt;span class="ren-select-icon"&gt;…&lt;/span&gt;
  &lt;/button&gt;
  &lt;div class="ren-select-content" popover&gt;
    &lt;div class="ren-select-item" data-value="ar"&gt;Argentina&lt;/div&gt;
    &lt;div class="ren-select-item" data-value="br"&gt;Brazil&lt;/div&gt;
    &lt;div class="ren-select-item" data-value="cl"&gt;Chile&lt;/div&gt;
    &lt;div class="ren-select-item" data-value="mx"&gt;Mexico&lt;/div&gt;
    &lt;div class="ren-select-item" data-value="us"&gt;United States&lt;/div&gt;
  &lt;/div&gt;
&lt;/ren-select&gt;</code></pre>
        </div>
      </section>

      <section class="dx-section" id="variants">
        <p class="dx-kicker">Shapes</p>
        <h2>Variants</h2>
        <div class="dx-vgrid">
          <div class="dx-vrow">
            <span class="dx-vrow-label">Sizes</span>
            <div class="dx-vrow-items">
              <p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);">Three sizes via <code>size="sm|md|lg"</code> on <code>&lt;ren-select&gt;</code> — generates <code>.ren-select-sm</code>, <code>-md</code> (default), or <code>-lg</code>. The trigger height matches the matching <code>.ren-input</code> size so selects line up with text fields in the same form.</p>
            </div>
          </div>
          <div class="dx-vrow">
            <span class="dx-vrow-label">With icon</span>
            <div class="dx-vrow-items">
              <p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);">Each <code>.ren-select-item</code> can hold any markup — an icon, a description, a badge. The component just routes selection by <code>data-value</code>.</p>
            </div>
          </div>
          <div class="dx-vrow">
            <span class="dx-vrow-label">With description</span>
            <div class="dx-vrow-items">
              <p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);">Add a secondary line per item with <code>.ren-select-item-description</code>. Useful for Plan pickers (name + price) or Locale pickers (name + native script).</p>
            </div>
          </div>
          <div class="dx-vrow">
            <span class="dx-vrow-label">Disabled</span>
            <div class="dx-vrow-items">
              <p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);">Add <code>disabled</code> on the trigger to lock the whole field. <code>aria-disabled</code> on individual <code>.ren-select-item</code> elements skips them in keyboard navigation.</p>
            </div>
          </div>
        </div>
      </section>

      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>

        <h3>CSS classes</h3>
        <table class="dx-api">
          <thead><tr><th>Class</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-select</code></td><td>Wrapper. Establishes the relative positioning context for the popover.</td></tr>
            <tr><td><code class="dx-api-name">.ren-select-trigger</code></td><td>The button users see. Should be a real <code>&lt;button type="button"&gt;</code>. Holds <code>aria-haspopup="listbox"</code> and <code>aria-expanded</code>.</td></tr>
            <tr><td><code class="dx-api-name">.ren-select-value</code></td><td>The slot where the selected option's display text appears.</td></tr>
            <tr><td><code class="dx-api-name">.ren-select-placeholder</code></td><td>Replaces <code>.ren-select-value</code> styling when nothing is selected — muted color.</td></tr>
            <tr><td><code class="dx-api-name">.ren-select-icon</code></td><td>The chevron at the trigger's end. Rotates 180° while the listbox is open.</td></tr>
            <tr><td><code class="dx-api-name">.ren-select-content</code></td><td>The floating list. Use with <code>popover</code> attribute and <code>role="listbox"</code>. Auto-positioned by the component.</td></tr>
            <tr><td><code class="dx-api-name">.ren-select-item</code></td><td>One option. Use with <code>role="option"</code> and a <code>data-value</code>. <code>aria-selected="true"</code> marks the chosen one.</td></tr>
            <tr><td><code class="dx-api-name">.ren-select-sm</code> / <code class="dx-api-name">-lg</code></td><td>Size modifiers. Default trigger is medium (44 px touch target).</td></tr>
          </tbody>
        </table>

        <h3>Web Component attributes</h3>
        <table class="dx-api dx-api-cols-4">
          <thead><tr><th>Attribute</th><th>Type</th><th>Default</th><th>Notes</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">name</code></td><td><span class="dx-api-type">string</span></td><td><span class="dx-api-default">—</span></td><td>Form field name. Submitted via a hidden input so the value travels with the form.</td></tr>
            <tr><td><code class="dx-api-name">value</code></td><td><span class="dx-api-type">string</span></td><td><span class="dx-api-default">—</span></td><td>Initial selected value. Must match a <code>data-value</code> on one of the items.</td></tr>
            <tr><td><code class="dx-api-name">placeholder</code></td><td><span class="dx-api-type">string</span></td><td><span class="dx-api-default">"Select an option"</span></td><td>Trigger text when nothing is selected.</td></tr>
            <tr><td><code class="dx-api-name">placement</code></td><td><span class="dx-api-type">"top" | "right" | "bottom" | "left"</span></td><td><span class="dx-api-default">"bottom"</span></td><td>Preferred side for the listbox. Reflected to <code>data-side</code>; may flip when viewport space requires it.</td></tr>
            <tr><td><code class="dx-api-name">size</code></td><td><span class="dx-api-type">"sm" | "md" | "lg"</span></td><td><span class="dx-api-default">"md"</span></td><td>Visual size variant.</td></tr>
            <tr><td><code class="dx-api-name">disabled</code></td><td><span class="dx-api-type">boolean</span></td><td><span class="dx-api-default">false</span></td><td>Prevents opening. Adds <code>aria-disabled</code>.</td></tr>
          </tbody>
        </table>

        <h3>JavaScript API</h3>
        <table class="dx-api">
          <thead><tr><th>Member</th><th>Description</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">value</code></td><td>Getter / setter. Reads or assigns the selected value. Setting triggers <code>ren-change</code>.</td></tr>
            <tr><td><code class="dx-api-name">selectedItem</code></td><td>Getter. The currently selected <code>.ren-select-item</code> element (or null).</td></tr>
            <tr><td><code class="dx-api-name">open()</code> / <code class="dx-api-name">close()</code></td><td>Programmatically toggle the listbox.</td></tr>
            <tr><td><code class="dx-api-name">isOpen</code></td><td>Boolean getter. True while the listbox is visible.</td></tr>
          </tbody>
        </table>

        <h3>Events</h3>
        <table class="dx-api">
          <thead><tr><th>Event</th><th>Detail</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">ren-change</code></td><td>Fires when the selection changes. <code>event.detail</code>: <code>{ value, item }</code>.</td></tr>
            <tr><td><code class="dx-api-name">ren-open</code> / <code class="dx-api-name">ren-close</code></td><td>Fire when the listbox opens or closes. No detail.</td></tr>
          </tbody>
        </table>
      </section>

      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <p>Implements the WAI-ARIA Listbox pattern via the trigger + popover combination.</p>
        <h3>Keyboard</h3>
        <div class="dx-keys">
          <div class="dx-keyrow"><span class="keys"><kbd>Space</kbd> / <kbd>Enter</kbd></span><span>On the trigger: opens the listbox. On a list item: selects it and closes.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>↑</kbd> / <kbd>↓</kbd></span><span>Move highlight through the items. Wraps at the ends.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>Home</kbd> / <kbd>End</kbd></span><span>Jump to the first or last item.</span></div>
          <div class="dx-keyrow"><span class="keys">Type to filter</span><span>Typeahead — types build a buffer that highlights the first matching item. Buffer clears after 500 ms idle.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>Esc</kbd></span><span>Closes the listbox without changing the selection. Focus returns to the trigger.</span></div>
        </div>
        <h3>Labelling</h3>
        <p>Wrap the Select inside a <a href="ren-field.html" class="ren-link">Form Field</a> so the label, description and error get auto-wired. Or set <code>aria-label</code> directly on the trigger if there's no visible label.</p>
        <div class="dx-callout">
          <p><strong>Avoid putting too many items in one Select.</strong> Past ~15, switch to a <a href="ren-combobox.html" class="ren-link">Combobox</a> with search. Typeahead helps but doesn't scale to hundreds.</p>
        </div>
      </section>

      <section class="dx-section" id="examples">
        <p class="dx-kicker">Patterns</p>
        <h2>Examples</h2>

        <h3>Inside a Form Field</h3>
        <div class="dx-pre" tabindex="0"><code>&lt;ren-field&gt;
  &lt;label&gt;Country&lt;/label&gt;
  &lt;ren-select name="country" placeholder="Select your country"&gt;
    &lt;button class="ren-select-trigger"&gt;
      &lt;span class="ren-select-value"&gt;&lt;/span&gt;
      &lt;span class="ren-select-icon"&gt;…&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="ren-select-content" popover&gt;
      &lt;div class="ren-select-item" data-value="ar"&gt;Argentina&lt;/div&gt;
      &lt;div class="ren-select-item" data-value="br"&gt;Brazil&lt;/div&gt;
    &lt;/div&gt;
  &lt;/ren-select&gt;
&lt;/ren-field&gt;</code></pre>

        <h3>React to selection</h3>
        <div class="dx-pre" tabindex="0"><code>document.querySelector('ren-select')
  .addEventListener('ren-change', (e) =&gt; {
    console.log('Selected', e.detail.value);
    updatePreview(e.detail.value);
  });</code></pre>

        <h3>Items with icons + descriptions</h3>
        <div class="dx-pre" tabindex="0"><code>&lt;div class="ren-select-item" data-value="basic"&gt;
  &lt;span class="ren-select-item-icon"&gt;&lt;!-- icon SVG --&gt;&lt;/span&gt;
  &lt;span&gt;
    &lt;strong&gt;Basic&lt;/strong&gt;
    &lt;span class="ren-select-item-description"&gt;$9 per month&lt;/span&gt;
  &lt;/span&gt;
&lt;/div&gt;</code></pre>
      </section>

    </main>
  </div>

  <script type="module" src="../../components/composites/ren-select/ren-select.js"></script>
  <script>
    // Demo wiring — vanilla, works without the Web Component.
    document.querySelectorAll('.demo-select').forEach(root => {
      const trigger = root.querySelector('.demo-select-trigger');
      const list = root.querySelector('.demo-select-list');
      const display = root.querySelector('[data-value-display]');
      if (!trigger || !list) return;

      const items = list.querySelectorAll('.demo-select-item');
      let highlightIdx = -1;

      const open = () => {
        list.hidden = false;
        trigger.setAttribute('aria-expanded', 'true');
        const selected = list.querySelector('[aria-selected="true"]');
        highlightIdx = selected ? Array.from(items).indexOf(selected) : 0;
        highlight(highlightIdx);
      };
      const close = () => {
        list.hidden = true;
        trigger.setAttribute('aria-expanded', 'false');
        items.forEach(i => i.removeAttribute('data-highlighted'));
      };
      const highlight = (i) => {
        items.forEach((it, idx) => it.toggleAttribute('data-highlighted', idx === i));
      };
      const select = (item) => {
        items.forEach(i => i.removeAttribute('aria-selected'));
        item.setAttribute('aria-selected', 'true');
        if (display) display.textContent = item.textContent.trim();
        close();
        trigger.focus();
      };

      trigger.addEventListener('click', () => list.hidden ? open() : close());
      items.forEach(item => item.addEventListener('click', () => select(item)));

      trigger.addEventListener('keydown', (e) => {
        if ((e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') && list.hidden) {
          e.preventDefault();
          open();
        }
      });
      list.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') { e.preventDefault(); close(); trigger.focus(); }
        else if (e.key === 'ArrowDown') { e.preventDefault(); highlightIdx = (highlightIdx + 1) % items.length; highlight(highlightIdx); }
        else if (e.key === 'ArrowUp')   { e.preventDefault(); highlightIdx = (highlightIdx - 1 + items.length) % items.length; highlight(highlightIdx); }
        else if (e.key === 'Home')      { e.preventDefault(); highlightIdx = 0; highlight(highlightIdx); }
        else if (e.key === 'End')       { e.preventDefault(); highlightIdx = items.length - 1; highlight(highlightIdx); }
        else if (e.key === 'Enter')     { e.preventDefault(); if (highlightIdx >= 0) select(items[highlightIdx]); }
      });
      list.tabIndex = -1;

      // Click outside closes
      document.addEventListener('click', (e) => {
        if (!root.contains(e.target) && !list.hidden) close();
      });

      // Make sure the list is keyboard reachable when open
      const observer = new MutationObserver(() => { if (!list.hidden) list.focus(); });
      observer.observe(list, { attributes: true, attributeFilter: ['hidden'] });
    });
  </script>

  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-separator.html
type: docs_page
name: ren-separator docs
path: docs/components/ren-separator.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Separator — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .dx-vgrid { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
    .dx-vrow { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: start; }
    .dx-vrow-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding-top: var(--space-3); }
    .dx-vrow-items { padding: var(--space-3); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
    @media (max-width: 720px) { .dx-vrow { grid-template-columns: 1fr; gap: var(--space-2); } .dx-vrow-label { padding-top: 0; } }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html" aria-current="page">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Separator</li></ol></nav>
        <p class="dx-kicker">Primitive</p>
        <h1>Separator <span class="dx-api-badge dx-api-badge-css" title="Works without any JavaScript">CSS-only</span></h1>
        <p class="lede">Visual divider between sections. Plain horizontal rule, optional center label, vertical orientation for inline groups.</p>
      </header>
      <section class="dx-section" id="overview"><p class="dx-kicker">About</p><h2>Overview</h2><p>Use a separator when whitespace alone isn't enough to break up content — for example between unrelated form sections, or to mark "or" between two distinct paths.</p></section>
      <section class="dx-section" id="demo"><p class="dx-kicker">Live</p><h2>Demo</h2><div class="dx-demo"><div class="dx-demo-preview" style="flex-direction: column; align-items: stretch; gap: var(--space-4);"><div><p style="margin: 0 0 var(--space-2); font-size: var(--text-sm);">Above</p><hr class="ren-divider"><p style="margin: var(--space-2) 0 0; font-size: var(--text-sm);">Below</p></div><div class="ren-divider">Or continue with</div></div><pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;hr class="ren-divider"&gt;

&lt;div class="ren-divider"&gt;Or continue with&lt;/div&gt;</code></pre></div></section>
      <section class="dx-section" id="api"><p class="dx-kicker">Reference</p><h2>API</h2><table class="dx-api"><thead><tr><th>Class</th><th>Effect</th></tr></thead><tbody><tr><td><code class="dx-api-name">.ren-divider</code></td><td>On <code>&lt;hr&gt;</code> for a plain horizontal divider, or on a <code>&lt;div&gt;</code> with text for a labelled divider.</td></tr><tr><td><code class="dx-api-name">.ren-divider-vertical</code></td><td>Vertical 1 px line. Use inside flex rows to separate inline items.</td></tr></tbody></table></section>
      <section class="dx-section" id="a11y"><p class="dx-kicker">Inclusive by default</p><h2>Accessibility</h2><p>Use the semantic <code>&lt;hr&gt;</code> tag. Screen readers announce it as "separator". For a div-based labelled divider, add <code>role="separator"</code>.</p></section>
    </main>
  </div>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-sheet.html
type: docs_page
name: ren-sheet docs
path: docs/components/ren-sheet.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sheet — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-8) var(--space-5); display: flex; gap: var(--space-3); align-items: center; justify-content: center; }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html" aria-current="page">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Sheet</li></ol></nav>
        <p class="dx-kicker">Composite</p>
        <h1>Sheet <span class="dx-api-badge dx-api-badge-js" title="JavaScript is required for interaction">Requires JS</span></h1>
        <p class="lede">An edge-anchored panel that slides in from a side of the screen. The mobile-first equivalent of a Drawer — bottom sheet on phones, side sheet on desktops, your call.</p>
      </header>

      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>Sheets carry secondary surfaces — filter panels, navigation menus, comment threads — without leaving the page. They're like Dialog but visually attached to an edge instead of floating in the center, which feels more grounded on touch.</p>
        <div class="dx-callout">
          <p><strong>Sheet vs Dialog vs Sidebar.</strong> Sidebar is permanent on wide screens. Dialog is centered modal. Sheet is dismissible from an edge — best when you don't want the sidebar to take permanent room but the user opens it often.</p>
        </div>
      </section>

      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <div class="dx-demo">
          <div class="dx-demo-preview">
            <button class="ren-btn ren-btn-secondary" type="button" data-sheet-trigger="demo-right-sheet">Open right sheet</button>
            <button class="ren-btn ren-btn-secondary" type="button" data-sheet-trigger="demo-bottom-sheet">Open bottom sheet</button>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;ren-sheet side="right" id="filters"&gt;
  &lt;header class="ren-sheet-header"&gt;
    &lt;h2 class="ren-sheet-title"&gt;Filters&lt;/h2&gt;
    &lt;button class="ren-sheet-close" data-sheet-close aria-label="Close"&gt;×&lt;/button&gt;
  &lt;/header&gt;
  &lt;div class="ren-sheet-body"&gt;…&lt;/div&gt;
&lt;/ren-sheet&gt;

&lt;button data-sheet-trigger="filters"&gt;Open&lt;/button&gt;</code></pre>
        </div>

        <!-- Live demo sheets -->
        <ren-sheet side="right" size="md" id="demo-right-sheet">
          <header class="ren-sheet-header">
            <h2 class="ren-sheet-title">Filters</h2>
            <button type="button" class="ren-sheet-close" data-sheet-close aria-label="Close">×</button>
          </header>
          <div class="ren-sheet-body">
            <p>Adjust filters to refine the results.</p>
            <p style="margin-top: var(--space-3);"><label><input type="checkbox"> Only verified</label></p>
            <p><label><input type="checkbox"> In stock</label></p>
            <p><label><input type="checkbox"> Free shipping</label></p>
          </div>
          <footer class="ren-sheet-footer">
            <button type="button" class="ren-btn ren-btn-secondary" data-sheet-close>Cancel</button>
            <button type="button" class="ren-btn ren-btn-primary" data-sheet-close>Apply</button>
          </footer>
        </ren-sheet>

        <ren-sheet side="bottom" size="md" id="demo-bottom-sheet">
          <div class="ren-sheet-handle"></div>
          <header class="ren-sheet-header">
            <h2 class="ren-sheet-title">Share</h2>
            <button type="button" class="ren-sheet-close" data-sheet-close aria-label="Close">×</button>
          </header>
          <div class="ren-sheet-body">
            <p>Pick where to share this link.</p>
          </div>
        </ren-sheet>
      </section>

      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>
        <table class="dx-api">
          <thead><tr><th>Class</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-sheet</code></td><td>The panel itself. Surface, padding, scrolls if content overflows.</td></tr>
            <tr><td><code class="dx-api-name">.ren-sheet-overlay</code></td><td>The dimmed backdrop behind the sheet.</td></tr>
            <tr><td><code class="dx-api-name">.ren-sheet-handle</code></td><td>Optional drag handle indicator (used on bottom sheets).</td></tr>
          </tbody>
        </table>
        <h3>Web Component attributes</h3>
        <table class="dx-api dx-api-cols-4">
          <thead><tr><th>Attribute</th><th>Type</th><th>Default</th><th>Notes</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">side</code></td><td><span class="dx-api-type">"right" | "left" | "top" | "bottom"</span></td><td><span class="dx-api-default">"right"</span></td><td>Edge the sheet slides from.</td></tr>
            <tr><td><code class="dx-api-name">size</code></td><td><span class="dx-api-type">"sm" | "md" | "lg" | "full"</span></td><td><span class="dx-api-default">"md"</span></td><td>Width (for left/right) or height (for top/bottom).</td></tr>
            <tr><td><code class="dx-api-name">open</code></td><td><span class="dx-api-type">boolean</span></td><td><span class="dx-api-default">false</span></td><td>Programmatic open / close.</td></tr>
            <tr><td><code class="dx-api-name">dismissible</code></td><td><span class="dx-api-type">boolean</span></td><td><span class="dx-api-default">true</span></td><td>If false, only the close button can dismiss (no backdrop click, no Esc).</td></tr>
          </tbody>
        </table>
      </section>

      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <ul>
          <li>Sheet is a modal: focus trapped inside while open; <kbd>Esc</kbd> closes; backdrop click closes.</li>
          <li>Use <code>role="dialog"</code> with <code>aria-labelledby</code> pointing at the sheet's heading.</li>
          <li>On open, focus moves to the first focusable element inside (or the close button).</li>
          <li>On close, focus returns to the trigger.</li>
        </ul>
      </section>

    </main>
  </div>
  <script type="module" src="../../components/composites/ren-sheet/ren-sheet.js"></script>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-sidebar.html
type: docs_page
name: ren-sidebar docs
path: docs/components/ren-sidebar.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sidebar — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html" aria-current="page">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Sidebar</li></ol></nav>
        <p class="dx-kicker">Pattern</p>
        <h1>Sidebar <span class="dx-api-badge dx-api-badge-js" title="JavaScript is required for interaction">Requires JS</span></h1>
        <p class="lede">Left navigation column for app shells. Collapsible sections, active-route indicator, footer for account / sign-out. The post-login surface that runs every workspace app.</p>
      </header>
      <section class="dx-section" id="overview"><p class="dx-kicker">About</p><h2>Overview</h2><p>Sidebars present persistent navigation in admin / dashboard apps. They give users a stable mental map of "what's in this app". Stay narrow (240–280 px), collapsible to icons-only on tight screens, scroll independently from the main content.</p></section>
      <section class="dx-section" id="demo"><p class="dx-kicker">Live</p><h2>Demo</h2><div class="dx-demo"><div class="dx-demo-preview" style="display: block; padding: 0; height: 280px;"><div style="display: grid; grid-template-columns: 220px 1fr; height: 100%; background: var(--color-surface);"><aside class="ren-sidebar" style="border-right: 1px solid var(--color-border); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1);"><strong style="font-size: var(--text-sm); padding: var(--space-1) var(--space-2);">Acme</strong><div style="margin-top: var(--space-2); display: flex; flex-direction: column; gap: 2px;"><a href="#" style="padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--color-fill); font-size: var(--text-sm); color: var(--color-text); text-decoration: none; font-weight: var(--weight-medium);">Dashboard</a><a href="#" style="padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none;">Projects</a><a href="#" style="padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none;">Reports</a><a href="#" style="padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none;">Settings</a></div></aside><main style="padding: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm);">Main content</main></div></div><pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;ren-sidebar aria-label="Workspace"&gt;
  &lt;a class="ren-sidebar-brand" href="/"&gt;Acme&lt;/a&gt;
  &lt;ul class="ren-sidebar-section"&gt;
    &lt;li&gt;&lt;a aria-current="page"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;Projects&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/ren-sidebar&gt;</code></pre></div></section>
      <section class="dx-section" id="api"><p class="dx-kicker">Reference</p><h2>API</h2><table class="dx-api"><thead><tr><th>Class</th><th>Effect</th></tr></thead><tbody><tr><td><code class="dx-api-name">.ren-sidebar</code></td><td>The aside container. Use with <code>aria-label</code>.</td></tr><tr><td><code class="dx-api-name">.ren-sidebar-brand</code></td><td>Top brand / logo link.</td></tr><tr><td><code class="dx-api-name">.ren-sidebar-section</code></td><td>One group of links. Optional <code>.ren-sidebar-section-title</code> as a heading.</td></tr><tr><td><code class="dx-api-name">.ren-sidebar-footer</code></td><td>Bottom-pinned slot for account menu, version info.</td></tr><tr><td><code class="dx-api-name">.ren-sidebar-collapsed</code></td><td>State class for icon-only mode.</td></tr></tbody></table></section>
      <section class="dx-section" id="a11y"><p class="dx-kicker">Inclusive by default</p><h2>Accessibility</h2><ul><li>Always <code>&lt;aside&gt;</code> with descriptive <code>aria-label</code>.</li><li>Mark active route with <code>aria-current="page"</code>.</li><li>On mobile (sub-720 px), the sidebar becomes a Sheet triggered from the Nav.</li></ul></section>
    </main>
  </div>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-skeleton.html
type: docs_page
name: ren-skeleton docs
path: docs/components/ren-skeleton.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skeleton — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .dx-vgrid { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
    .dx-vrow { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: start; }
    .dx-vrow-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding-top: var(--space-3); }
    .dx-vrow-items { padding: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
    @media (max-width: 720px) { .dx-vrow { grid-template-columns: 1fr; gap: var(--space-2); } .dx-vrow-label { padding-top: 0; } }

    /* Demo skeleton primitives */
    .demo-sk { background: var(--color-fill); border-radius: var(--radius-sm); animation: skeleton-pulse 1.5s ease-in-out infinite; }
    .demo-sk-line { height: 12px; }
    .demo-sk-line-sm { height: 10px; }
    .demo-sk-circle { border-radius: 50%; width: 40px; height: 40px; flex-shrink: 0; }
    .demo-sk-rect { aspect-ratio: 16 / 9; }
    @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    @media (prefers-reduced-motion: reduce) { .demo-sk { animation: none; } }

    .demo-card-mock { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); max-width: 420px; }
    .demo-card-mock .lines { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html" aria-current="page">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);">
          <ol>
            <li><a href="../index.html" class="ren-link-plain">Docs</a></li>
            <li><a href="../components.html" class="ren-link-plain">Components</a></li>
            <li aria-current="page">Skeleton</li>
          </ol>
        </nav>
        <p class="dx-kicker">Primitive</p>
        <h1>Skeleton <span class="dx-api-badge dx-api-badge-css" title="Works without any JavaScript">CSS-only</span></h1>
        <p class="lede">Placeholder shapes that mimic the layout of content while it loads. They pulse subtly so the page feels alive instead of broken.</p>
      </header>

      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>Use a skeleton when content is on its way and showing real shapes — line widths, avatar circles, image rectangles — helps the user predict what's coming. For shorter waits inside a button or a small panel, prefer <a href="ren-spinner.html" class="ren-link">Spinner</a>.</p>
        <div class="dx-callout">
          <p><strong>Match the real layout, not the loading state.</strong> A skeleton that doesn't look like the final UI introduces a second, jarring layout shift when the data arrives. Mirror the spacing, the line count, and the avatar size of the real component.</p>
        </div>
      </section>

      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <div class="dx-demo">
          <div class="dx-demo-preview">
            <div class="demo-card-mock">
              <div class="ren-skeleton demo-sk demo-sk-circle" aria-hidden="true"></div>
              <div class="lines">
                <div class="ren-skeleton demo-sk demo-sk-line" style="width: 70%;" aria-hidden="true"></div>
                <div class="ren-skeleton demo-sk demo-sk-line-sm" style="width: 90%;" aria-hidden="true"></div>
                <div class="ren-skeleton demo-sk demo-sk-line-sm" style="width: 60%;" aria-hidden="true"></div>
              </div>
            </div>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;div class="card-mock"&gt;
  &lt;div class="ren-skeleton ren-skeleton-circle"&gt;&lt;/div&gt;
  &lt;div&gt;
    &lt;div class="ren-skeleton ren-skeleton-line" style="width: 70%"&gt;&lt;/div&gt;
    &lt;div class="ren-skeleton ren-skeleton-line-sm" style="width: 90%"&gt;&lt;/div&gt;
    &lt;div class="ren-skeleton ren-skeleton-line-sm" style="width: 60%"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
        </div>
      </section>

      <section class="dx-section" id="variants">
        <p class="dx-kicker">Shapes</p>
        <h2>Variants</h2>
        <div class="dx-vgrid">

          <div class="dx-vrow">
            <span class="dx-vrow-label">Line</span>
            <div class="dx-vrow-items">
              <div class="ren-skeleton demo-sk demo-sk-line" style="width: 100%; margin-bottom: var(--space-2);" aria-hidden="true"></div>
              <div class="ren-skeleton demo-sk demo-sk-line" style="width: 80%; margin-bottom: var(--space-2);" aria-hidden="true"></div>
              <div class="ren-skeleton demo-sk demo-sk-line" style="width: 60%;" aria-hidden="true"></div>
            </div>
          </div>

          <div class="dx-vrow">
            <span class="dx-vrow-label">Circle</span>
            <div class="dx-vrow-items" style="display: flex; gap: var(--space-3); align-items: center;">
              <div class="ren-skeleton demo-sk demo-sk-circle" style="width: 24px; height: 24px;" aria-hidden="true"></div>
              <div class="ren-skeleton demo-sk demo-sk-circle" style="width: 40px; height: 40px;" aria-hidden="true"></div>
              <div class="ren-skeleton demo-sk demo-sk-circle" style="width: 64px; height: 64px;" aria-hidden="true"></div>
            </div>
          </div>

          <div class="dx-vrow">
            <span class="dx-vrow-label">Rectangle</span>
            <div class="dx-vrow-items">
              <div class="ren-skeleton demo-sk demo-sk-rect" style="max-width: 280px;" aria-hidden="true"></div>
            </div>
          </div>

        </div>
      </section>

      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>
        <table class="dx-api">
          <thead><tr><th>Class</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-skeleton</code></td><td>Base placeholder. Pulsing background, fully rounded corners on small heights.</td></tr>
            <tr><td><code class="dx-api-name">.ren-skeleton-line</code></td><td>Text line. 12 px tall. Combine with <code>style="width: 70%"</code> to vary line lengths and avoid the "stack of identical bars" look.</td></tr>
            <tr><td><code class="dx-api-name">.ren-skeleton-line-sm</code></td><td>Smaller line, 10 px tall. For body copy under headings.</td></tr>
            <tr><td><code class="dx-api-name">.ren-skeleton-circle</code></td><td>Avatar / icon placeholder. Use inline width/height to match the real avatar size.</td></tr>
            <tr><td><code class="dx-api-name">.ren-skeleton-rect</code></td><td>Image / hero placeholder. Pair with <code>aspect-ratio</code> to lock it to the final image proportions.</td></tr>
          </tbody>
        </table>
      </section>

      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <ul>
          <li>Mark each skeleton element <code>aria-hidden="true"</code>. Loading shapes should not be announced piece by piece.</li>
          <li>The container that swaps in the real content should have <code>aria-busy="true"</code> while loading and <code>aria-live="polite"</code> if the change is significant.</li>
          <li>Pulse animation respects <code>prefers-reduced-motion</code> — the animation stops automatically when the user opts out.</li>
          <li>Don't show a skeleton forever. If a request is slow, swap to a clearer empty state or error message after a few seconds.</li>
        </ul>
      </section>

    </main>
  </div>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-slider.html
type: docs_page
name: ren-slider docs
path: docs/components/ren-slider.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slider — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    input[type="range"].ren-slider { width: 100%; }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html" aria-current="page">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Slider</li></ol></nav>
        <p class="dx-kicker">Composite</p>
        <h1>Slider <span class="dx-api-badge dx-api-badge-js" title="JavaScript is required for interaction">Requires JS</span></h1>
        <p class="lede">Range input for numeric values: volume, opacity, brightness, price ranges. Built on the native <code>&lt;input type="range"&gt;</code> with a styled track and thumb. Single-handle by default; dual handle for ranges.</p>
      </header>

      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>Sliders are the right control when the user picks a value from a continuous (or finely stepped) range. Use them when precision is approximate — opacity, font size, brightness. For exact numbers, use a Number Field. For 2-3 options, use a Toggle Group.</p>
      </section>

      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <div class="dx-demo">
          <div class="dx-demo-preview">
            <label style="display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm);">
              <span style="display: flex; justify-content: space-between;"><span>Volume</span><output id="vol-out">60</output></span>
              <input type="range" class="ren-slider" min="0" max="100" value="60" oninput="document.getElementById('vol-out').value = this.value">
            </label>
            <label style="display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm);">
              <span style="display: flex; justify-content: space-between;"><span>Brightness</span><output id="br-out">80%</output></span>
              <input type="range" class="ren-slider" min="0" max="100" value="80" oninput="document.getElementById('br-out').value = this.value + '%'">
            </label>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;label&gt;
  &lt;span&gt;Volume&lt;/span&gt;
  &lt;input type="range" class="ren-slider" min="0" max="100" value="60"&gt;
&lt;/label&gt;</code></pre>
        </div>
      </section>

      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>
        <table class="dx-api">
          <thead><tr><th>Class / attribute</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-slider</code></td><td>Apply on a native <code>&lt;input type="range"&gt;</code>. Styles the track and thumb consistently across browsers.</td></tr>
            <tr><td><code class="dx-api-name">min</code> / <code class="dx-api-name">max</code> / <code class="dx-api-name">step</code></td><td>Native attributes. <code>step</code> lets you snap to discrete values (e.g. <code>step="5"</code>).</td></tr>
            <tr><td><code class="dx-api-name">value</code></td><td>Current value. Read it via <code>input.valueAsNumber</code>.</td></tr>
          </tbody>
        </table>
        <h3>Dual-handle (range)</h3>
        <p>For "from–to" ranges, use <code>&lt;ren-slider type="range"&gt;</code> — the Web Component renders two thumbs and exposes <code>value</code> as a tuple.</p>
      </section>

      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <ul>
          <li>Native <code>&lt;input type="range"&gt;</code> already announces "slider, value 60 of 100".</li>
          <li>Keyboard works out of the box: arrow keys step ±1, Page Up / Page Down step ±10, Home / End jump to min / max.</li>
          <li>Always pair with a <code>&lt;label&gt;</code> describing what's being adjusted.</li>
          <li>Show the current value visibly (<code>&lt;output&gt;</code> bound to the slider's <code>id</code>) — sliders without a numeric readout are hard to use precisely.</li>
        </ul>
      </section>

    </main>
  </div>
  <script type="module" src="../../components/composites/ren-slider/ren-slider.js"></script>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-spinner.html
type: docs_page
name: ren-spinner docs
path: docs/components/ren-spinner.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spinner — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .dx-vgrid { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
    .dx-vrow { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: start; }
    .dx-vrow-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding-top: var(--space-3); }
    .dx-vrow-items { padding: var(--space-3); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
    @media (max-width: 720px) { .dx-vrow { grid-template-columns: 1fr; gap: var(--space-2); } .dx-vrow-label { padding-top: 0; } }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html" aria-current="page">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Spinner</li></ol></nav>
        <p class="dx-kicker">Primitive</p>
        <h1>Spinner <span class="dx-api-badge dx-api-badge-css" title="Works without any JavaScript">CSS-only</span></h1>
        <p class="lede">Loading indicator. Five sizes, plus a light variant for dark surfaces. Pure CSS — no JavaScript.</p>
      </header>
      <section class="dx-section" id="overview"><p class="dx-kicker">About</p><h2>Overview</h2><p>Show a spinner when a button or panel is processing and the user can't see the result yet. For longer waits or while content is loading inline, prefer <a href="ren-skeleton.html" class="ren-link">Skeleton</a>.</p></section>
      <section class="dx-section" id="demo"><p class="dx-kicker">Live</p><h2>Demo</h2><div class="dx-demo"><div class="dx-demo-preview"><div class="ren-spinner ren-spinner-xs"></div><div class="ren-spinner ren-spinner-sm"></div><div class="ren-spinner"></div><div class="ren-spinner ren-spinner-lg"></div><div class="ren-spinner ren-spinner-xl"></div></div><pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;div class="ren-spinner"&gt;&lt;/div&gt;
&lt;div class="ren-spinner ren-spinner-lg"&gt;&lt;/div&gt;
&lt;div class="ren-spinner ren-spinner-light"&gt;&lt;/div&gt; &lt;!-- on dark bg --&gt;</code></pre></div></section>
      <section class="dx-section" id="api"><p class="dx-kicker">Reference</p><h2>API</h2><table class="dx-api"><thead><tr><th>Class</th><th>Effect</th></tr></thead><tbody><tr><td><code class="dx-api-name">.ren-spinner</code></td><td>Base. 24 px circular spinner.</td></tr><tr><td><code class="dx-api-name">.ren-spinner-xs</code> / <code class="dx-api-name">-sm</code> / <code class="dx-api-name">-lg</code> / <code class="dx-api-name">-xl</code></td><td>Size variants. 12 / 16 / 32 / 40 px.</td></tr><tr><td><code class="dx-api-name">.ren-spinner-light</code></td><td>White spinner for dark backgrounds.</td></tr></tbody></table></section>
      <section class="dx-section" id="a11y"><p class="dx-kicker">Inclusive by default</p><h2>Accessibility</h2><ul><li>The container should have <code>role="status"</code> and a screen-reader-only label: <code>&lt;span class="ren-sr-only"&gt;Loading…&lt;/span&gt;</code>.</li><li>Respects <code>prefers-reduced-motion</code> — the spin slows or stops under the user's preference.</li></ul></section>
    </main>
  </div>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-switch.html
type: docs_page
name: ren-switch docs
path: docs/components/ren-switch.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Switch — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .dx-vgrid { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
    .dx-vrow { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: start; }
    .dx-vrow-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding-top: var(--space-3); }
    .dx-vrow-items { padding: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-3); }
    @media (max-width: 720px) { .dx-vrow { grid-template-columns: 1fr; gap: var(--space-2); } .dx-vrow-label { padding-top: 0; } }
  </style>
</head>
<body>

  <header class="dx-nav">
    <div class="dx-nav-inner">
      <a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a>
      <nav class="dx-nav-menu" aria-label="Primary">
        <a href="../index.html">Docs</a>
        <a href="../components.html" aria-current="page">Components</a>
        <a href="../../templates/index.html">Templates</a>
        <a href="../../create/index.html">Theme Builder</a>
      </nav>
      <div class="dx-nav-actions">
        <a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a>
        <a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a>
      </div>
    </div>
  </header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html" aria-current="page">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);">
          <ol>
            <li><a href="../index.html" class="ren-link-plain">Docs</a></li>
            <li><a href="../components.html" class="ren-link-plain">Components</a></li>
            <li aria-current="page">Switch</li>
          </ol>
        </nav>
        <p class="dx-kicker">Primitive</p>
        <h1>Switch <span class="dx-api-badge dx-api-badge-hybrid" title="Renders without JS; JS adds enhancements">Hybrid</span></h1>
        <p class="lede">A two-state toggle for settings that take effect immediately. Same underlying <code>&lt;input type="checkbox"&gt;</code> as Checkbox, different visual metaphor and different mental model — flip a switch, the change happens now.</p>
      </header>

      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>Switches differ from checkboxes in <em>when</em> their state is committed: a switch toggles the setting the moment you flip it, no Save button required. Use them for settings panels, theme toggles, feature flags, and notification preferences. Checkboxes go inside forms; switches go inside settings.</p>
        <div class="dx-callout">
          <p><strong>Pair the switch with the label, never standalone.</strong> A switch with no surrounding label leaves users guessing what's being toggled. Place the label on the left, the switch on the right.</p>
        </div>
      </section>

      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <div class="dx-demo">
          <div class="dx-demo-preview">
            <label class="ren-switch" style="display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);">
              <span>Email notifications</span>
              <span style="display: inline-flex; align-items: center; gap: var(--space-2);">
                <input type="checkbox" checked>
                <span class="ren-switch-track"></span>
              </span>
            </label>
            <label class="ren-switch" style="display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);">
              <span>Beta features</span>
              <span style="display: inline-flex; align-items: center; gap: var(--space-2);">
                <input type="checkbox">
                <span class="ren-switch-track"></span>
              </span>
            </label>
            <label class="ren-switch" style="display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); opacity: 0.6;">
              <span>Analytics tracking (managed by your admin)</span>
              <span style="display: inline-flex; align-items: center; gap: var(--space-2);">
                <input type="checkbox" disabled>
                <span class="ren-switch-track"></span>
              </span>
            </label>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;label class="ren-switch"&gt;
  &lt;input type="checkbox" checked&gt;
  &lt;span class="ren-switch-track"&gt;&lt;/span&gt;
  &lt;span&gt;Email notifications&lt;/span&gt;
&lt;/label&gt;</code></pre>
        </div>
      </section>

      <section class="dx-section" id="variants">
        <p class="dx-kicker">States</p>
        <h2>Variants</h2>
        <div class="dx-vgrid">
          <div class="dx-vrow">
            <span class="dx-vrow-label">States</span>
            <div class="dx-vrow-items">
              <label class="ren-switch"><input type="checkbox"><span class="ren-switch-track"></span><span>Off</span></label>
              <label class="ren-switch"><input type="checkbox" checked><span class="ren-switch-track"></span><span>On</span></label>
              <label class="ren-switch"><input type="checkbox" disabled><span class="ren-switch-track"></span><span>Disabled (off)</span></label>
              <label class="ren-switch"><input type="checkbox" checked disabled><span class="ren-switch-track"></span><span>Disabled (on)</span></label>
            </div>
          </div>
        </div>
      </section>

      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>
        <h3>CSS classes</h3>
        <table class="dx-api">
          <thead><tr><th>Class</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-switch</code></td><td>The label wrapper. Inline-flex with the input + track + text label.</td></tr>
            <tr><td><code class="dx-api-name">.ren-switch-track</code></td><td>The painted toggle. Background fills with the accent color when the input is checked; the thumb slides via <code>transform</code>.</td></tr>
            <tr><td><code class="dx-api-name">.ren-switch &gt; input[type="checkbox"]</code></td><td>The native input. Visually hidden but fully accessible. Submits with the form using the input's <code>name</code>.</td></tr>
          </tbody>
        </table>
        <p>No JavaScript or Web Component. Pure CSS adjacent-sibling selectors do the work.</p>
      </section>

      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <p>Native checkbox semantics. Screen readers announce "checked" / "not checked" — they don't say "switch" by default, which is fine. If you specifically need the "switch" role announced, add <code>role="switch"</code> on the input.</p>
        <h3>Keyboard</h3>
        <div class="dx-keys">
          <div class="dx-keyrow"><span class="keys"><kbd>Tab</kbd></span><span>Moves focus to the switch.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>Space</kbd></span><span>Toggles on / off.</span></div>
        </div>
        <div class="dx-callout">
          <p><strong>Don't trigger destructive actions on toggle.</strong> A switch represents a state change, not a confirmation. If flipping the switch causes data loss, use a Checkbox + Save button or a confirmation Dialog instead.</p>
        </div>
      </section>

      <section class="dx-section" id="examples">
        <p class="dx-kicker">Patterns</p>
        <h2>Examples</h2>
        <h3>Settings row</h3>
        <p>Common pattern: label on the left, switch on the right, optional helper text below.</p>
        <div class="dx-pre" tabindex="0"><code>&lt;label class="ren-switch settings-row"&gt;
  &lt;span&gt;
    &lt;strong&gt;Two-factor authentication&lt;/strong&gt;
    &lt;span class="settings-row-help"&gt;Adds an extra step at sign-in.&lt;/span&gt;
  &lt;/span&gt;
  &lt;span&gt;
    &lt;input type="checkbox" checked&gt;
    &lt;span class="ren-switch-track"&gt;&lt;/span&gt;
  &lt;/span&gt;
&lt;/label&gt;</code></pre>

        <h3>Persist on change</h3>
        <div class="dx-pre" tabindex="0"><code>document.querySelectorAll('.ren-switch input').forEach(input =&gt; {
  input.addEventListener('change', async () =&gt; {
    await fetch('/api/settings', {
      method: 'PATCH',
      body: JSON.stringify({ [input.name]: input.checked })
    });
    showToast('Saved.');
  });
});</code></pre>
      </section>

    </main>
  </div>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-table.html
type: docs_page
name: ren-table docs
path: docs/components/ren-table.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Data Table — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    /* Page-specific styles — most chrome and table visuals come from
       components/patterns/ren-table/ren-table.css */
    .dx-demo {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      overflow: hidden;
      margin: var(--space-4) 0;
    }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-5); }
    .dx-demo-code   { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }

    /* Variant rows */
    .dx-vgrid { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
    .dx-vrow  { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: start; }
    .dx-vrow-label {
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--color-text-muted);
      padding-top: var(--space-3);
    }
    .dx-vrow-items {
      padding: var(--space-3);
      background: var(--color-surface-raised);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
    }
    @media (max-width: 720px) {
      .dx-vrow { grid-template-columns: 1fr; gap: var(--space-2); }
      .dx-vrow-label { padding-top: 0; }
    }

    /* Demo tables need their own container width */
    .dx-table-demo ren-table,
    .dx-table-demo .ren-table-wrapper { width: 100%; }
  </style>
</head>
<body>
  <header class="dx-nav">
    <div class="dx-nav-inner">
      <a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a>
      <nav class="dx-nav-menu" aria-label="Primary">
        <a href="../index.html">Docs</a>
        <a href="../components.html" aria-current="page">Components</a>
        <a href="../../templates/index.html">Templates</a>
        <a href="../../create/index.html">Theme Builder</a>
      </nav>
      <div class="dx-nav-actions">
        <a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a>
        <a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a>
      </div>
    </div>
  </header>

  <div class="dx-shell dx-shell-grid">

    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html" aria-current="page">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
      </ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Data Table</li></ol></nav>
        <p class="dx-kicker">Pattern</p>
        <h1>Data Table <span class="dx-api-badge dx-api-badge-hybrid" title="Renders without JS; JS adds enhancements">Hybrid</span></h1>
        <p class="lede">A comprehensive, accessible <code>&lt;table&gt;</code> with sortable headers, multi-select rows, sticky header and pinned columns, density variants, integrated client-side pagination, search/filter toolbar, empty state, and a loading shimmer. The workhorse of every CRUD admin.</p>
      </header>

      <!-- 1. OVERVIEW -->
      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>Data Table is the answer to "I have a list and the user is going to scan, sort, filter, and act on rows." It is built on real semantic <code>&lt;table&gt;</code> — never a grid of divs — so every screen reader, every keyboard, and every assistive technology already knows what to do.</p>
        <p>Without JavaScript you get a clean styled table. The <code>&lt;ren-table&gt;</code> custom element layers on sorting, selection (including shift-click ranges), pagination, search filtering, column resize, sticky/pinned columns, and density variants. You opt in to each feature by adding the matching attribute or markup — there is no monolithic config.</p>

        <h3>When to use</h3>
        <ul>
          <li>Tabular data the user will sort, filter, or scan (invoices, users, orders, logs).</li>
          <li>Datasets where selecting one-or-many rows triggers actions (delete, export, bulk-edit).</li>
          <li>Lists big enough to need pagination but small enough to fit in memory client-side.</li>
        </ul>

        <h3>When not to use</h3>
        <ul>
          <li><strong>Cards / tiles instead of rows.</strong> If each item has a thumbnail and 2-3 lines of body, use a <a href="ren-card.html" class="ren-link">Card</a> grid.</li>
          <li><strong>Tree / hierarchical view.</strong> Reach for a tree component (out of scope for v0.9).</li>
          <li><strong>2-3 key/value pairs per item.</strong> Use a <code>&lt;dl&gt;</code> description list.</li>
          <li><strong>A single metric.</strong> Use a stat / KPI card.</li>
          <li><strong>Server-paged datasets bigger than memory.</strong> The built-in pager is client-side; use an external pager that fetches and replaces the table rows instead of relying on <code>data-page-size</code>.</li>
        </ul>

        <div class="dx-callout">
          <p><strong>Real <code>&lt;table&gt;</code>, semantically.</strong> The <code>&lt;ren-table&gt;</code> custom element wraps a native <code>&lt;table&gt;</code> in light DOM. Headers stay <code>&lt;th&gt;</code>, rows stay <code>&lt;tr&gt;</code>, cells stay <code>&lt;td&gt;</code>. Sort state, selection, and pagination all map to standard ARIA (<code>aria-sort</code>, <code>aria-selected</code>, <code>aria-live</code>) — you're not opting out of the platform.</p>
        </div>
      </section>

      <!-- 2. ANATOMY -->
      <section class="dx-section" id="anatomy">
        <p class="dx-kicker">Structure</p>
        <h2>Anatomy</h2>
        <p>A full-featured Data Table has five regions. All but the <code>&lt;table&gt;</code> itself are optional — drop them and the table still works.</p>
        <ol>
          <li><strong>Toolbar</strong> (<code>.ren-table-toolbar</code>) — top bar with search input (<code>[data-table-search]</code>) and bulk actions.</li>
          <li><strong>Wrapper</strong> (<code>.ren-table-wrapper</code>) — horizontal scroll container. Required for sticky / pinned to anchor against.</li>
          <li><strong>Header</strong> (<code>.ren-table-header</code> on <code>&lt;thead&gt;</code>) — sticky by default. Sortable columns add <code>.ren-th-sortable</code> + <code>data-column</code>.</li>
          <li><strong>Body</strong> (<code>.ren-table-body</code> on <code>&lt;tbody&gt;</code>) — rows. Selection column uses <code>.ren-table-select</code>; pinned column uses <code>.ren-th-pinned</code> / <code>.ren-td-pinned</code>.</li>
          <li><strong>Pagination</strong> (<code>.ren-table-pagination</code>) — info text + prev/next/page-size controls. The JS keeps it in sync with <code>data-page-size</code>.</li>
        </ol>
      </section>

      <!-- 3. DEMO -->
      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <p>Click the <strong>Project</strong> or <strong>Status</strong> header to sort. Use the checkboxes to select rows. The toolbar search filters by any visible cell.</p>
        <div class="dx-demo dx-table-demo">
          <div class="dx-demo-preview">
            <ren-table data-page-size="5">
              <div class="ren-table-toolbar">
                <input class="ren-input ren-input-sm" type="search" placeholder="Search projects…" data-table-search aria-label="Search projects">
              </div>
              <div class="ren-table-wrapper">
                <table class="ren-table">
                  <thead class="ren-table-header">
                    <tr>
                      <th class="ren-th ren-table-select" scope="col"><input type="checkbox" aria-label="Select all"></th>
                      <th class="ren-th ren-th-sortable" scope="col" data-column="project">Project</th>
                      <th class="ren-th" scope="col">Owner</th>
                      <th class="ren-th ren-th-sortable" scope="col" data-column="status">Status</th>
                    </tr>
                  </thead>
                  <tbody class="ren-table-body">
                    <tr class="ren-tr" data-row-id="1"><td class="ren-td ren-table-select"><input type="checkbox" aria-label="Select row Atlas"></td><td class="ren-td">Atlas</td><td class="ren-td">Ren</td><td class="ren-td"><span class="ren-badge ren-badge-success">Active</span></td></tr>
                    <tr class="ren-tr" data-row-id="2"><td class="ren-td ren-table-select"><input type="checkbox" aria-label="Select row Hermes"></td><td class="ren-td">Hermes</td><td class="ren-td">Ana</td><td class="ren-td"><span class="ren-badge ren-badge-warning">Pending</span></td></tr>
                    <tr class="ren-tr" data-row-id="3"><td class="ren-td ren-table-select"><input type="checkbox" aria-label="Select row Iris"></td><td class="ren-td">Iris</td><td class="ren-td">Carlos</td><td class="ren-td"><span class="ren-badge ren-badge-secondary">Archived</span></td></tr>
                    <tr class="ren-tr" data-row-id="4"><td class="ren-td ren-table-select"><input type="checkbox" aria-label="Select row Orion"></td><td class="ren-td">Orion</td><td class="ren-td">Sofía</td><td class="ren-td"><span class="ren-badge ren-badge-success">Active</span></td></tr>
                    <tr class="ren-tr" data-row-id="5"><td class="ren-td ren-table-select"><input type="checkbox" aria-label="Select row Lyra"></td><td class="ren-td">Lyra</td><td class="ren-td">Diego</td><td class="ren-td"><span class="ren-badge ren-badge-warning">Pending</span></td></tr>
                    <tr class="ren-tr" data-row-id="6"><td class="ren-td ren-table-select"><input type="checkbox" aria-label="Select row Vega"></td><td class="ren-td">Vega</td><td class="ren-td">Lucía</td><td class="ren-td"><span class="ren-badge ren-badge-success">Active</span></td></tr>
                    <tr class="ren-tr" data-row-id="7"><td class="ren-td ren-table-select"><input type="checkbox" aria-label="Select row Nova"></td><td class="ren-td">Nova</td><td class="ren-td">Tomás</td><td class="ren-td"><span class="ren-badge ren-badge-secondary">Archived</span></td></tr>
                  </tbody>
                </table>
              </div>
              <div class="ren-table-pagination">
                <span class="ren-table-pagination-info"></span>
                <div class="ren-table-pagination-controls">
                  <button class="ren-table-pagination-button" type="button" data-page-prev aria-label="Previous page">‹</button>
                  <button class="ren-table-pagination-button" type="button" data-page-next aria-label="Next page">›</button>
                </div>
              </div>
            </ren-table>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;ren-table data-page-size="5"&gt;
  &lt;div class="ren-table-toolbar"&gt;
    &lt;input class="ren-input ren-input-sm" type="search"
           placeholder="Search…" data-table-search&gt;
  &lt;/div&gt;
  &lt;div class="ren-table-wrapper"&gt;
    &lt;table class="ren-table"&gt;
      &lt;thead class="ren-table-header"&gt;
        &lt;tr&gt;
          &lt;th class="ren-th ren-table-select"&gt;
            &lt;input type="checkbox" aria-label="Select all"&gt;
          &lt;/th&gt;
          &lt;th class="ren-th ren-th-sortable" data-column="project"&gt;Project&lt;/th&gt;
          &lt;th class="ren-th"&gt;Owner&lt;/th&gt;
          &lt;th class="ren-th ren-th-sortable" data-column="status"&gt;Status&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class="ren-table-body"&gt;
        &lt;tr class="ren-tr" data-row-id="1"&gt;…&lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class="ren-table-pagination"&gt;
    &lt;span class="ren-table-pagination-info"&gt;&lt;/span&gt;
    &lt;div class="ren-table-pagination-controls"&gt;
      &lt;button data-page-prev&gt;‹&lt;/button&gt;
      &lt;button data-page-next&gt;›&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/ren-table&gt;</code></pre>
        </div>
      </section>

      <!-- 4. VARIANTS -->
      <section class="dx-section" id="variants">
        <p class="dx-kicker">Visual</p>
        <h2>Variants</h2>

        <div class="dx-vgrid">
          <div class="dx-vrow">
            <div class="dx-vrow-label">Density</div>
            <div class="dx-vrow-items">
              <p>Three densities, runtime-switchable on the host. Tighter rows mean more rows visible at once — useful in admin views.</p>
              <ul>
                <li><code>.ren-table-compact</code> — 36 px row height. For high-density scanning.</li>
                <li><code>.ren-table-comfortable</code> (default) — 48 px row height. Mainstream balance.</li>
                <li>Spacious (60 px) — set <code>--ren-table-row-height: 60px</code> via inline style or theme override.</li>
              </ul>
              <p>Toggle at runtime by adding / removing the class. Sticky header / pinned column offsets adjust automatically.</p>
            </div>
          </div>

          <div class="dx-vrow">
            <div class="dx-vrow-label">Sticky header</div>
            <div class="dx-vrow-items">
              <p>The header is sticky by default once the wrapper scrolls. No attribute required — works the moment the body overflows.</p>
              <pre class="dx-pre" tabindex="0"><code>&lt;div class="ren-table-wrapper" style="max-height: 400px"&gt;
  &lt;table class="ren-table"&gt;…&lt;/table&gt;
&lt;/div&gt;</code></pre>
            </div>
          </div>

          <div class="dx-vrow">
            <div class="dx-vrow-label">Pinned column</div>
            <div class="dx-vrow-items">
              <p>Pin the leftmost (typically selection or row label) column horizontally during scroll. Pinned offsets are managed by the CSS — never hardcode <code>left:</code> values.</p>
              <pre class="dx-pre" tabindex="0"><code>&lt;th class="ren-th ren-th-pinned"&gt;Name&lt;/th&gt;
&lt;td class="ren-td ren-td-pinned"&gt;Atlas&lt;/td&gt;</code></pre>
            </div>
          </div>

          <div class="dx-vrow">
            <div class="dx-vrow-label">Empty state</div>
            <div class="dx-vrow-items">
              <p>When filtering yields zero rows, the JS swaps the body for an empty state. Provide it explicitly so you control the copy.</p>
              <pre class="dx-pre" tabindex="0"><code>&lt;div class="ren-table-empty"&gt;
  &lt;div class="ren-table-empty-icon" aria-hidden="true"&gt;🔍&lt;/div&gt;
  &lt;h3 class="ren-table-empty-title"&gt;No matching projects&lt;/h3&gt;
  &lt;p class="ren-table-empty-description"&gt;Try a different search term or clear filters.&lt;/p&gt;
&lt;/div&gt;</code></pre>
            </div>
          </div>

          <div class="dx-vrow">
            <div class="dx-vrow-label">Loading state</div>
            <div class="dx-vrow-items">
              <p>Set <code>data-loading</code> on <code>&lt;ren-table&gt;</code> to dim rows, disable interaction, and show a shimmering overlay. Combine with an <code>aria-live="polite"</code> announcement region for screen readers.</p>
              <pre class="dx-pre" tabindex="0"><code>&lt;ren-table data-loading&gt;…&lt;/ren-table&gt;</code></pre>
            </div>
          </div>

          <div class="dx-vrow">
            <div class="dx-vrow-label">Virtualization</div>
            <div class="dx-vrow-items">
              <p><em>Not implemented in v0.9.</em> The built-in body renders all visible rows at once. For datasets &gt; ~5 000 rows, switch to an external server-side pager that fetches and replaces rows instead of trying to render everything client-side. A windowed virtualizer is on the v1.0 roadmap.</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 5. API -->
      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>

        <h3>Custom element attributes</h3>
        <table class="dx-api dx-api-cols-4">
          <thead><tr><th>Attribute</th><th>Type</th><th>Default</th><th>Notes</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">data-page-size</code></td><td><span class="dx-api-type">number</span></td><td><span class="dx-api-default">10</span></td><td>Rows per page in the built-in client pager. Set <code>0</code> to disable pagination.</td></tr>
            <tr><td><code class="dx-api-name">data-loading</code></td><td><span class="dx-api-type">boolean</span></td><td><span class="dx-api-default">false</span></td><td>Shows the shimmer overlay and disables row interaction.</td></tr>
          </tbody>
        </table>

        <h3>CSS classes</h3>
        <table class="dx-api">
          <thead><tr><th>Class</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-table</code></td><td>Apply on the <code>&lt;table&gt;</code>. Adds borders, padding, hover, focus rings.</td></tr>
            <tr><td><code class="dx-api-name">.ren-table-wrapper</code></td><td>Required scroll container. Anchors sticky header and pinned columns.</td></tr>
            <tr><td><code class="dx-api-name">.ren-table-header</code></td><td>On <code>&lt;thead&gt;</code>. Sticky by default once the wrapper scrolls.</td></tr>
            <tr><td><code class="dx-api-name">.ren-table-body</code></td><td>On <code>&lt;tbody&gt;</code>. Hosts the row hover and selection styles.</td></tr>
            <tr><td><code class="dx-api-name">.ren-th</code> / <code class="dx-api-name">.ren-td</code></td><td>Header / body cells. Match the densitiy variant on the host.</td></tr>
            <tr><td><code class="dx-api-name">.ren-th-sortable</code></td><td>Marks a column sortable. Pair with <code>data-column="<i>key</i>"</code>.</td></tr>
            <tr><td><code class="dx-api-name">.ren-th-pinned</code> / <code class="dx-api-name">.ren-td-pinned</code></td><td>Sticky column. Offsets handled by the CSS — do not set <code>left:</code> yourself.</td></tr>
            <tr><td><code class="dx-api-name">.ren-th-resize</code></td><td>Drag handle on header for column resize.</td></tr>
            <tr><td><code class="dx-api-name">.ren-table-select</code></td><td>On <code>th</code>/<code>td</code> hosting the selection checkbox column.</td></tr>
            <tr><td><code class="dx-api-name">.ren-tr</code></td><td>Body row. Required for selection state styling.</td></tr>
            <tr><td><code class="dx-api-name">.ren-table-toolbar</code></td><td>Top bar above the table. Holds the search input + bulk actions.</td></tr>
            <tr><td><code class="dx-api-name">.ren-table-toolbar-search</code></td><td>Optional wrapper around the search field for grouping with bulk actions.</td></tr>
            <tr><td><code class="dx-api-name">.ren-table-pagination</code></td><td>Footer with info text and prev / next / page-size controls.</td></tr>
            <tr><td><code class="dx-api-name">.ren-table-pagination-info</code></td><td>"Showing 1-10 of 47" label. JS keeps the text in sync.</td></tr>
            <tr><td><code class="dx-api-name">.ren-table-pagination-controls</code></td><td>Buttons cluster: prev, next, page-size <code>&lt;select&gt;</code>.</td></tr>
            <tr><td><code class="dx-api-name">.ren-table-pagination-button</code></td><td>Style for prev / next buttons. Real <code>&lt;button&gt;</code>, 44 px touch target.</td></tr>
            <tr><td><code class="dx-api-name">.ren-table-empty</code></td><td>Empty / no-results state inside the body.</td></tr>
            <tr><td><code class="dx-api-name">.ren-table-empty-icon</code> / <code class="dx-api-name">-title</code> / <code class="dx-api-name">-description</code></td><td>Composable empty-state parts.</td></tr>
            <tr><td><code class="dx-api-name">.ren-table-loading-overlay</code></td><td>Shimmer layer rendered while <code>data-loading</code> is set.</td></tr>
            <tr><td><code class="dx-api-name">.ren-table-compact</code> / <code class="dx-api-name">.ren-table-comfortable</code></td><td>Density variants on the host or table.</td></tr>
          </tbody>
        </table>

        <h3>Data attributes (consumer-controlled)</h3>
        <table class="dx-api">
          <thead><tr><th>Attribute</th><th>Where</th><th>Purpose</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">data-column</code></td><td><code>&lt;th&gt;</code></td><td>Key for sort state. Must be unique per table.</td></tr>
            <tr><td><code class="dx-api-name">data-row-id</code></td><td><code>&lt;tr&gt;</code></td><td>Stable id for selection state. Use the entity id, not the index.</td></tr>
            <tr><td><code class="dx-api-name">data-table-search</code></td><td>input</td><td>Marker that wires the input to the table's filter pipeline.</td></tr>
            <tr><td><code class="dx-api-name">data-page-prev</code> / <code class="dx-api-name">data-page-next</code></td><td>button</td><td>Pager controls. Press wires next / prev page.</td></tr>
            <tr><td><code class="dx-api-name">data-page-size-select</code></td><td><code>&lt;select&gt;</code></td><td>Page size dropdown. Options become page sizes.</td></tr>
          </tbody>
        </table>

        <h3>States (read-only, set by the JS)</h3>
        <table class="dx-api">
          <thead><tr><th>State</th><th>Where</th><th>Meaning</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">data-sort</code></td><td><code>&lt;th&gt;</code></td><td><code>asc</code> / <code>desc</code> / <code>none</code>. Mirrored to <code>aria-sort</code>.</td></tr>
            <tr><td><code class="dx-api-name">aria-sort</code></td><td><code>&lt;th&gt;</code></td><td>Standard ARIA mirror of <code>data-sort</code>.</td></tr>
            <tr><td><code class="dx-api-name">aria-selected</code></td><td><code>&lt;tr&gt;</code></td><td><code>true</code> when the row's selection checkbox is checked.</td></tr>
            <tr><td><code class="dx-api-name">data-loading</code></td><td><code>&lt;ren-table&gt;</code></td><td>Set by consumer; the JS responds by showing the overlay.</td></tr>
          </tbody>
        </table>

        <h3>Events</h3>
        <table class="dx-api">
          <thead><tr><th>Event</th><th>Detail</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">ren-sort</code></td><td><code>{ column, direction }</code>. Fires after sort applies. Bubbles and is composed.</td></tr>
            <tr><td><code class="dx-api-name">ren-select</code></td><td><code>{ selected }</code>. Fires after row selection changes. Bubbles and is composed.</td></tr>
            <tr><td><code class="dx-api-name">ren-filter</code></td><td><code>{ value }</code>. Fires after the toolbar search filter applies. Bubbles and is composed.</td></tr>
          </tbody>
        </table>
      </section>

      <!-- 6. PUBLIC TOKEN API -->
      <section class="dx-section" id="tokens">
        <p class="dx-kicker">Theming</p>
        <h2>Public token API</h2>
        <p>Override these custom properties on <code>&lt;ren-table&gt;</code> or on a class to retheme the table without writing selectors against the internals.</p>
        <table class="dx-api dx-api-cols-3">
          <thead><tr><th>Token</th><th>Default</th><th>Notes</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">--ren-table-border-color</code></td><td><code>var(--color-border)</code></td><td>All horizontal / vertical lines.</td></tr>
            <tr><td><code class="dx-api-name">--ren-table-cell-padding</code></td><td><code>var(--space-3)</code></td><td>Inline + block padding for every cell.</td></tr>
            <tr><td><code class="dx-api-name">--ren-table-row-height</code></td><td><code>auto</code></td><td>Force a fixed row height across the table.</td></tr>
            <tr><td><code class="dx-api-name">--ren-table-header-bg</code></td><td><code>var(--color-surface-sunken)</code></td><td>Header row background.</td></tr>
            <tr><td><code class="dx-api-name">--ren-table-header-color</code></td><td><code>var(--color-text-muted)</code></td><td>Header text.</td></tr>
            <tr><td><code class="dx-api-name">--ren-table-header-size</code></td><td><code>var(--text-xs)</code></td><td>Header font size.</td></tr>
            <tr><td><code class="dx-api-name">--ren-table-header-weight</code></td><td><code>var(--weight-semibold)</code></td><td>Header font weight.</td></tr>
            <tr><td><code class="dx-api-name">--ren-table-hover-bg</code></td><td><code>var(--color-fill-hover)</code></td><td>Row hover.</td></tr>
            <tr><td><code class="dx-api-name">--ren-table-selected-bg</code></td><td><code>var(--color-accent-subtle)</code></td><td>Selected row background.</td></tr>
            <tr><td><code class="dx-api-name">--ren-table-stripe-bg</code></td><td><code>transparent</code></td><td>Optional zebra striping. Set to <code>var(--color-surface-raised)</code> for stripes.</td></tr>
          </tbody>
        </table>
      </section>

      <!-- 7. ACCESSIBILITY -->
      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>

        <h3>Keyboard</h3>
        <div class="dx-keys">
          <div class="dx-keyrow"><span class="keys"><kbd>Tab</kbd></span><span>Cycles into the toolbar, then into headers, then into the body, then into pagination.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>Enter</kbd> / <kbd>Space</kbd></span><span>On a sortable <code>&lt;th&gt;</code>: cycles asc → desc → none. On a checkbox cell: toggles selection.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>↑</kbd> / <kbd>↓</kbd></span><span>Inside the body: moves focus to the same column in the row above / below.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>Shift</kbd> + click</span><span>On a row checkbox: selects the range between the last clicked row and the current one.</span></div>
        </div>

        <h3>Required ARIA</h3>
        <ul>
          <li>Sortable <code>&lt;th&gt;</code> sets <code>aria-sort="ascending" | "descending" | "none"</code> mirroring <code>data-sort</code>. The JS owns this — you don't touch <code>aria-sort</code> manually.</li>
          <li>Selection checkboxes are real <code>&lt;input type="checkbox"&gt;</code> with <code>aria-label</code> ("Select all" / "Select row N"). Rows reflect state via <code>aria-selected="true"</code>.</li>
          <li>Pagination buttons are real <code>&lt;button&gt;</code> with 44 px touch targets. Disabled uses the <code>disabled</code> attribute, not <code>opacity</code> alone.</li>
          <li>Loading state pairs <code>data-loading</code> with an <code>aria-live="polite"</code> announcement: "Loading…" → "Loaded 47 rows".</li>
          <li>Empty state must include a visible <code>.ren-table-empty-title</code> — don't rely on the icon alone.</li>
          <li>Always provide a <code>&lt;caption class="ren-sr-only"&gt;</code> describing the table for screen readers.</li>
        </ul>

        <div class="dx-callout">
          <p><strong>Never fake a table with divs.</strong> <code>&lt;div role="grid"&gt;</code> exists but it costs you the entire native screen-reader heuristic for column / row navigation. Real <code>&lt;table&gt;</code> + <code>&lt;th scope="col"&gt;</code> + <code>&lt;td&gt;</code> is the right answer 99% of the time.</p>
        </div>
      </section>

      <!-- 8. EXAMPLES -->
      <section class="dx-section" id="examples">
        <p class="dx-kicker">Patterns</p>
        <h2>Examples</h2>

        <h3>Sorting (client-side)</h3>
        <p>Add <code>.ren-th-sortable</code> + <code>data-column</code> on the header. The component owns asc → desc → none cycling and writes <code>data-sort</code> + <code>aria-sort</code>.</p>
        <pre class="dx-pre" tabindex="0"><code>&lt;th class="ren-th ren-th-sortable" data-column="name"&gt;Name&lt;/th&gt;

// Listen for state changes if you need to mirror to URL or analytics:
table.addEventListener('ren-sort', (e) =&gt; {
  history.replaceState(null, '', `?sort=${e.detail.column}.${e.detail.direction}`);
});</code></pre>

        <h3>Server-side sorting</h3>
        <p>Don't pre-sort the rows. Listen for <code>ren-sort</code> and fetch.</p>
        <pre class="dx-pre" tabindex="0"><code>table.addEventListener('ren-sort', async (e) =&gt; {
  table.dataset.loading = '';
  const rows = await fetch(`/api/users?sort=${e.detail.column}&dir=${e.detail.direction}`)
    .then(r =&gt; r.json());
  renderBody(rows);          // your function — replace tbody innerHTML
  delete table.dataset.loading;
});</code></pre>

        <h3>Row selection</h3>
        <p>Real checkboxes with <code>aria-label</code>. Listen for <code>ren-select</code> to enable bulk actions when at least one row is selected.</p>
        <pre class="dx-pre" tabindex="0"><code>&lt;tr class="ren-tr" data-row-id="1"&gt;
  &lt;td class="ren-td ren-table-select"&gt;
    &lt;input type="checkbox" aria-label="Select row Atlas"&gt;
  &lt;/td&gt;
  …
&lt;/tr&gt;

table.addEventListener('ren-select', (e) =&gt; {
  bulkBar.hidden = e.detail.selected.length === 0;
});</code></pre>

        <h3>Pagination</h3>
        <p>Set <code>data-page-size</code> on the host. The JS owns visible-row slicing and writes the "Showing 1-10 of 47" info.</p>
        <pre class="dx-pre" tabindex="0"><code>&lt;ren-table data-page-size="25"&gt;
  …
  &lt;div class="ren-table-pagination"&gt;
    &lt;span class="ren-table-pagination-info"&gt;&lt;/span&gt;
    &lt;div class="ren-table-pagination-controls"&gt;
      &lt;button data-page-prev&gt;Previous&lt;/button&gt;
      &lt;button data-page-next&gt;Next&lt;/button&gt;
      &lt;select data-page-size-select&gt;
        &lt;option value="10"&gt;10&lt;/option&gt;
        &lt;option value="25" selected&gt;25&lt;/option&gt;
        &lt;option value="50"&gt;50&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/ren-table&gt;</code></pre>

        <h3>Density</h3>
        <p>Add the class on the table (or on a wrapper to apply to many at once).</p>
        <pre class="dx-pre" tabindex="0"><code>&lt;table class="ren-table ren-table-compact"&gt;…&lt;/table&gt;</code></pre>

        <h3>Sticky header + pinned first column (admin combo)</h3>
        <pre class="dx-pre" tabindex="0"><code>&lt;div class="ren-table-wrapper" style="max-height: 480px"&gt;
  &lt;table class="ren-table"&gt;
    &lt;thead class="ren-table-header"&gt;
      &lt;tr&gt;
        &lt;th class="ren-th ren-th-pinned"&gt;Name&lt;/th&gt;
        &lt;th class="ren-th"&gt;Email&lt;/th&gt;
        &lt;th class="ren-th"&gt;Role&lt;/th&gt;
        …
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody class="ren-table-body"&gt;
      &lt;tr class="ren-tr"&gt;
        &lt;td class="ren-td ren-td-pinned"&gt;Ren&lt;/td&gt;
        &lt;td class="ren-td"&gt;ren@example.com&lt;/td&gt;
        …
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;</code></pre>

        <h3>Empty state on filter miss</h3>
        <p>Drop the empty state inside the wrapper — the JS swaps it in when the filter pipeline yields zero rows.</p>
        <pre class="dx-pre" tabindex="0"><code>&lt;div class="ren-table-empty" hidden&gt;
  &lt;div class="ren-table-empty-icon" aria-hidden="true"&gt;🔍&lt;/div&gt;
  &lt;h3 class="ren-table-empty-title"&gt;No matching projects&lt;/h3&gt;
  &lt;p class="ren-table-empty-description"&gt;Try a different search or clear filters.&lt;/p&gt;
&lt;/div&gt;</code></pre>
      </section>

    </main>
  </div>

  <script type="module" src="../../components/patterns/ren-table/ren-table.js"></script>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-tabs.html
type: docs_page
name: ren-tabs docs
path: docs/components/ren-tabs.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tabs — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    /* Page-specific styles — chrome and tables live in shell.css */

    /* Custom element default — <div class="ren-tabs"> is display: inline by default,
       which collapses its panels. Force a block layout. */
    ren-tabs {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    /* Demo block: preview frame + code block, stacked */
    .dx-demo {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      overflow: hidden;
      margin: var(--space-4) 0;
    }
    .dx-demo-preview {
      background: var(--color-surface-raised);
      padding: var(--space-6) var(--space-5);
      min-height: 96px;
    }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }

    /* Variant rows — labeled groups of demos */
    .dx-vgrid { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
    .dx-vrow { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: start; }
    .dx-vrow-label {
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--color-text-muted);
      padding-top: var(--space-3);
    }
    .dx-vrow-items {
      padding: var(--space-4);
      background: var(--color-surface-raised);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
    }
    @media (max-width: 720px) {
      .dx-vrow { grid-template-columns: 1fr; gap: var(--space-2); }
      .dx-vrow-label { padding-top: 0; }
    }

    /* Anatomy */
    .dx-anatomy {
      margin: var(--space-4) 0;
      display: grid;
      gap: var(--space-4);
    }
    .dx-anatomy-num {
      display: inline-grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--color-text);
      color: var(--color-surface);
      font-size: var(--text-xs);
      font-weight: var(--weight-bold);
      flex-shrink: 0;
    }
    .dx-anatomy-stage {
      background: var(--color-surface-raised);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: var(--space-6) var(--space-5);
    }
    .dx-anatomy-stage-label {
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--color-text-muted);
      font-weight: var(--weight-semibold);
      margin: 0 0 var(--space-3);
    }
    .dx-anatomy-parts {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-3);
    }
    @media (max-width: 720px) { .dx-anatomy-parts { grid-template-columns: 1fr; } }
    .dx-anatomy-part {
      background: var(--color-surface-raised);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: var(--space-4);
      display: grid;
      gap: var(--space-2);
    }
    .dx-anatomy-part-header {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }
    .dx-anatomy-part-name {
      font-size: var(--text-sm);
      font-weight: var(--weight-semibold);
      color: var(--color-text);
    }
    .dx-anatomy-part-desc {
      font-size: var(--text-sm);
      line-height: 1.5;
      color: var(--color-text-secondary);
      margin: 0;
    }
    .dx-anatomy-part-desc code { font-size: 0.85em; }

    /* Vertical tabs row — 1 col label · 2 col content for the orientation demo */
    .demo-vertical-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--space-6);
      align-items: start;
    }
    .demo-vertical-grid .ren-tab-list {
      flex-direction: column;
      border-bottom: none;
      border-inline-end: 1px solid var(--color-border);
      padding-inline-end: var(--space-3);
      gap: var(--space-1);
    }
    .demo-vertical-grid .ren-tab {
      justify-content: flex-start;
      border-bottom: none;
      border-inline-end: 2px solid transparent;
    }
    .demo-vertical-grid .ren-tab[aria-selected="true"] {
      border-inline-end-color: var(--color-accent);
      border-bottom-color: transparent;
    }
  </style>
</head>
<body>

  <!-- Top bar (shell.css) -->
  <header class="dx-nav">
    <div class="dx-nav-inner">
      <a href="../index.html" class="dx-brand">
        <span class="dx-brand-mark">R</span>
        <span>RenDS</span>
        <span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span>
      </a>
      <nav class="dx-nav-menu" aria-label="Primary">
        <a href="../index.html">Docs</a>
        <a href="../components.html" aria-current="page">Components</a>
        <a href="../../templates/index.html">Templates</a>
        <a href="../../create/index.html">Theme Builder</a>
      </nav>
      <div class="dx-nav-actions">
        <a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a>
        <a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a>
      </div>
    </div>
  </header>

  <!-- Sidebar + content shell -->
  <div class="dx-shell dx-shell-grid">

    <!-- Persistent sidebar -->
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html" aria-current="page">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <!-- Content -->
    <main class="dx-content">

      <!-- Page header -->
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);">
          <ol>
            <li><a href="../index.html" class="ren-link-plain">Docs</a></li>
            <li><a href="../components.html" class="ren-link-plain">Components</a></li>
            <li aria-current="page">Tabs</li>
          </ol>
        </nav>
        <p class="dx-kicker">Composite</p>
        <h1>Tabs <span class="dx-api-badge dx-api-badge-js" title="JavaScript is required for interaction">Requires JS</span></h1>
        <p class="lede">Switch between content panels without leaving the page. Implements the ARIA tablist pattern with full keyboard navigation, three visual variants, and horizontal or vertical orientation. Wrap your tabs in <code>&lt;ren-tabs&gt;</code> and the keyboard, ARIA, and selection state are wired automatically.</p>
      </header>

      <!-- ═══════════════════════════════════════════════════════════
           1. OVERVIEW
           ═══════════════════════════════════════════════════════════ -->
      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>Tabs let a user step through several views of related content within the same screen — settings categories, dataset filters, code-vs-preview toggles. The component handles the parts that are easy to get wrong: roving tabindex, arrow-key navigation, ARIA selection state, panel visibility.</p>

        <p>You write the markup as if it were already accessible (semantic <code>&lt;button role="tab"&gt;</code> elements paired with <code>&lt;div role="tabpanel"&gt;</code>), wrap the whole thing in <code>&lt;ren-tabs&gt;</code>, and the component fills in <code>aria-controls</code>, <code>aria-labelledby</code>, <code>aria-selected</code>, <code>id</code>s, and the <code>hidden</code> state on inactive panels.</p>

        <div class="dx-callout">
          <p><strong>Tabs are for sibling views, not navigation.</strong> If clicking a "tab" should change the URL or load a new page, use <code>ren-nav</code> or plain links instead. Tabs imply that all the content already exists on this page and you're just switching the view.</p>
        </div>
      </section>

      <!-- ═══════════════════════════════════════════════════════════
           2. ANATOMY
           ═══════════════════════════════════════════════════════════ -->
      <section class="dx-section" id="anatomy">
        <p class="dx-kicker">Parts</p>
        <h2>Anatomy</h2>
        <p>A tabs component is built from three nested layers. Each has a single responsibility.</p>

        <div class="dx-anatomy">
          <div class="dx-anatomy-stage">
            <p class="dx-anatomy-stage-label">Assembled</p>
            <div class="ren-tabs">
              <div role="tablist" class="ren-tab-list ren-tab-list-underline" aria-label="Anatomy preview">
                <button role="tab" class="ren-tab" type="button">Overview</button>
                <button role="tab" class="ren-tab" type="button">Activity</button>
                <button role="tab" class="ren-tab" type="button">Settings</button>
              </div>
              <div role="tabpanel" class="ren-tab-panel">
                <p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary);">The <strong>Overview</strong> panel content lives here. Switch tabs above to see the others.</p>
              </div>
              <div role="tabpanel" class="ren-tab-panel" hidden>
                <p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary);">The <strong>Activity</strong> panel — typically a feed of recent events.</p>
              </div>
              <div role="tabpanel" class="ren-tab-panel" hidden>
                <p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary);">The <strong>Settings</strong> panel — a form for configuring the resource.</p>
              </div>
            </div>
          </div>

          <div class="dx-anatomy-parts">
            <div class="dx-anatomy-part">
              <div class="dx-anatomy-part-header">
                <span class="dx-anatomy-num">1</span>
                <span class="dx-anatomy-part-name">Container</span>
              </div>
              <p class="dx-anatomy-part-desc"><code>&lt;ren-tabs&gt;</code> wrapper. Holds the tablist and the panels. Wires up the ARIA, keyboard, and selection state.</p>
            </div>
            <div class="dx-anatomy-part">
              <div class="dx-anatomy-part-header">
                <span class="dx-anatomy-num">2</span>
                <span class="dx-anatomy-part-name">Tab list</span>
              </div>
              <p class="dx-anatomy-part-desc"><code>.ren-tab-list</code> with <code>role="tablist"</code>. The row of triggers. Add a variant modifier for the visual style.</p>
            </div>
            <div class="dx-anatomy-part">
              <div class="dx-anatomy-part-header">
                <span class="dx-anatomy-num">3</span>
                <span class="dx-anatomy-part-name">Tab</span>
              </div>
              <p class="dx-anatomy-part-desc"><code>&lt;button class="ren-tab" role="tab"&gt;</code>. One per panel. Always a button — never a link — because activating it doesn't navigate.</p>
            </div>
            <div class="dx-anatomy-part">
              <div class="dx-anatomy-part-header">
                <span class="dx-anatomy-num">4</span>
                <span class="dx-anatomy-part-name">Panel</span>
              </div>
              <p class="dx-anatomy-part-desc"><code>.ren-tab-panel</code> with <code>role="tabpanel"</code>. One per tab, in the same order. Inactive panels get <code>hidden</code> automatically.</p>
            </div>
          </div>
        </div>
      </section>

      <!-- ═══════════════════════════════════════════════════════════
           3. DEMO
           ═══════════════════════════════════════════════════════════ -->
      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <p>Click the tabs below or focus one and use the arrow keys. Tab and Shift+Tab move in and out of the tablist; arrow keys move between tabs.</p>

        <div class="dx-demo">
          <div class="dx-demo-preview">
            <div class="ren-tabs">
              <div role="tablist" class="ren-tab-list ren-tab-list-underline" aria-label="Project sections">
                <button role="tab" class="ren-tab" type="button">Overview</button>
                <button role="tab" class="ren-tab" type="button">Activity</button>
                <button role="tab" class="ren-tab" type="button">Members</button>
                <button role="tab" class="ren-tab" type="button">Settings</button>
              </div>
              <div role="tabpanel" class="ren-tab-panel">
                <h3 style="font-size: var(--text-base); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2);">Project overview</h3>
                <p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.55;">A quick summary of the project's status, owner, and last activity. Most users land here first.</p>
              </div>
              <div role="tabpanel" class="ren-tab-panel" hidden>
                <h3 style="font-size: var(--text-base); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2);">Recent activity</h3>
                <p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.55;">A feed of the last few events — commits, comments, status changes. Filter by member from the sidebar.</p>
              </div>
              <div role="tabpanel" class="ren-tab-panel" hidden>
                <h3 style="font-size: var(--text-base); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2);">Team members</h3>
                <p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.55;">People with access to this project, their roles, and the last time they were active. Owners can invite or remove.</p>
              </div>
              <div role="tabpanel" class="ren-tab-panel" hidden>
                <h3 style="font-size: var(--text-base); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2);">Project settings</h3>
                <p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.55;">Name, description, visibility, danger-zone actions. Changes are saved as you go.</p>
              </div>
            </div>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;ren-tabs&gt;
  &lt;div role="tablist" class="ren-tab-list ren-tab-list-underline" aria-label="Project sections"&gt;
    &lt;button role="tab" class="ren-tab" type="button"&gt;Overview&lt;/button&gt;
    &lt;button role="tab" class="ren-tab" type="button"&gt;Activity&lt;/button&gt;
    &lt;button role="tab" class="ren-tab" type="button"&gt;Members&lt;/button&gt;
    &lt;button role="tab" class="ren-tab" type="button"&gt;Settings&lt;/button&gt;
  &lt;/div&gt;

  &lt;div role="tabpanel" class="ren-tab-panel"&gt;Overview content&lt;/div&gt;
  &lt;div role="tabpanel" class="ren-tab-panel" hidden&gt;Activity content&lt;/div&gt;
  &lt;div role="tabpanel" class="ren-tab-panel" hidden&gt;Members content&lt;/div&gt;
  &lt;div role="tabpanel" class="ren-tab-panel" hidden&gt;Settings content&lt;/div&gt;
&lt;/ren-tabs&gt;</code></pre>
        </div>
      </section>

      <!-- ═══════════════════════════════════════════════════════════
           4. VARIANTS
           ═══════════════════════════════════════════════════════════ -->
      <section class="dx-section" id="variants">
        <p class="dx-kicker">Shapes</p>
        <h2>Variants</h2>
        <p>Three visual styles, two orientations, two activation modes. Pick by context: underline for primary navigation within a page, pills for filter / segmented controls, enclosed for "documents in folders" metaphors.</p>

        <div class="dx-vgrid">

          <div class="dx-vrow">
            <span class="dx-vrow-label">Underline</span>
            <div class="dx-vrow-items">
              <div class="ren-tabs">
                <div role="tablist" class="ren-tab-list ren-tab-list-underline" aria-label="Underline variant">
                  <button role="tab" class="ren-tab" type="button">First</button>
                  <button role="tab" class="ren-tab" type="button">Second</button>
                  <button role="tab" class="ren-tab" type="button">Third</button>
                </div>
                <div role="tabpanel" class="ren-tab-panel" style="font-size: var(--text-sm); color: var(--color-text-muted);">Default style. Selected tab gets a 2 px accent underline.</div>
                <div role="tabpanel" class="ren-tab-panel" hidden style="font-size: var(--text-sm); color: var(--color-text-muted);">Second panel.</div>
                <div role="tabpanel" class="ren-tab-panel" hidden style="font-size: var(--text-sm); color: var(--color-text-muted);">Third panel.</div>
              </div>
            </div>
          </div>

          <div class="dx-vrow">
            <span class="dx-vrow-label">Pills</span>
            <div class="dx-vrow-items">
              <div class="ren-tabs">
                <div role="tablist" class="ren-tab-list ren-tab-list-pills" aria-label="Pills variant">
                  <button role="tab" class="ren-tab" type="button">All</button>
                  <button role="tab" class="ren-tab" type="button">Active</button>
                  <button role="tab" class="ren-tab" type="button">Archived</button>
                </div>
                <div role="tabpanel" class="ren-tab-panel" style="font-size: var(--text-sm); color: var(--color-text-muted);">Pills feel like a segmented control — good for filters and view modes.</div>
                <div role="tabpanel" class="ren-tab-panel" hidden style="font-size: var(--text-sm); color: var(--color-text-muted);">Active items.</div>
                <div role="tabpanel" class="ren-tab-panel" hidden style="font-size: var(--text-sm); color: var(--color-text-muted);">Archived items.</div>
              </div>
            </div>
          </div>

          <div class="dx-vrow">
            <span class="dx-vrow-label">Enclosed</span>
            <div class="dx-vrow-items">
              <div class="ren-tabs">
                <div role="tablist" class="ren-tab-list ren-tab-list-enclosed" aria-label="Enclosed variant">
                  <button role="tab" class="ren-tab" type="button">README</button>
                  <button role="tab" class="ren-tab" type="button">License</button>
                  <button role="tab" class="ren-tab" type="button">Changelog</button>
                </div>
                <div role="tabpanel" class="ren-tab-panel" style="font-size: var(--text-sm); color: var(--color-text-muted); border: 1px solid var(--color-border); border-top: none; padding: var(--space-4); border-radius: 0 0 var(--radius-md) var(--radius-md);">Enclosed gives the "files in a folder" metaphor. Pair with a bordered panel.</div>
                <div role="tabpanel" class="ren-tab-panel" hidden style="font-size: var(--text-sm); color: var(--color-text-muted); border: 1px solid var(--color-border); border-top: none; padding: var(--space-4); border-radius: 0 0 var(--radius-md) var(--radius-md);">License contents.</div>
                <div role="tabpanel" class="ren-tab-panel" hidden style="font-size: var(--text-sm); color: var(--color-text-muted); border: 1px solid var(--color-border); border-top: none; padding: var(--space-4); border-radius: 0 0 var(--radius-md) var(--radius-md);">Changelog entries.</div>
              </div>
            </div>
          </div>

          <div class="dx-vrow">
            <span class="dx-vrow-label">Vertical</span>
            <div class="dx-vrow-items">
              <div class="ren-tabs" data-orientation="vertical">
                <div class="demo-vertical-grid">
                  <div role="tablist" class="ren-tab-list" aria-label="Vertical tabs" aria-orientation="vertical">
                    <button role="tab" class="ren-tab" type="button">Profile</button>
                    <button role="tab" class="ren-tab" type="button">Account</button>
                    <button role="tab" class="ren-tab" type="button">Billing</button>
                  </div>
                  <div>
                    <div role="tabpanel" class="ren-tab-panel" style="font-size: var(--text-sm); color: var(--color-text-muted);">Profile settings — name, avatar, bio.</div>
                    <div role="tabpanel" class="ren-tab-panel" hidden style="font-size: var(--text-sm); color: var(--color-text-muted);">Account — email, password, 2FA.</div>
                    <div role="tabpanel" class="ren-tab-panel" hidden style="font-size: var(--text-sm); color: var(--color-text-muted);">Billing — plan, invoices, payment method.</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="dx-vrow">
            <span class="dx-vrow-label">Default</span>
            <div class="dx-vrow-items">
              <div class="ren-tabs" data-default="1">
                <div role="tablist" class="ren-tab-list ren-tab-list-pills" aria-label="Default tab demo">
                  <button role="tab" class="ren-tab" type="button">Day</button>
                  <button role="tab" class="ren-tab" type="button">Week</button>
                  <button role="tab" class="ren-tab" type="button">Month</button>
                </div>
                <div role="tabpanel" class="ren-tab-panel" style="font-size: var(--text-sm); color: var(--color-text-muted);">Day stats.</div>
                <div role="tabpanel" class="ren-tab-panel" hidden style="font-size: var(--text-sm); color: var(--color-text-muted);">Week stats — opens by default via <code>default-value="1"</code>.</div>
                <div role="tabpanel" class="ren-tab-panel" hidden style="font-size: var(--text-sm); color: var(--color-text-muted);">Month stats.</div>
              </div>
            </div>
          </div>

        </div>
      </section>

      <!-- ═══════════════════════════════════════════════════════════
           5. API
           ═══════════════════════════════════════════════════════════ -->
      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>

        <h3>CSS classes</h3>
        <table class="dx-api">
          <thead>
            <tr>
              <th>Class</th>
              <th>Effect</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><code class="dx-api-name">.ren-tabs</code></td>
              <td>Container. Sets up the inline-size container query so tabs can adapt to their available width.</td>
            </tr>
            <tr>
              <td><code class="dx-api-name">.ren-tab-list</code></td>
              <td>The row of tab buttons. Used with <code>role="tablist"</code>. Has a default underline divider.</td>
            </tr>
            <tr>
              <td><code class="dx-api-name">.ren-tab-list-underline</code></td>
              <td>Default visual variant. Selected tab gets a 2 px accent underline; the rest sit on a divider line.</td>
            </tr>
            <tr>
              <td><code class="dx-api-name">.ren-tab-list-pills</code></td>
              <td>Segmented-control look. Selected tab fills with <code>--color-fill</code>. No underline divider.</td>
            </tr>
            <tr>
              <td><code class="dx-api-name">.ren-tab-list-enclosed</code></td>
              <td>"Folder tab" look. Selected tab merges into the panel below with a shared border.</td>
            </tr>
            <tr>
              <td><code class="dx-api-name">.ren-tab</code></td>
              <td>Single tab button. Always a <code>&lt;button type="button"&gt;</code> with <code>role="tab"</code>.</td>
            </tr>
            <tr>
              <td><code class="dx-api-name">.ren-tab-panel</code></td>
              <td>One content region. Used with <code>role="tabpanel"</code>. Inactive panels get <code>hidden</code>.</td>
            </tr>
          </tbody>
        </table>

        <h3>Web Component attributes</h3>
        <p>Set on the <code>&lt;ren-tabs&gt;</code> wrapper. Re-rendered on the fly when changed.</p>
        <table class="dx-api dx-api-cols-4">
          <thead>
            <tr>
              <th>Attribute</th>
              <th>Type</th>
              <th>Default</th>
              <th>Notes</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><code class="dx-api-name">activation</code></td>
              <td><span class="dx-api-type">"manual" | "automatic"</span></td>
              <td><span class="dx-api-default">"manual"</span></td>
              <td>Manual: arrow keys move focus; <kbd>Enter</kbd> / <kbd>Space</kbd> selects. Automatic: arrow keys select immediately.</td>
            </tr>
            <tr>
              <td><code class="dx-api-name">orientation</code></td>
              <td><span class="dx-api-type">"horizontal" | "vertical"</span></td>
              <td><span class="dx-api-default">"horizontal"</span></td>
              <td>Sets which arrow keys cycle the tabs (Left/Right vs Up/Down) and the <code>aria-orientation</code> attribute.</td>
            </tr>
            <tr>
              <td><code class="dx-api-name">default-value</code></td>
              <td><span class="dx-api-type">number | string</span></td>
              <td><span class="dx-api-default">0</span></td>
              <td>Index (e.g. <code>"1"</code>) or tab <code>id</code> to select on mount.</td>
            </tr>
          </tbody>
        </table>

        <h3>JavaScript API</h3>
        <table class="dx-api">
          <thead>
            <tr>
              <th>Member</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><code class="dx-api-name">selectedIndex</code></td>
              <td>Getter. Index of the currently selected tab.</td>
            </tr>
            <tr>
              <td><code class="dx-api-name">selectedTab</code></td>
              <td>Getter. The selected <code>&lt;button role="tab"&gt;</code> element, or <code>null</code> if none.</td>
            </tr>
            <tr>
              <td><code class="dx-api-name">selectedPanel</code></td>
              <td>Getter. The currently visible <code>&lt;div role="tabpanel"&gt;</code> element.</td>
            </tr>
            <tr>
              <td><code class="dx-api-name">tabs</code> / <code class="dx-api-name">panels</code></td>
              <td>Getters. Arrays of all tab and panel elements, in document order.</td>
            </tr>
            <tr>
              <td><code class="dx-api-name">selectTabByIndex(index)</code></td>
              <td>Programmatically select a tab by its index. Fires <code>ren-tab-change</code>.</td>
            </tr>
            <tr>
              <td><code class="dx-api-name">selectTabById(id)</code></td>
              <td>Programmatically select a tab by its <code>id</code>. Fires <code>ren-tab-change</code>.</td>
            </tr>
          </tbody>
        </table>

        <h3>Events</h3>
        <table class="dx-api">
          <thead>
            <tr>
              <th>Event</th>
              <th>Detail</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><code class="dx-api-name">ren-tab-change</code></td>
              <td>Bubbles and is composed. Fires whenever a tab becomes selected. <code>event.detail</code>: <code>{ tab, panel, index, id }</code>.</td>
            </tr>
          </tbody>
        </table>

        <div class="dx-pre" tabindex="0"><code>const tabs = document.querySelector('ren-tabs');

tabs.addEventListener('ren-tab-change', (e) =&gt; {
  console.log('Now showing:', e.detail.id, '(index', e.detail.index + ')');
});

// Programmatic switch
tabs.selectTabByIndex(2);</code></div>
      </section>

      <!-- ═══════════════════════════════════════════════════════════
           6. ACCESSIBILITY
           ═══════════════════════════════════════════════════════════ -->
      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <p>The component implements the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/" target="_blank" rel="noopener" class="ren-link">WAI-ARIA Tabs pattern</a> end-to-end. You provide the markup; it provides the wiring.</p>

        <h3>Keyboard</h3>
        <div class="dx-keys">
          <div class="dx-keyrow">
            <span class="keys"><kbd>Tab</kbd></span>
            <span>Moves focus into the tablist. Subsequent <kbd>Tab</kbd> moves to the active panel, then out of the component entirely.</span>
          </div>
          <div class="dx-keyrow">
            <span class="keys"><kbd>←</kbd> / <kbd>→</kbd> (horizontal) or <kbd>↑</kbd> / <kbd>↓</kbd> (vertical)</span>
            <span>Move between tabs. In manual mode, focus only; in automatic mode, focus + select.</span>
          </div>
          <div class="dx-keyrow">
            <span class="keys"><kbd>Enter</kbd> / <kbd>Space</kbd></span>
            <span>Select the focused tab (manual mode). Already selected in automatic mode.</span>
          </div>
          <div class="dx-keyrow">
            <span class="keys"><kbd>Home</kbd> / <kbd>End</kbd></span>
            <span>Jump to the first or last tab.</span>
          </div>
        </div>

        <h3>ARIA wiring</h3>
        <p>You don't need to write any of the ARIA attributes — the component sets them on mount. What gets wired:</p>
        <ul>
          <li><code>role="tablist"</code>, <code>role="tab"</code>, <code>role="tabpanel"</code> if missing.</li>
          <li><code>aria-controls</code> on each tab pointing at its panel's <code>id</code>.</li>
          <li><code>aria-labelledby</code> on each panel pointing at its tab's <code>id</code>.</li>
          <li><code>aria-selected="true|false"</code> kept in sync with the active tab.</li>
          <li><code>aria-orientation="vertical"</code> when <code>orientation="vertical"</code>.</li>
        </ul>

        <h3>Manual vs automatic activation</h3>
        <p>Default is <strong>manual</strong> — arrow keys move focus, the user explicitly presses <kbd>Enter</kbd> or <kbd>Space</kbd> to switch panels. Use this when each panel is expensive to render or has side effects (data fetching, scroll position reset).</p>
        <p>Use <strong>automatic</strong> when panels are cheap and the user is browsing — arrow keys feel snappier when each one immediately swaps the view.</p>

        <div class="dx-callout">
          <p><strong>Always provide an <code>aria-label</code> on the tablist</strong> when there's no visible heading describing what the tabs control. "Project sections" reads well; an unlabelled tablist is announced as just "tab list, 4 tabs" with no context.</p>
        </div>

        <h3>Motion</h3>
        <p>The active-tab indicator uses the <code>--transition-tactile</code> motion token. Under <code>prefers-reduced-motion: reduce</code> the transition is disabled — the underline / fill snaps instead of sliding.</p>
      </section>

      <!-- ═══════════════════════════════════════════════════════════
           7. EXAMPLES
           ═══════════════════════════════════════════════════════════ -->
      <section class="dx-section" id="examples">
        <p class="dx-kicker">Patterns</p>
        <h2>Examples</h2>

        <h3>Settings page</h3>
        <p>A vertical tablist on the left, panels on the right. The pattern most settings UIs converge on.</p>
        <div class="dx-pre" tabindex="0"><code>&lt;ren-tabs orientation="vertical"&gt;
  &lt;div class="settings-grid"&gt;  &lt;!-- your own grid layout --&gt;
    &lt;div role="tablist" class="ren-tab-list" aria-label="Settings" aria-orientation="vertical"&gt;
      &lt;button role="tab" class="ren-tab" type="button"&gt;Profile&lt;/button&gt;
      &lt;button role="tab" class="ren-tab" type="button"&gt;Account&lt;/button&gt;
      &lt;button role="tab" class="ren-tab" type="button"&gt;Billing&lt;/button&gt;
      &lt;button role="tab" class="ren-tab" type="button"&gt;Notifications&lt;/button&gt;
    &lt;/div&gt;

    &lt;div&gt;
      &lt;div role="tabpanel" class="ren-tab-panel"&gt;Profile form&lt;/div&gt;
      &lt;div role="tabpanel" class="ren-tab-panel" hidden&gt;Account form&lt;/div&gt;
      &lt;div role="tabpanel" class="ren-tab-panel" hidden&gt;Billing&lt;/div&gt;
      &lt;div role="tabpanel" class="ren-tab-panel" hidden&gt;Notifications&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/ren-tabs&gt;</code></div>

        <h3>Filter pills</h3>
        <p>Pills work well as a filter row above a list. Pair with <code>activation="automatic"</code> so the list updates as the user arrow-keys through the options.</p>
        <div class="dx-pre" tabindex="0"><code>&lt;ren-tabs activation="automatic"&gt;
  &lt;div role="tablist" class="ren-tab-list ren-tab-list-pills" aria-label="Filter projects"&gt;
    &lt;button role="tab" class="ren-tab" type="button"&gt;All&lt;/button&gt;
    &lt;button role="tab" class="ren-tab" type="button"&gt;Active&lt;/button&gt;
    &lt;button role="tab" class="ren-tab" type="button"&gt;Archived&lt;/button&gt;
  &lt;/div&gt;

  &lt;div role="tabpanel" class="ren-tab-panel"&gt;... rendered list ...&lt;/div&gt;
  &lt;div role="tabpanel" class="ren-tab-panel" hidden&gt;...&lt;/div&gt;
  &lt;div role="tabpanel" class="ren-tab-panel" hidden&gt;...&lt;/div&gt;
&lt;/ren-tabs&gt;</code></div>

        <h3>Lazy-load panels on tab change</h3>
        <p>Listen to <code>ren-tab-change</code> and fetch panel content on demand instead of rendering everything upfront.</p>
        <div class="dx-pre" tabindex="0"><code>const tabs = document.querySelector('#project-tabs');

tabs.addEventListener('ren-tab-change', async (e) =&gt; {
  const panel = e.detail.panel;
  if (panel.dataset.loaded) return;

  panel.innerHTML = '&lt;div class="ren-skeleton skeleton-text"&gt;&lt;/div&gt;';
  const data = await fetch(`/api/${e.detail.id}`).then(r =&gt; r.json());
  panel.innerHTML = renderPanel(data);
  panel.dataset.loaded = 'true';
});</code></div>

        <h3>Sync the active tab with the URL hash</h3>
        <p>Useful for shareable links and back-button support.</p>
        <div class="dx-pre" tabindex="0"><code>const tabs = document.querySelector('#project-tabs');

// Restore from hash on load
if (location.hash) {
  tabs.selectTabById(location.hash.slice(1));
}

// Update hash when the user switches tabs
tabs.addEventListener('ren-tab-change', (e) =&gt; {
  history.replaceState(null, '', `#${e.detail.id}`);
});</code></div>
      </section>

    </main>

  </div>

  <!-- Web Component registration (handles arrow keys, ARIA wiring, etc.) -->
  <script type="module" src="../../components/composites/ren-tabs/ren-tabs.js"></script>

  <!-- Demo wiring — vanilla, runs against div.ren-tabs containers.
       Toggles aria-selected and the hidden attribute on paired panels.
       Falls back gracefully if there's no JS, since the first panel
       starts visible in the markup. -->
  <script>
    document.querySelectorAll('.ren-tabs').forEach(container => {
      const tabs = container.querySelectorAll('[role="tab"]');
      const panels = container.querySelectorAll('[role="tabpanel"]');
      if (!tabs.length || !panels.length) return;

      // Initial selection: data-default attribute, then any aria-selected="true",
      // then index 0.
      let initialIndex = parseInt(container.getAttribute('data-default'), 10);
      if (isNaN(initialIndex)) {
        initialIndex = Array.from(tabs).findIndex(t => t.getAttribute('aria-selected') === 'true');
      }
      if (initialIndex < 0 || initialIndex >= tabs.length) initialIndex = 0;

      const select = (index) => {
        tabs.forEach((t, j) => {
          const active = j === index;
          t.setAttribute('aria-selected', active ? 'true' : 'false');
          t.setAttribute('tabindex', active ? '0' : '-1');
          if (panels[j]) panels[j].toggleAttribute('hidden', !active);
        });
      };

      select(initialIndex);

      tabs.forEach((tab, i) => {
        tab.addEventListener('click', () => select(i));
        tab.addEventListener('keydown', (e) => {
          const isVertical = container.getAttribute('data-orientation') === 'vertical';
          const next = isVertical ? 'ArrowDown' : 'ArrowRight';
          const prev = isVertical ? 'ArrowUp' : 'ArrowLeft';
          let target = null;
          if (e.key === next) target = (i + 1) % tabs.length;
          else if (e.key === prev) target = (i - 1 + tabs.length) % tabs.length;
          else if (e.key === 'Home') target = 0;
          else if (e.key === 'End') target = tabs.length - 1;
          if (target !== null) {
            e.preventDefault();
            select(target);
            tabs[target].focus();
          }
        });
      });
    });
  </script>

  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-tag.html
type: docs_page
name: ren-tag docs
path: docs/components/ren-tag.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tag — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .dx-vgrid { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
    .dx-vrow { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: start; }
    .dx-vrow-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding-top: var(--space-3); }
    .dx-vrow-items { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); align-items: center; }
    @media (max-width: 720px) { .dx-vrow { grid-template-columns: 1fr; gap: var(--space-2); } .dx-vrow-label { padding-top: 0; } }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html" aria-current="page">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Tag</li></ol></nav>
        <p class="dx-kicker">Primitive</p>
        <h1>Tag <span class="dx-api-badge dx-api-badge-css" title="Works without any JavaScript">CSS-only</span></h1>
        <p class="lede">Interactive chips for filters, selections, and removable items. Cousin of Badge — same compact size, but Tags can be clicked, toggled, and dismissed.</p>
      </header>

      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>A Tag is a Badge that does something. Use it for: <strong>filter chips</strong> ("Design", "Engineering" — click to filter the list), <strong>selected items</strong> ("Argentina<span style="display: inline-flex; vertical-align: middle; color: var(--color-text-muted); margin-inline-start: 2px;"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span>" inside a multi-select), <strong>category labels</strong> on a content card. The base styling matches Badge so they share the visual rhythm.</p>
        <div class="dx-callout">
          <p><strong>Tag vs Badge.</strong> If a click does nothing, it's a Badge. If a click filters, selects, or removes — it's a Tag.</p>
        </div>
      </section>

      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <div class="dx-demo">
          <div class="dx-demo-preview">
            <span class="ren-tag">Design</span>
            <span class="ren-tag ren-tag-primary">Engineering</span>
            <span class="ren-tag ren-tag-success">Approved</span>
            <button type="button" class="ren-tag ren-tag-clickable">Filter</button>
            <button type="button" class="ren-tag ren-tag-clickable" aria-pressed="true">Selected</button>
            <span class="ren-tag">design <button type="button" class="ren-tag-dismiss" aria-label="Remove design">×</button></span>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;span class="ren-tag"&gt;Design&lt;/span&gt;
&lt;button class="ren-tag ren-tag-clickable" aria-pressed="false"&gt;Filter&lt;/button&gt;
&lt;span class="ren-tag"&gt;design
  &lt;button class="ren-tag-dismiss" aria-label="Remove"&gt;×&lt;/button&gt;
&lt;/span&gt;</code></pre>
        </div>
      </section>

      <section class="dx-section" id="variants">
        <p class="dx-kicker">Shapes</p>
        <h2>Variants</h2>
        <div class="dx-vgrid">
          <div class="dx-vrow"><span class="dx-vrow-label">Status</span><div class="dx-vrow-items">
            <span class="ren-tag ren-tag-primary">Primary</span>
            <span class="ren-tag ren-tag-success">Success</span>
            <span class="ren-tag ren-tag-warning">Warning</span>
            <span class="ren-tag ren-tag-danger">Danger</span>
          </div></div>
          <div class="dx-vrow"><span class="dx-vrow-label">Sizes</span><div class="dx-vrow-items">
            <span class="ren-tag ren-tag-sm">Small</span>
            <span class="ren-tag">Medium</span>
            <span class="ren-tag ren-tag-lg">Large</span>
          </div></div>
          <div class="dx-vrow"><span class="dx-vrow-label">Clickable</span><div class="dx-vrow-items">
            <button type="button" class="ren-tag ren-tag-clickable" aria-pressed="false">All</button>
            <button type="button" class="ren-tag ren-tag-clickable" aria-pressed="true">Active</button>
            <button type="button" class="ren-tag ren-tag-clickable" aria-pressed="false">Archived</button>
          </div></div>
          <div class="dx-vrow"><span class="dx-vrow-label">Removable</span><div class="dx-vrow-items">
            <span class="ren-tag">design <button type="button" class="ren-tag-dismiss" aria-label="Remove design">×</button></span>
            <span class="ren-tag">engineering <button type="button" class="ren-tag-dismiss" aria-label="Remove engineering">×</button></span>
            <span class="ren-tag ren-tag-primary">a11y <button type="button" class="ren-tag-dismiss" aria-label="Remove a11y">×</button></span>
          </div></div>
          <div class="dx-vrow"><span class="dx-vrow-label">Group</span><div class="dx-vrow-items">
            <div class="ren-tag-group" style="display: flex; flex-wrap: wrap; gap: var(--space-1);">
              <span class="ren-tag">react</span>
              <span class="ren-tag">accessibility</span>
              <span class="ren-tag">forms</span>
              <span class="ren-tag">design-systems</span>
            </div>
          </div></div>
        </div>
      </section>

      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>
        <h3>CSS classes</h3>
        <table class="dx-api">
          <thead><tr><th>Class</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-tag</code></td><td>Base. Slightly more padding than Badge to accommodate the dismiss button.</td></tr>
            <tr><td><code class="dx-api-name">.ren-tag-primary</code> / <code class="dx-api-name">-success</code> / <code class="dx-api-name">-warning</code> / <code class="dx-api-name">-danger</code></td><td>Status fills.</td></tr>
            <tr><td><code class="dx-api-name">.ren-tag-sm</code> / <code class="dx-api-name">-lg</code></td><td>Size variants.</td></tr>
            <tr><td><code class="dx-api-name">.ren-tag-clickable</code></td><td>Adds hover and focus styles. Use on a real <code>&lt;button&gt;</code> with <code>aria-pressed</code> for toggle behavior.</td></tr>
            <tr><td><code class="dx-api-name">.ren-tag-dismiss</code></td><td>The × close button inside a removable tag. Always pair with <code>aria-label</code>.</td></tr>
            <tr><td><code class="dx-api-name">.ren-tag-group</code></td><td>Container for multiple tags. Provides flex wrap and consistent gap.</td></tr>
            <tr><td><code class="dx-api-name">[aria-pressed="true"]</code> or <code class="dx-api-name">[data-selected]</code></td><td>Marks a clickable tag as currently selected.</td></tr>
          </tbody>
        </table>
        <p>No JavaScript required. Click handling and state management live in your app.</p>
      </section>

      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <ul>
          <li><strong>Clickable tags</strong>: must be a real <code>&lt;button&gt;</code> with <code>aria-pressed</code> for toggle state. A clickable <code>&lt;span&gt;</code> is not keyboard-accessible.</li>
          <li><strong>Dismiss buttons</strong>: always include <code>aria-label="Remove {tag-name}"</code> so screen readers announce what's being removed.</li>
          <li><strong>Tag groups for filters</strong>: wrap them in a labelled region — <code>&lt;div role="group" aria-label="Filter by category"&gt;</code>.</li>
        </ul>
        <h3>Keyboard</h3>
        <div class="dx-keys">
          <div class="dx-keyrow"><span class="keys"><kbd>Tab</kbd></span><span>Moves through clickable tags in document order.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>Enter</kbd> / <kbd>Space</kbd></span><span>Activates the focused tag (toggle pressed state, run the action, dismiss).</span></div>
        </div>
      </section>

      <section class="dx-section" id="examples">
        <p class="dx-kicker">Patterns</p>
        <h2>Examples</h2>
        <h3>Filter chips</h3>
        <div class="dx-pre" tabindex="0"><code>&lt;div role="group" aria-label="Filter by status" class="ren-tag-group"&gt;
  &lt;button class="ren-tag ren-tag-clickable" aria-pressed="true"&gt;All&lt;/button&gt;
  &lt;button class="ren-tag ren-tag-clickable" aria-pressed="false"&gt;Active&lt;/button&gt;
  &lt;button class="ren-tag ren-tag-clickable" aria-pressed="false"&gt;Archived&lt;/button&gt;
&lt;/div&gt;</code></div>

        <h3>Removable selections</h3>
        <div class="dx-pre" tabindex="0"><code>&lt;span class="ren-tag"&gt;
  argentina
  &lt;button class="ren-tag-dismiss" aria-label="Remove Argentina"
          onclick="removeCountry('ar')"&gt;×&lt;/button&gt;
&lt;/span&gt;</code></div>
      </section>

    </main>
  </div>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-toast.html
type: docs_page
name: ren-toast docs
path: docs/components/ren-toast.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toast — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .dx-vgrid { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
    .dx-vrow { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: start; }
    .dx-vrow-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding-top: var(--space-3); }
    .dx-vrow-items { padding: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-3); }
    @media (max-width: 720px) { .dx-vrow { grid-template-columns: 1fr; gap: var(--space-2); } .dx-vrow-label { padding-top: 0; } }

    /* Static toast preview */
    .demo-toast {
      display: flex; align-items: flex-start; gap: var(--space-3);
      width: 320px;
      padding: var(--space-3) var(--space-4);
      background: var(--color-surface-raised);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
    }
    .demo-toast-icon { flex-shrink: 0; width: 20px; height: 20px; display: grid; place-items: center; }
    .demo-toast-icon-success { color: var(--color-success); }
    .demo-toast-icon-warning { color: var(--color-warning); }
    .demo-toast-icon-danger { color: var(--color-danger); }
    .demo-toast-icon-info { color: var(--color-info); }
    .demo-toast-body { flex: 1; min-width: 0; }
    .demo-toast-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin: 0 0 2px; }
    .demo-toast-desc { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; line-height: 1.5; }
    .demo-toast-close { background: transparent; border: 0; padding: 2px; color: var(--color-text-muted); cursor: pointer; line-height: 1; }
    .demo-toast-close:hover { color: var(--color-text); }
  </style>
</head>
<body>

  <header class="dx-nav">
    <div class="dx-nav-inner">
      <a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a>
      <nav class="dx-nav-menu" aria-label="Primary">
        <a href="../index.html">Docs</a>
        <a href="../components.html" aria-current="page">Components</a>
        <a href="../../templates/index.html">Templates</a>
        <a href="../../create/index.html">Theme Builder</a>
      </nav>
      <div class="dx-nav-actions">
        <a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a>
        <a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a>
      </div>
    </div>
  </header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html" aria-current="page">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);">
          <ol>
            <li><a href="../index.html" class="ren-link-plain">Docs</a></li>
            <li><a href="../components.html" class="ren-link-plain">Components</a></li>
            <li aria-current="page">Toast</li>
          </ol>
        </nav>
        <p class="dx-kicker">Composite</p>
        <h1>Toast <span class="dx-api-badge dx-api-badge-js" title="JavaScript is required for interaction">Requires JS</span></h1>
        <p class="lede">Transient notifications that appear in a corner of the screen and dismiss themselves after a few seconds. Announced to screen readers via live regions, dismissible by swipe / click, and stackable when several fire at once.</p>
      </header>

      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>Use toasts for low-importance, transient feedback: "Saved", "Copied to clipboard", "Connection restored". They're the right primitive when you need to acknowledge an action without interrupting the user's flow. For high-stakes feedback (errors that block a flow), use a Dialog or an inline error message inside a <a href="ren-field.html" class="ren-link">Form Field</a> instead.</p>
        <div class="dx-callout">
          <p><strong>Don't put critical actions in a toast.</strong> Toasts disappear; users miss them. If the user must read the message or perform an action in response, use a Dialog. Toast is for fire-and-forget acknowledgement.</p>
        </div>
      </section>

      <section class="dx-section" id="anatomy">
        <p class="dx-kicker">Parts</p>
        <h2>Anatomy</h2>
        <p>A toast lives in a fixed-position viewport (one per corner of the screen) and contains an icon, title, optional description, and an optional action.</p>
        <div style="background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-5); margin: var(--space-4) 0; display: flex; justify-content: center;">
          <div class="demo-toast" role="status">
            <span class="demo-toast-icon demo-toast-icon-success">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>
            </span>
            <div class="demo-toast-body">
              <p class="demo-toast-title">Project saved</p>
              <p class="demo-toast-desc">Your changes are visible to the team.</p>
            </div>
            <button class="demo-toast-close" aria-label="Dismiss">×</button>
          </div>
        </div>
      </section>

      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <p>Trigger a toast from the buttons below. The viewport renders in the bottom-right corner of this page; toasts auto-dismiss after 4 seconds, or click the × to dismiss early.</p>
        <div class="dx-demo">
          <div class="dx-demo-preview">
            <button type="button" class="ren-btn ren-btn-secondary" data-toast="success">Success</button>
            <button type="button" class="ren-btn ren-btn-secondary" data-toast="info">Info</button>
            <button type="button" class="ren-btn ren-btn-secondary" data-toast="warning">Warning</button>
            <button type="button" class="ren-btn ren-btn-secondary" data-toast="danger">Danger</button>
            <button type="button" class="ren-btn ren-btn-secondary" data-toast="action">With action</button>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>// Imperative API — most common usage
window.toast.success('Project saved', { description: 'Your changes are live.' });
window.toast.info('Sync started');
window.toast.warning('Rate limit approaching');
window.toast.danger('Delete failed', { description: 'Please try again.' });
window.toast.show({ title: 'Email sent', action: { label: 'Undo', onClick: () =&gt; rollback() } });</code></pre>
        </div>

        <!-- Toast viewport: a single instance is auto-created if missing.
             Drop one in explicitly to control position. -->
        <ren-toast-viewport data-position="bottom-right"></ren-toast-viewport>
      </section>

      <section class="dx-section" id="variants">
        <p class="dx-kicker">Shapes</p>
        <h2>Variants</h2>
        <div class="dx-vgrid">
          <div class="dx-vrow">
            <span class="dx-vrow-label">Status colors</span>
            <div class="dx-vrow-items"><p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);">Four status variants: <code>success</code>, <code>info</code>, <code>warning</code>, <code>danger</code>. Each tints the icon and the left border in the matching semantic color.</p></div>
          </div>
          <div class="dx-vrow">
            <span class="dx-vrow-label">Position</span>
            <div class="dx-vrow-items"><p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);">The viewport supports six positions via <code>data-position</code>: <code>top-right</code>, <code>top-left</code>, <code>top-center</code>, <code>bottom-right</code> (default), <code>bottom-left</code>, <code>bottom-center</code>. Pick one for your whole app.</p></div>
          </div>
          <div class="dx-vrow">
            <span class="dx-vrow-label">With action</span>
            <div class="dx-vrow-items"><p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);">Add an inline action button — <strong>Undo</strong>, <strong>Retry</strong>, <strong>View</strong>. Best paired with a slightly longer auto-dismiss timeout so the user has time to react.</p></div>
          </div>
          <div class="dx-vrow">
            <span class="dx-vrow-label">Persistent</span>
            <div class="dx-vrow-items"><p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);">Set <code>duration: 0</code> to disable auto-dismiss — the user must close it manually. Use sparingly; reserve for important state changes the user has to acknowledge.</p></div>
          </div>
        </div>
      </section>

      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>

        <h3>CSS classes</h3>
        <table class="dx-api">
          <thead><tr><th>Class</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-toast-viewport</code></td><td>Fixed-position container. One per app, picks a corner via <code>data-position</code>. Has <code>aria-live="polite"</code> so screen readers announce additions.</td></tr>
            <tr><td><code class="dx-api-name">.ren-toast</code></td><td>Single notification. Card-like surface with shadow. Slides in from the viewport's edge.</td></tr>
            <tr><td><code class="dx-api-name">.ren-toast-icon</code></td><td>Leading status icon. Color matches the toast's variant.</td></tr>
            <tr><td><code class="dx-api-name">.ren-toast-body</code></td><td>Title + optional description region.</td></tr>
            <tr><td><code class="dx-api-name">.ren-toast-title</code></td><td>The bold one-line message.</td></tr>
            <tr><td><code class="dx-api-name">.ren-toast-description</code></td><td>Secondary line with detail. Muted color.</td></tr>
            <tr><td><code class="dx-api-name">.ren-toast-action</code></td><td>Inline action button. Use a real <code>&lt;button&gt;</code>; pair with a callback in the JS API.</td></tr>
            <tr><td><code class="dx-api-name">.ren-toast-close</code></td><td>Dismiss × button. Always present, sized to be tappable on touch.</td></tr>
          </tbody>
        </table>

        <h3>JavaScript API</h3>
        <p>The component exposes a global <code>window.toast</code> with one method per status, plus a generic <code>show()</code>. Status methods return an <code>id</code> you can later pass to <code>toast.dismiss(id)</code>.</p>
        <table class="dx-api dx-api-cols-3">
          <thead><tr><th>Method</th><th>Returns</th><th>Description</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">toast.success(title, options?)</code></td><td><span class="dx-api-type">string (id)</span></td><td>Green check, polite announce.</td></tr>
            <tr><td><code class="dx-api-name">toast.info(title, options?)</code></td><td><span class="dx-api-type">string (id)</span></td><td>Blue info, polite.</td></tr>
            <tr><td><code class="dx-api-name">toast.warning(title, options?)</code></td><td><span class="dx-api-type">string (id)</span></td><td>Amber, polite.</td></tr>
            <tr><td><code class="dx-api-name">toast.danger(title, options?)</code></td><td><span class="dx-api-type">string (id)</span></td><td>Red, <em>assertive</em> announce — screen readers interrupt.</td></tr>
            <tr><td><code class="dx-api-name">toast.show(options)</code></td><td><span class="dx-api-type">string (id)</span></td><td>Full control. <code>{ title, description, status, duration, action }</code>.</td></tr>
            <tr><td><code class="dx-api-name">toast.dismiss(id)</code></td><td><span class="dx-api-type">void</span></td><td>Dismiss a specific toast by the id returned from <code>show</code>/status methods.</td></tr>
            <tr><td><code class="dx-api-name">toast.dismissAll()</code></td><td><span class="dx-api-type">void</span></td><td>Dismiss every visible toast (useful on route change).</td></tr>
            <tr><td><code class="dx-api-name">toast.promise(promise, opts)</code></td><td><span class="dx-api-type">Promise</span></td><td>Shows a loading toast that swaps to success/error when the promise settles. <code>opts: { loading, success, error }</code> — each can be a string or function of the resolved/rejected value.</td></tr>
          </tbody>
        </table>

        <h3>Options</h3>
        <table class="dx-api dx-api-cols-4">
          <thead><tr><th>Option</th><th>Type</th><th>Default</th><th>Notes</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">title</code></td><td><span class="dx-api-type">string</span></td><td><span class="dx-api-default">—</span></td><td>The bold message. Required.</td></tr>
            <tr><td><code class="dx-api-name">description</code></td><td><span class="dx-api-type">string</span></td><td><span class="dx-api-default">—</span></td><td>Optional secondary line.</td></tr>
            <tr><td><code class="dx-api-name">status</code></td><td><span class="dx-api-type">"success" | "info" | "warning" | "danger"</span></td><td><span class="dx-api-default">"info"</span></td><td>Visual variant.</td></tr>
            <tr><td><code class="dx-api-name">duration</code></td><td><span class="dx-api-type">number (ms)</span></td><td><span class="dx-api-default">4000</span></td><td>Auto-dismiss after N ms. Pass <code>0</code> for persistent.</td></tr>
            <tr><td><code class="dx-api-name">action</code></td><td><span class="dx-api-type">{ label, onClick }</span></td><td><span class="dx-api-default">—</span></td><td>Inline action button. Click runs <code>onClick</code> then dismisses.</td></tr>
          </tbody>
        </table>
      </section>

      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <p>Toasts are tricky for accessibility — they appear without focus and disappear without warning. RenDS handles the announcement via live regions; you handle the message phrasing.</p>
        <h3>Live region behavior</h3>
        <ul>
          <li><strong>Success / info / warning</strong> use <code>aria-live="polite"</code> — announced when the screen reader is idle.</li>
          <li><strong>Danger</strong> uses <code>aria-live="assertive"</code> — interrupts the current announcement. Reserve for genuine errors.</li>
        </ul>
        <h3>Keyboard</h3>
        <div class="dx-keys">
          <div class="dx-keyrow"><span class="keys"><kbd>F6</kbd></span><span>Moves focus to the toast viewport. Useful when an action is present and the user wants to act before it dismisses.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>Esc</kbd></span><span>While focused on a toast: dismisses it.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>Tab</kbd></span><span>Cycles through the action button and the close button inside a toast.</span></div>
        </div>
        <div class="dx-callout">
          <p><strong>Pause auto-dismiss on hover and focus.</strong> The viewport pauses the dismiss timer when the user hovers over it or any toast inside receives focus — they're trying to read it.</p>
        </div>
      </section>

      <section class="dx-section" id="examples">
        <p class="dx-kicker">Patterns</p>
        <h2>Examples</h2>

        <h3>Confirm a save</h3>
        <div class="dx-pre" tabindex="0"><code>async function save() {
  await api.save();
  toast.success('Saved', { description: 'Visible to the team in a few seconds.' });
}</code></pre>

        <h3>Undoable delete</h3>
        <div class="dx-pre" tabindex="0"><code>function deleteRow(id) {
  const backup = removeOptimistically(id);

  toast.show({
    title: 'Row deleted',
    duration: 7000,
    action: {
      label: 'Undo',
      onClick: () =&gt; restore(backup),
    },
  });
}</code></pre>

        <h3>Persistent error with retry</h3>
        <div class="dx-pre" tabindex="0"><code>toast.danger('Connection lost', {
  description: 'Reconnecting…',
  duration: 0,            // sticks until dismissed
  action: { label: 'Retry now', onClick: () =&gt; reconnect() },
});</code></pre>

        <h3>Dismiss a toast programmatically</h3>
        <p>Status methods return an <code>id</code>. Store it and pass it to <code>toast.dismiss</code> when the underlying state changes.</p>
        <div class="dx-pre" tabindex="0"><code>// Show a persistent "uploading" toast, dismiss when done.
const uploadId = toast.info('Uploading…', { duration: 0 });

try {
  await uploadFile(file);
  toast.dismiss(uploadId);
  toast.success('Upload complete');
} catch (err) {
  toast.dismiss(uploadId);
  toast.danger('Upload failed', { description: err.message });
}</code></pre>

        <h3>Track an async operation with toast.promise</h3>
        <p>One call covers loading → success / error. The toast updates in place.</p>
        <div class="dx-pre" tabindex="0"><code>toast.promise(api.saveProfile(data), {
  loading: 'Saving profile…',
  success: 'Profile saved',
  error:   (err) =&gt; `Couldn't save: ${err.message}`,
});</code></pre>
      </section>

    </main>
  </div>

  <script type="module" src="../../components/composites/ren-toast/ren-toast.js"></script>
  <script type="module">
    // Wait for the viewport's custom element to register, then wire demo buttons
    // to the real `window.toast` API.
    await customElements.whenDefined('ren-toast-viewport');

    document.querySelectorAll('[data-toast]').forEach((btn) => {
      btn.addEventListener('click', () => {
        const kind = btn.getAttribute('data-toast');
        switch (kind) {
          case 'success':
            window.toast.success('Project saved', { description: 'Your changes are visible to the team.' });
            break;
          case 'info':
            window.toast.info('Sync started', { description: 'Pulling the latest changes…' });
            break;
          case 'warning':
            window.toast.warning('Rate limit', { description: "You're close to your hourly limit." });
            break;
          case 'danger':
            window.toast.danger('Delete failed', { description: 'Please try again.' });
            break;
          case 'action':
            window.toast.show({
              title: 'Email sent',
              description: 'To 12 recipients.',
              status: 'info',
              action: { label: 'Undo', onClick: () => window.toast.success('Undone') },
            });
            break;
        }
      });
    });
  </script>

  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-toggle-group.html
type: docs_page
name: ren-toggle-group docs
path: docs/components/ren-toggle-group.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toggle Group — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html" aria-current="page">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Toggle Group</li></ol></nav>
        <p class="dx-kicker">Composite</p>
        <h1>Toggle Group <span class="dx-api-badge dx-api-badge-hybrid" title="Renders without JS; JS adds enhancements">Hybrid</span></h1>
        <p class="lede">Segmented control of 2–5 options. Pick exactly one (radio behavior) or any number (checkbox behavior). For text alignment, view modes, density toggles — anywhere a tight visual cluster beats a dropdown.</p>
      </header>

      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>Toggle groups visually link related options into one control. Single mode is a stylized radio group ("Day | Week | Month"); multi mode is a stylized checkbox group ("Bold + Italic + Underline" all on at once).</p>
        <div class="dx-callout">
          <p><strong>Toggle Group vs Tabs.</strong> Tabs change which content panel is shown. Toggle Group changes a <em>setting</em> on the same content. If clicking changes what you see, it's Tabs. If clicking changes how it's filtered or rendered, it's a Toggle Group.</p>
        </div>
      </section>

      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <div class="dx-demo">
          <div class="dx-demo-preview">
            <div class="ren-toggle-group" role="radiogroup" aria-label="Time range">
              <button class="ren-toggle-item" type="button" role="radio" aria-checked="true">Day</button>
              <button class="ren-toggle-item" type="button" role="radio" aria-checked="false">Week</button>
              <button class="ren-toggle-item" type="button" role="radio" aria-checked="false">Month</button>
              <button class="ren-toggle-item" type="button" role="radio" aria-checked="false">Year</button>
            </div>
            <div class="ren-toggle-group" role="group" aria-label="Text format">
              <button class="ren-toggle-item" type="button" aria-pressed="true"><strong>B</strong></button>
              <button class="ren-toggle-item" type="button" aria-pressed="false"><em>I</em></button>
              <button class="ren-toggle-item" type="button" aria-pressed="false"><u>U</u></button>
            </div>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;!-- Single (one selected at a time) --&gt;
&lt;div class="ren-toggle-group" role="radiogroup" aria-label="Time range"&gt;
  &lt;button role="radio" class="ren-toggle-item" aria-checked="true"&gt;Day&lt;/button&gt;
  &lt;button role="radio" class="ren-toggle-item" aria-checked="false"&gt;Week&lt;/button&gt;
  &lt;button role="radio" class="ren-toggle-item" aria-checked="false"&gt;Month&lt;/button&gt;
&lt;/div&gt;

&lt;!-- Multi (any number selected) --&gt;
&lt;div class="ren-toggle-group" role="group" aria-label="Text format"&gt;
  &lt;button class="ren-toggle-item" aria-pressed="true"&gt;Bold&lt;/button&gt;
  &lt;button class="ren-toggle-item" aria-pressed="false"&gt;Italic&lt;/button&gt;
&lt;/div&gt;</code></pre>
        </div>
      </section>

      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>
        <table class="dx-api">
          <thead><tr><th>Class</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-toggle-group</code></td><td>The container. Inline-flex row, items share borders, no gaps. Single rounded shape.</td></tr>
            <tr><td><code class="dx-api-name">.ren-toggle-item</code></td><td>One option. Always a real <code>&lt;button type="button"&gt;</code>. Selected state via <code>aria-checked="true"</code> (radio mode) or <code>aria-pressed="true"</code> (multi mode).</td></tr>
          </tbody>
        </table>
      </section>

      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <ul>
          <li><strong>Single mode</strong>: wrap in <code>role="radiogroup"</code>; items use <code>role="radio"</code> + <code>aria-checked</code>. Arrow keys move selection.</li>
          <li><strong>Multi mode</strong>: wrap in <code>role="group"</code>; items use plain <code>aria-pressed</code>. Tab moves between, Space toggles each.</li>
          <li>Always pair the group with <code>aria-label</code> or a visible label outside.</li>
        </ul>
      </section>

    </main>
  </div>
  <script type="module" src="../../components/composites/ren-toggle-group/ren-toggle-group.js"></script>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-toolbar.html
type: docs_page
name: ren-toolbar docs
path: docs/components/ren-toolbar.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toolbar — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .demo-tb { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
    .demo-tb button { padding: 6px var(--space-2); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); color: var(--color-text); }
    .demo-tb button:hover, .demo-tb button:focus-visible { background: var(--color-fill); }
    .demo-tb button[aria-pressed="true"] { background: var(--color-fill); color: var(--color-text); font-weight: var(--weight-semibold); }
    .demo-tb-sep { width: 1px; align-self: stretch; background: var(--color-border); margin-inline: var(--space-1); }
  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html" aria-current="page">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Toolbar</li></ol></nav>
        <p class="dx-kicker">Composite</p>
        <h1>Toolbar <span class="dx-api-badge dx-api-badge-js" title="JavaScript is required for interaction">Requires JS</span></h1>
        <p class="lede">Grouped row of action buttons with arrow-key navigation. For editor toolbars, canvas controls, table headers — anywhere a tight cluster of related actions needs roving-tabindex keyboard support.</p>
      </header>

      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>Toolbars present a row of actions as a single tab-stop. <kbd>Tab</kbd> enters the toolbar; arrow keys navigate between actions; <kbd>Tab</kbd> again leaves it. This avoids the "press Tab 12 times to get past the formatting bar" anti-pattern.</p>
      </section>

      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <div class="dx-demo">
          <div class="dx-demo-preview">
            <div class="demo-tb" role="toolbar" aria-label="Text formatting">
              <button type="button" aria-pressed="false" tabindex="0">Undo</button>
              <button type="button" aria-pressed="false" tabindex="-1">Redo</button>
              <span class="demo-tb-sep" role="separator" aria-orientation="vertical"></span>
              <button type="button" aria-pressed="true" tabindex="-1"><strong>B</strong></button>
              <button type="button" aria-pressed="false" tabindex="-1"><em>I</em></button>
              <button type="button" aria-pressed="false" tabindex="-1"><u>U</u></button>
              <span class="demo-tb-sep" role="separator" aria-orientation="vertical"></span>
              <button type="button" tabindex="-1">≡</button>
              <button type="button" tabindex="-1">⊞</button>
            </div>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;ren-toolbar aria-label="Text formatting"&gt;
  &lt;button&gt;Undo&lt;/button&gt;
  &lt;button&gt;Redo&lt;/button&gt;
  &lt;hr role="separator"&gt;
  &lt;button aria-pressed="true"&gt;&lt;b&gt;B&lt;/b&gt;&lt;/button&gt;
  &lt;button aria-pressed="false"&gt;&lt;i&gt;I&lt;/i&gt;&lt;/button&gt;
&lt;/ren-toolbar&gt;</code></pre>
        </div>
      </section>

      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>
        <table class="dx-api">
          <thead><tr><th>Class</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-toolbar</code></td><td>The wrapper. <code>role="toolbar"</code>. Inline-flex row with consistent gap.</td></tr>
            <tr><td><code class="dx-api-name">.ren-toolbar-separator</code></td><td>Vertical divider. Use a <code>&lt;span&gt;</code> with <code>role="separator"</code>.</td></tr>
            <tr><td><code class="dx-api-name">.ren-toolbar-group</code></td><td>Optional sub-grouping for related actions inside the toolbar.</td></tr>
          </tbody>
        </table>
        <p>The Web Component handles the roving tabindex automatically — buttons inside <code>&lt;ren-toolbar&gt;</code> get the right <code>tabindex</code> attributes on mount.</p>
      </section>

      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <h3>Keyboard</h3>
        <div class="dx-keys">
          <div class="dx-keyrow"><span class="keys"><kbd>Tab</kbd></span><span>Enter / leave the toolbar.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>←</kbd> / <kbd>→</kbd></span><span>Move focus between buttons. Wraps at the ends.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>Home</kbd> / <kbd>End</kbd></span><span>Jump to the first / last button.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>Enter</kbd> / <kbd>Space</kbd></span><span>Activate the focused button.</span></div>
        </div>
        <p>Always set <code>aria-label</code> on the toolbar so screen readers announce its purpose ("Text formatting toolbar").</p>
      </section>

    </main>
  </div>
  <script type="module" src="../../components/composites/ren-toolbar/ren-toolbar.js"></script>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: docs:docs/components/ren-tooltip.html
type: docs_page
name: ren-tooltip docs
path: docs/components/ren-tooltip.html
data: {}
body:
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tooltip — RenDS Components</title>
  <link rel="stylesheet" href="../../index.css">
  <link rel="stylesheet" href="../../components/index.css">
  <link rel="stylesheet" href="../../themes/appearance.css">
  <link rel="stylesheet" href="../../tokens/component/tokens.css">
  <link rel="stylesheet" href="../../site/shell.css">
  <style>
    .dx-demo { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: visible; margin: var(--space-4) 0; }
    .dx-demo-preview { background: var(--color-surface-raised); padding: var(--space-8) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: center; min-height: 120px; }
    .dx-demo-code { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--color-border); }
    .dx-vgrid { display: grid; gap: var(--space-6); margin: var(--space-4) 0; }
    .dx-vrow { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: start; }
    .dx-vrow-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding-top: var(--space-3); }
    .dx-vrow-items { padding: var(--space-3); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
    @media (max-width: 720px) { .dx-vrow { grid-template-columns: 1fr; gap: var(--space-2); } .dx-vrow-label { padding-top: 0; } }

  </style>
</head>
<body>
  <header class="dx-nav"><div class="dx-nav-inner"><a href="../index.html" class="dx-brand"><span class="dx-brand-mark">R</span><span>RenDS</span><span class="ren-badge ren-badge-secondary" style="margin-left: var(--space-1);">v0.12.0</span></a><nav class="dx-nav-menu" aria-label="Primary"><a href="../index.html">Docs</a><a href="../components.html" aria-current="page">Components</a><a href="../../templates/index.html">Templates</a><a href="../../create/index.html">Theme Builder</a></nav><div class="dx-nav-actions"><a href="https://github.com/Rensoconese/ren10" class="ren-btn ren-btn-ghost ren-btn-sm">GitHub</a><a href="../getting-started.html" class="ren-btn ren-btn-primary ren-btn-sm">Get started</a></div></div></header>

  <div class="dx-shell dx-shell-grid">
    <aside class="dx-sidebar" aria-label="Site navigation">
      <h3>Guides</h3>
      <ul>
        <li><a href="../getting-started.html">Getting Started</a></li>
        <li><a href="../theming.html">Theming</a></li>
        <li><a href="../accessibility.html">Accessibility</a></li>
        <li><a href="../cli.html">CLI</a></li>
      </ul>

      <h3>Foundations</h3>
      <ul>
        <li><a href="../primitive-zero.html">Primitive Zero</a></li>
        <li><a href="../tokens.html">Tokens</a></li>
        <li><a href="../layouts.html">Layouts</a></li>
      </ul>

      <h3>Primitives</h3>
      <ul>
        <li><a href="ren-button.html">Button</a></li>
        <li><a href="ren-card.html">Card</a></li>
        <li><a href="ren-badge.html">Badge</a></li>
        <li><a href="ren-tag.html">Tag</a></li>
        <li><a href="ren-link.html">Link</a></li>
        <li><a href="ren-banner.html">Banner</a></li>
        <li><a href="ren-breadcrumb.html">Breadcrumb</a></li>
        <li><a href="ren-pagination.html">Pagination</a></li>
        <li><a href="ren-separator.html">Separator</a></li>
        <li><a href="ren-avatar.html">Avatar</a></li>
        <li><a href="ren-spinner.html">Spinner</a></li>
        <li><a href="ren-skeleton.html">Skeleton</a></li>
        <li><a href="ren-kbd.html">Keyboard Key</a></li>
        <li><a href="ren-icon.html">Icons</a></li>
        <li><a href="ren-field.html">Field</a></li>
        <li><a href="ren-checkbox.html">Checkbox</a></li>
        <li><a href="ren-switch.html">Switch</a></li>
        <li><a href="ren-radio.html">Radio</a></li>
        <li><a href="ren-progress.html">Progress</a></li>
      </ul>

      <h3>Composites</h3>
      <ul>
        <li><a href="ren-tabs.html">Tabs</a></li>
        <li><a href="ren-accordion.html">Accordion</a></li>
        <li><a href="ren-dialog.html">Dialog</a></li>
        <li><a href="ren-alert-dialog.html">Alert Dialog</a></li>
        <li><a href="ren-toast.html">Toast</a></li>
        <li><a href="ren-tooltip.html" aria-current="page">Tooltip</a></li>
        <li><a href="ren-popover.html">Popover</a></li>
        <li><a href="ren-hover-card.html">Hover Card</a></li>
        <li><a href="ren-sheet.html">Sheet</a></li>
        <li><a href="ren-collapsible.html">Collapsible</a></li>
        <li><a href="ren-toolbar.html">Toolbar</a></li>
        <li><a href="ren-dropzone.html">Dropzone</a></li>
        <li><a href="ren-combobox.html">Combobox</a></li>
        <li><a href="ren-slider.html">Slider</a></li>
        <li><a href="ren-toggle-group.html">Toggle Group</a></li>
        <li><a href="ren-scroll-area.html">Scroll Area</a></li>
        <li><a href="ren-select.html">Select</a></li>
        <li><a href="ren-menu.html">Menu</a></li>
        <li><a href="ren-menubar.html">Menubar</a></li>
        <li><a href="ren-context-menu.html">Context Menu</a></li>
        <li><a href="ren-command.html">Command Palette</a></li>
        <li><a href="ren-number-field.html">Number Field</a></li>
        <li><a href="ren-otp.html">Input OTP</a></li>
        <li><a href="ren-color-picker.html">Color Picker</a></li>
        <li><a href="ren-calendar.html">Calendar</a></li>
        <li><a href="ren-date-picker.html">Date Picker</a></li>
        <li><a href="ren-date-range-picker.html">Date Range Picker</a></li>
        <li><a href="ren-carousel.html">Carousel</a></li>
      </ul>

      <h3>Patterns</h3>
      <ul>
        <li><a href="ren-nav.html">Nav</a></li>
        <li><a href="ren-sidebar.html">Sidebar</a></li>
        <li><a href="ren-empty-state.html">Empty State</a></li>
        <li><a href="ren-table.html">Data Table</a></li>
        <li><a href="ren-form.html">Form Validation</a></li>
        <li><a href="ren-ai.html">AI Patterns</a></li>
      </ul>

      <h3>Reference</h3>
      <ul>
        <li><a href="../components.html">Components catalog</a></li>
</ul>
    </aside>

    <main class="dx-content">
      <header class="dx-header">
        <nav class="ren-breadcrumb" aria-label="Breadcrumb" style="margin-bottom: var(--space-4);"><ol><li><a href="../index.html" class="ren-link-plain">Docs</a></li><li><a href="../components.html" class="ren-link-plain">Components</a></li><li aria-current="page">Tooltip</li></ol></nav>
        <p class="dx-kicker">Composite</p>
        <h1>Tooltip <span class="dx-api-badge dx-api-badge-hybrid" title="Renders without JS; JS adds enhancements">Hybrid</span></h1>
        <p class="lede">Brief contextual text that appears on hover and focus. For supplementary hints — never the primary explanation. Reveals on hover after a short delay, on focus immediately, on touch via long-press.</p>
      </header>

      <section class="dx-section" id="overview">
        <p class="dx-kicker">About</p>
        <h2>Overview</h2>
        <p>Tooltips show short text labels next to icon buttons, abbreviations, or anything where a tiny extra hint helps. The trigger is always interactive (a button or link), the tooltip is always supplementary — never put critical information in a tooltip alone, because touch users may not see it.</p>
        <div class="dx-callout">
          <p><strong>Tooltip vs Popover vs Hover Card.</strong> Tooltip = short text. Popover = rich content + keyboard interaction. Hover Card = preview content with a slightly longer hover delay (think Twitter profile previews).</p>
        </div>
      </section>

      <section class="dx-section" id="demo">
        <p class="dx-kicker">Live</p>
        <h2>Demo</h2>
        <p>Hover or focus the buttons below.</p>
        <div class="dx-demo">
          <div class="dx-demo-preview">
            <button class="ren-btn ren-btn-secondary ren-tooltip-trigger" type="button">Save<ren-tooltip placement="top" show-delay="0">⌘S</ren-tooltip></button>
            <button class="ren-btn ren-btn-secondary ren-tooltip-trigger" type="button" aria-label="Settings"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg><ren-tooltip placement="top" show-delay="0">Settings</ren-tooltip></button>
            <button class="ren-btn ren-btn-ghost ren-tooltip-trigger" type="button">Help<ren-tooltip placement="top" show-delay="0">Press ? for shortcuts</ren-tooltip></button>
          </div>
          <pre class="dx-pre dx-demo-code" tabindex="0"><code>&lt;button class="ren-btn ren-btn-secondary ren-tooltip-trigger" type="button"&gt;
  Save
  &lt;ren-tooltip placement="top"&gt;⌘S&lt;/ren-tooltip&gt;
&lt;/button&gt;</code></pre>
        </div>
      </section>

      <section class="dx-section" id="variants">
        <p class="dx-kicker">Placements</p>
        <h2>Variants</h2>
        <div class="dx-vgrid">
          <div class="dx-vrow"><span class="dx-vrow-label">Placement</span><div class="dx-vrow-items">
            <p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);">Four placements via <code>placement="top|right|bottom|left"</code> (default <code>top</code>). The component flips to the opposite side automatically when there isn't room.</p>
          </div></div>
          <div class="dx-vrow"><span class="dx-vrow-label">Delay</span><div class="dx-vrow-items">
            <p style="margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);">Default hover delay is 500 ms. Override it with <code>show-delay="700"</code> for less-interruptive contexts.</p>
          </div></div>
        </div>
      </section>

      <section class="dx-section" id="api">
        <p class="dx-kicker">Reference</p>
        <h2>API</h2>
        <h3>CSS classes</h3>
        <table class="dx-api">
          <thead><tr><th>Class</th><th>Effect</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">.ren-tooltip</code></td><td>The floating bubble. <code>role="tooltip"</code>. Dark surface on light theme, light on dark.</td></tr>
            <tr><td><code class="dx-api-name">.ren-tooltip-arrow</code></td><td>Optional arrow pointing at the trigger.</td></tr>
          </tbody>
        </table>
        <h3>Web Component attributes</h3>
        <table class="dx-api dx-api-cols-4">
          <thead><tr><th>Attribute</th><th>Type</th><th>Default</th><th>Notes</th></tr></thead>
          <tbody>
            <tr><td><code class="dx-api-name">placement</code></td><td><span class="dx-api-type">"top" | "right" | "bottom" | "left"</span></td><td><span class="dx-api-default">"top"</span></td><td>Preferred side. Auto-flips when there isn't room.</td></tr>
            <tr><td><code class="dx-api-name">show-delay</code></td><td><span class="dx-api-type">number (ms)</span></td><td><span class="dx-api-default">500</span></td><td>Delay before showing the tooltip.</td></tr>
            <tr><td><code class="dx-api-name">hide-delay</code></td><td><span class="dx-api-type">number (ms)</span></td><td><span class="dx-api-default">0</span></td><td>Delay before hiding the tooltip.</td></tr>
          </tbody>
        </table>
      </section>

      <section class="dx-section" id="a11y">
        <p class="dx-kicker">Inclusive by default</p>
        <h2>Accessibility</h2>
        <ul>
          <li><strong>Trigger must be focusable.</strong> Tooltips on a non-interactive element aren't keyboard-reachable.</li>
          <li><strong>Use <code>aria-describedby</code></strong> linking the trigger to the tooltip's <code>id</code>. Screen readers announce the tooltip after the trigger's accessible name.</li>
          <li><strong>Show on focus, not just hover.</strong> Keyboard users never trigger a hover.</li>
          <li><strong>Dismissable with Escape.</strong> Pressing Escape while the tooltip is open closes it.</li>
          <li><strong>Don't put essential info in a tooltip.</strong> Touch users may never see it. Pair the tooltip with a visible label or icon-with-text on small viewports.</li>
        </ul>
        <h3>Keyboard</h3>
        <div class="dx-keys">
          <div class="dx-keyrow"><span class="keys"><kbd>Tab</kbd></span><span>Focus the trigger; tooltip shows immediately.</span></div>
          <div class="dx-keyrow"><span class="keys"><kbd>Esc</kbd></span><span>Hides the tooltip while keeping focus on the trigger.</span></div>
        </div>
      </section>

      <section class="dx-section" id="examples">
        <p class="dx-kicker">Patterns</p>
        <h2>Examples</h2>
        <h3>Icon-only button with hint</h3>
        <div class="dx-pre" tabindex="0"><code>&lt;button class="ren-btn ren-btn-ghost ren-tooltip-trigger" type="button" aria-label="Settings"&gt;
  &lt;!-- gear SVG --&gt;
  &lt;ren-tooltip placement="bottom"&gt;Settings&lt;/ren-tooltip&gt;
&lt;/button&gt;</code></div>
        <h3>Keyboard shortcut hint</h3>
        <div class="dx-pre" tabindex="0"><code>&lt;button class="ren-btn ren-btn-primary ren-tooltip-trigger" type="button"&gt;
  Save
  &lt;ren-tooltip&gt;⌘S to save&lt;/ren-tooltip&gt;
&lt;/button&gt;</code></div>
      </section>

    </main>
  </div>
  <script type="module" src="../../components/composites/ren-tooltip/ren-tooltip.js"></script>
  <script src="../../site/shell.js" defer></script>
</body>
</html>


id: example:examples/ai-panel.html
type: example
name: ai-panel.html
path: examples/ai-panel.html
data: {}
body:
<!doctype html>
<html lang="en" data-theme="default">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>RenDS · AI / status panel example</title>

  <link rel="stylesheet" href="../index.css">
  <link rel="stylesheet" href="../components/index.css">

  <script type="module" src="../components/primitives/ren-button/ren-button.js"></script>
</head>
<body>
  <!--
    AI / status panel: ren-with-sidebar with main content on the left
    and a secondary AI rail on the right. Use ren-ai pattern for the
    assistant slot.
  -->
  <main class="ren-with-sidebar" style="--sidebar-width: 22rem">
    <section class="ren-stack-lg" style="padding: var(--space-6)">
      <header class="ren-stack-xs">
        <h1>Compose</h1>
        <p style="color: var(--color-text-muted)">Drafting a release announcement.</p>
      </header>

      <article class="ren-card">
        <div class="ren-card-body ren-stack">
          <h2>Announcing RenDS 0.8.2</h2>
          <p>RenDS 0.8.2 ships an AI-compliance layer …</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </article>
    </section>

    <!-- AI rail -->
    <aside class="ren-stack" style="padding: var(--space-6); border-inline-start: var(--stroke-1) solid var(--color-border)">
      <header class="ren-stack-xs">
        <h2 class="ren-row" style="gap: var(--space-2)">
          <span class="ren-ai-indicator" aria-hidden="true"></span>
          Assistant
        </h2>
        <p style="color: var(--color-text-muted)">Ask for a rewrite, summary, or tone shift.</p>
      </header>

      <ol class="ren-ai-thread ren-stack" style="list-style: none; padding: 0; margin: 0">
        <li class="ren-ai-message ren-ai-message-user">
          <p>Tighten the opening paragraph.</p>
        </li>
        <li class="ren-ai-message ren-ai-message-assistant">
          <p>Here's a tighter version: "RenDS 0.8.2 adds an AI-compliance
          layer with stricter token enforcement, golden examples, and
          per-component aiHints."</p>
          <div class="ren-cluster">
            <button class="ren-btn ren-btn-sm ren-btn-secondary" type="button">Insert</button>
            <button class="ren-btn ren-btn-sm ren-btn-ghost" type="button">Try again</button>
          </div>
        </li>
        <li class="ren-ai-message ren-ai-message-assistant ren-ai-message-thinking" aria-live="polite">
          <span class="ren-spinner" aria-hidden="true"></span>
          <span>Thinking…</span>
        </li>
      </ol>

      <form class="ren-stack-sm" novalidate>
        <label class="ren-sr-only" for="ai-prompt">Ask the assistant</label>
        <textarea id="ai-prompt" class="ren-input" rows="3"
                  placeholder="Make it shorter, change the tone, etc."></textarea>
        <div class="ren-row-spread">
          <span class="ren-tag" data-status="info">⌘+Enter to send</span>
          <button class="ren-btn ren-btn-sm" type="submit">Ask</button>
        </div>
      </form>
    </aside>
  </main>
</body>
</html>


id: example:examples/app-sidebar.html
type: example
name: app-sidebar.html
path: examples/app-sidebar.html
data: {}
body:
<!doctype html>
<html lang="en" data-theme="default">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>RenDS · App sidebar example</title>

  <link rel="stylesheet" href="../index.css">
  <link rel="stylesheet" href="../components/index.css">

  <script type="module" src="../components/patterns/ren-sidebar/ren-sidebar.js"></script>
</head>
<body>
  <!--
    App shell with collapsible sidebar.
    Use this as the outer skeleton for any authenticated multi-page product.
    The sidebar is the only navigation; routes go in the sidebar.
  -->
  <div class="ren-sidebar-layout">
    <ren-sidebar class="ren-sidebar" aria-label="Primary">
      <div class="ren-sidebar-header">
        <a class="ren-sidebar-item" href="/" aria-label="Acme home">
          <span class="ren-sidebar-item-icon" aria-hidden="true">⌂</span>
          <span class="ren-sidebar-item-text">Acme</span>
        </a>
      </div>

      <nav class="ren-sidebar-nav" aria-label="Workspace">
        <a class="ren-sidebar-item active" href="/inbox" aria-current="page">
          <span class="ren-sidebar-item-icon" aria-hidden="true">📥</span>
          <span class="ren-sidebar-item-text">Inbox</span>
        </a>
        <a class="ren-sidebar-item" href="/today">
          <span class="ren-sidebar-item-icon" aria-hidden="true">📅</span>
          <span class="ren-sidebar-item-text">Today</span>
        </a>
        <a class="ren-sidebar-item" href="/upcoming">
          <span class="ren-sidebar-item-icon" aria-hidden="true">⏭</span>
          <span class="ren-sidebar-item-text">Upcoming</span>
        </a>
      </nav>

      <div class="ren-sidebar-section">
        <div class="ren-sidebar-section-label">Projects</div>
        <a class="ren-sidebar-item" href="/p/atlas">
          <span class="ren-sidebar-item-icon" aria-hidden="true">●</span>
          <span class="ren-sidebar-item-text">Atlas</span>
        </a>
        <a class="ren-sidebar-item" href="/p/mercury">
          <span class="ren-sidebar-item-icon" aria-hidden="true">●</span>
          <span class="ren-sidebar-item-text">Mercury</span>
        </a>
        <a class="ren-sidebar-item" href="/p/nimbus">
          <span class="ren-sidebar-item-icon" aria-hidden="true">●</span>
          <span class="ren-sidebar-item-text">Nimbus</span>
        </a>
      </div>

      <div class="ren-sidebar-footer">
        <a class="ren-sidebar-item" href="/help">
          <span class="ren-sidebar-item-icon" aria-hidden="true">？</span>
          <span class="ren-sidebar-item-text">Help</span>
        </a>
        <a class="ren-sidebar-item" href="/settings">
          <span class="ren-sidebar-item-icon" aria-hidden="true">⚙</span>
          <span class="ren-sidebar-item-text">Settings</span>
        </a>
      </div>

      <button class="ren-sidebar-toggle" type="button" aria-label="Toggle sidebar"></button>
    </ren-sidebar>

    <main class="ren-sidebar-main">
      <div class="ren-stack-lg" style="padding: var(--space-6)">
        <header class="ren-row-spread">
          <h1>Inbox</h1>
          <button class="ren-btn" type="button">New task</button>
        </header>

        <ul class="ren-stack" style="list-style: none; padding: 0; margin: 0">
          <li class="ren-card ren-card-interactive ren-row-spread" tabindex="0">
            <span>Review the Q3 launch checklist</span>
            <span class="ren-badge ren-badge-warning">Today</span>
          </li>
          <li class="ren-card ren-card-interactive ren-row-spread" tabindex="0">
            <span>Approve invoice from Iván</span>
            <span class="ren-badge">Tomorrow</span>
          </li>
          <li class="ren-card ren-card-interactive ren-row-spread" tabindex="0">
            <span>Plan offsite logistics</span>
            <span class="ren-badge">Next week</span>
          </li>
        </ul>
      </div>
    </main>
  </div>
</body>
</html>


