kempo-ui 0.3.4 → 0.3.6

package/docs-src/components/dropdown.page.html

@@ -0,0 +1,300 @@
+<page pageName="Dropdown" title="Dropdown - Components - Kempo Docs - A Web Components Solution">
+  <content location="header"></content>
+  <content>
+    <h1 class="ta-center">Dropdown</h1>
+
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#withIcons">With Icons</a><br />
+          <a href="#subMenus">Sub Menus</a><br />
+          <a href="#openDirection">Open Direction</a><br />
+          <a href="#disabledItems">Disabled Items</a><br />
+          <a href="#links">Using Links</a><br />
+          <a href="#events">Events</a><br />
+
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#attributes">Attributes</a><br />
+          <a href="#methods">Methods</a><br />
+          <a href="#eventsRef">Events</a><br />
+          <a href="#cssVars">CSS Custom Properties</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Create dropdown menus using the <code>k-dropdown</code> component. Use the <code>trigger</code> slot for the button that opens the menu, and place <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> elements as children for menu items.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"trigger"</span>&gt;</span>Actions<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"edit"</span>&gt;</span>Edit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"duplicate"</span>&gt;</span>Duplicate<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"delete"</span>&gt;</span>Delete<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-dropdown>
+            <button slot="trigger">Actions</button>
+            <button data-value="edit">Edit</button>
+            <button data-value="duplicate">Duplicate</button>
+            <button data-value="delete">Delete</button>
+          </k-dropdown>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="withIcons"><a href="#withIcons" class="no-link">With Icons</a></h3>
+    <p>Add icons to your dropdown items for better visual cues.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"trigger"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"more_vert"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"edit"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"edit"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span> Edit<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"copy"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"copy"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span> Copy<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"delete"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-danger"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"delete"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span> Delete<br />  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-dropdown>
+            <button slot="trigger">
+              <k-icon name="more_vert"></k-icon>
+            </button>
+            <button data-value="edit">
+              <k-icon name="edit"></k-icon> Edit
+            </button>
+            <button data-value="copy">
+              <k-icon name="copy"></k-icon> Copy
+            </button>
+            <button data-value="delete" class="tc-danger">
+              <k-icon name="delete"></k-icon> Delete
+            </button>
+          </k-dropdown>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="subMenus"><a href="#subMenus" class="no-link">Sub Menus</a></h3>
+    <p>Nest a <code>k-dropdown</code> inside another <code>k-dropdown</code> to create sub menus. The nested dropdown is automatically detected as a submenu: it opens on hover or focus, displays a chevron icon, and opens to the right by default. Keyboard navigation supports <code>ArrowRight</code> to open and <code>ArrowLeft</code> to close sub menus.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;trigger&quot;</span>&gt;</span>Actions<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">&quot;edit&quot;</span>&gt;</span>Edit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;trigger&quot;</span>&gt;</span>Share<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">&quot;email&quot;</span>&gt;</span>Email<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">&quot;link&quot;</span>&gt;</span>Copy Link<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">&quot;delete&quot;</span>&gt;</span>Delete<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-dropdown>
+            <button slot="trigger">Actions</button>
+            <button data-value="edit">Edit</button>
+            <k-dropdown>
+              <button slot="trigger">Share</button>
+              <button data-value="email">Email</button>
+              <button data-value="link">Copy Link</button>
+            </k-dropdown>
+            <button data-value="delete">Delete</button>
+          </k-dropdown>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="openDirection"><a href="#openDirection" class="no-link">Open Direction</a></h3>
+    <p>Control where the menu appears using the <code>open-direction</code> attribute. Specify a direction like <code>down left</code>, <code>up right</code>, <code>left up</code>, etc. The browser automatically handles fallback positioning if the menu would overflow the viewport using CSS Anchor Positioning.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span> <span class="hljs-attr">open-direction</span>=<span class="hljs-string">"down left"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span> <span class="hljs-attr">open-direction</span>=<span class="hljs-string">"down right"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span> <span class="hljs-attr">open-direction</span>=<span class="hljs-string">"up left"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span> <span class="hljs-attr">open-direction</span>=<span class="hljs-string">"right down"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <div class="d-f gap fw-w">
+            <k-dropdown open-direction="down left">
+              <button slot="trigger">Down Left</button>
+              <button data-value="1">Item 1</button>
+              <button data-value="2">Item 2</button>
+            </k-dropdown>
+            <k-dropdown open-direction="down right">
+              <button slot="trigger">Down Right</button>
+              <button data-value="1">Item 1</button>
+              <button data-value="2">Item 2</button>
+            </k-dropdown>
+            <k-dropdown open-direction="up left">
+              <button slot="trigger">Up Left</button>
+              <button data-value="1">Item 1</button>
+              <button data-value="2">Item 2</button>
+            </k-dropdown>
+            <k-dropdown open-direction="up right">
+              <button slot="trigger">Up Right</button>
+              <button data-value="1">Item 1</button>
+              <button data-value="2">Item 2</button>
+            </k-dropdown>
+          </div>
+          <div class="d-f gap fw-w mt">
+            <k-dropdown open-direction="right down">
+              <button slot="trigger">Right Down</button>
+              <button data-value="1">Item 1</button>
+              <button data-value="2">Item 2</button>
+            </k-dropdown>
+            <k-dropdown open-direction="right up">
+              <button slot="trigger">Right Up</button>
+              <button data-value="1">Item 1</button>
+              <button data-value="2">Item 2</button>
+            </k-dropdown>
+            <k-dropdown open-direction="left down">
+              <button slot="trigger">Left Down</button>
+              <button data-value="1">Item 1</button>
+              <button data-value="2">Item 2</button>
+            </k-dropdown>
+            <k-dropdown open-direction="left up">
+              <button slot="trigger">Left Up</button>
+              <button data-value="1">Item 1</button>
+              <button data-value="2">Item 2</button>
+            </k-dropdown>
+          </div>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="disabledItems"><a href="#disabledItems" class="no-link">Disabled Items</a></h3>
+    <p>Add the <code>disabled</code> attribute to disable specific items.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"trigger"</span>&gt;</span>Actions<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"edit"</span>&gt;</span>Edit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"copy"</span> <span class="hljs-attr">disabled</span>&gt;</span>Copy (disabled)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"delete"</span>&gt;</span>Delete<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-dropdown>
+            <button slot="trigger">Actions</button>
+            <button data-value="edit">Edit</button>
+            <button data-value="copy" disabled>Copy (disabled)</button>
+            <button data-value="delete">Delete</button>
+          </k-dropdown>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="links"><a href="#links" class="no-link">Using Links</a></h3>
+    <p>You can use <code>&lt;a&gt;</code> elements for navigation items.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"trigger"</span>&gt;</span>Navigate<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#home"</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#about"</span>&gt;</span>About<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#contact"</span>&gt;</span>Contact<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-dropdown>
+            <button slot="trigger">Navigate</button>
+            <a href="#home">Home</a>
+            <a href="#about">About</a>
+            <a href="#contact">Contact</a>
+          </k-dropdown>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <p>Listen for the <code>select</code> event to handle item selection.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dropdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"eventDropdown"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"trigger"</span>&gt;</span>Select an option<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"option1"</span>&gt;</span>Option 1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"option2"</span>&gt;</span>Option 2<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">"option3"</span>&gt;</span>Option 3<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dropdown</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"selectedValue"</span>&gt;</span>Selected: none<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'eventDropdown'</span>)<br />    .addEventListener(<span class="hljs-string">'select'</span>, <span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> {<br />      <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'selectedValue'</span>)<br />        .textContent = <span class="hljs-string">'Selected: '</span> + e.detail.value;<br />    });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-dropdown id="eventDropdown">
+            <button slot="trigger">Select an option</button>
+            <button data-value="option1">Option 1</button>
+            <button data-value="option2">Option 2</button>
+            <button data-value="option3">Option 3</button>
+          </k-dropdown>
+          <p id="selectedValue">Selected: none</p>
+          <script>
+            document.getElementById('eventDropdown')
+              .addEventListener('select', e => {
+                document.getElementById('selectedValue')
+                  .textContent = 'Selected: ' + e.detail.value;
+              });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
+    <h5><code>new Dropdown()</code></h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+      <li><a href="./icon.html">Icon</a> (required for sub menus)</li>
+    </ul>
+
+    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h5><code>opened<i>: boolean</i></code></h5>
+    <p>Whether the dropdown menu is currently open.</p>
+
+    <h5><code>open-direction<i>: string</i></code></h5>
+    <p>Where the menu appears relative to the trigger. Specify two directions like <code>down left</code>, <code>up right</code>, <code>left up</code>, <code>right down</code>, etc. The browser will automatically flip the position if the menu would overflow the viewport using CSS Anchor Positioning. Default is <code>down left</code>.</p>
+
+    <h5><code>close-on-select<i>: boolean</i></code></h5>
+    <p>Whether the dropdown closes when an item is selected. Default is <code>true</code>.</p>
+
+    <h5><code>close-on-click-outside<i>: boolean</i></code></h5>
+    <p>Whether the dropdown closes when clicking outside of it. Default is <code>true</code>.</p>
+
+    <h5><code>submenu<i>: boolean</i></code></h5>
+    <p>Automatically set to <code>true</code> when a <code>k-dropdown</code> is nested inside another <code>k-dropdown</code>. Sub menus open on hover/focus, display a chevron icon, and default to <code>open-direction="right down"</code>. Supports <code>ArrowRight</code> to open and <code>ArrowLeft</code> to close via keyboard.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>open()<i>: this</i></code></h5>
+    <p>Opens the dropdown menu and focuses the first item.</p>
+
+    <h5><code>close()<i>: this</i></code></h5>
+    <p>Closes the dropdown menu.</p>
+
+    <h5><code>toggle()<i>: this</i></code></h5>
+    <p>Toggles the dropdown menu open or closed.</p>
+
+    <h3 id="eventsRef"><a href="#eventsRef" class="no-link">Events</a></h3>
+    <h5><code>select</code></h5>
+    <p>Fired when an item is selected. The event detail contains:</p>
+    <ul>
+      <li><code>value</code>: The value of the selected item (from <code>data-value</code> attribute or text content)</li>
+      <li><code>item</code>: The DOM element that was selected</li>
+    </ul>
+
+    <h5><code>opened</code></h5>
+    <p>Fired when the dropdown menu is opened.</p>
+
+    <h5><code>closed</code></h5>
+    <p>Fired when the dropdown menu is closed.</p>
+
+    <h4>Keyboard Navigation</h4>
+    <ul>
+      <li><code>Enter</code> / <code>Space</code> - Select the focused item (or open sub menu)</li>
+      <li><code>Arrow Down</code> - Move focus to the next item</li>
+      <li><code>Arrow Up</code> - Move focus to the previous item</li>
+      <li><code>Arrow Right</code> - Open focused sub menu</li>
+      <li><code>Arrow Left</code> - Close current sub menu</li>
+      <li><code>Escape</code> - Close the dropdown (or sub menu)</li>
+    </ul>
+
+    <h3 id="cssVars"><a href="#cssVars" class="no-link">CSS Custom Properties</a></h3>
+    <h5><code>--radius</code></h5>
+    <p>Controls the border radius of the dropdown menu. Defaults to the global <code>--radius</code> value.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Dropdown.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Icon.js"></script>
+  </content>
+</page>

package/docs-src/components/filter-list.page.html

@@ -0,0 +1,117 @@
+<page pageName="Filter List" title="Filter List - Components - Kempo Docs - A Web Components Solution">
+  <content location="header"></content>
+  <content>
+    <h1 class="ta-center">Filter List</h1>
+
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#tagButtons">Tag Buttons</a><br />
+
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#filterItem">FilterItem Attributes</a><br />
+          <a href="#methods">Methods</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Wrap items in <code>k-filter-item</code> elements with a <code>filter-keywords</code> attribute inside a <code>k-filter-list</code>. Connect an input to <code>filter()</code> using the <a href="{{pathToRoot}}utils/debounce.html">debounce</a> utility to avoid filtering on every keystroke.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">filterInput</span> <span class="hljs-attr">type</span>=<span class="hljs-string">search</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&#x27;Filter...&#x27;</span> /&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-filter-list</span> <span class="hljs-attr">id</span>=<span class="hljs-string">myFilterList</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;apple fruit red&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Apple<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;banana fruit yellow&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Banana<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;cherry fruit red&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Cherry<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;grape fruit purple&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Grape<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;lemon citrus yellow fruit&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Lemon<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;orange citrus fruit&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Orange<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;strawberry fruit red&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Strawberry<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-list</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">import</span> debounce <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;../src/utils/debounce.js&#x27;</span>;<br>  <span class="hljs-keyword">const</span> list = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;myFilterList&#x27;</span>);<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;filterInput&#x27;</span>).<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-title function_">debounce</span>(<span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> list.<span class="hljs-title function_">filter</span>(e.<span class="hljs-property">target</span>.<span class="hljs-property">value</span>)));<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <input id="filterInput" type="search" placeholder="Filter..." class="mb" />
+          <k-filter-list id="myFilterList">
+            <k-filter-item class="d-b" filter-keywords="apple fruit red"><a href="#">Apple</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="banana fruit yellow"><a href="#">Banana</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="cherry fruit red"><a href="#">Cherry</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="grape fruit purple"><a href="#">Grape</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="lemon citrus yellow fruit"><a href="#">Lemon</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="orange citrus fruit"><a href="#">Orange</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="strawberry fruit red"><a href="#">Strawberry</a></k-filter-item>
+          </k-filter-list>
+          <script type="module">
+            import debounce from '{{pathToRoot}}src/utils/debounce.js';
+            const list = document.getElementById('myFilterList');
+            document.getElementById('filterInput').addEventListener('input', debounce(e => list.filter(e.target.value)));
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="tagButtons"><a href="#tagButtons" class="no-link">Tag Buttons</a></h3>
+    <p>Use category buttons to filter the list. Each button stores its filter term in <code>data-filter</code>; clicking it activates that button and calls <code>filter()</code>. An empty string clears the filter and shows all items.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&#x27;d-f gap mb&#x27;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">tagButtons</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&#x27;btn primary&#x27;</span> <span class="hljs-attr">data-filter</span>=<span class="hljs-string">&#x27;&#x27;</span>&gt;</span>All<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">btn</span> <span class="hljs-attr">data-filter</span>=<span class="hljs-string">red</span>&gt;</span>Red<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">btn</span> <span class="hljs-attr">data-filter</span>=<span class="hljs-string">yellow</span>&gt;</span>Yellow<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">btn</span> <span class="hljs-attr">data-filter</span>=<span class="hljs-string">citrus</span>&gt;</span>Citrus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-filter-list</span> <span class="hljs-attr">id</span>=<span class="hljs-string">tagFilterList</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;apple fruit red&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Apple<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;banana fruit yellow&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Banana<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;cherry fruit red&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Cherry<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;grape fruit purple&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Grape<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;lemon citrus yellow fruit&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Lemon<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;orange citrus fruit&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Orange<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-filter-item</span> <span class="hljs-attr">class</span>=<span class="hljs-string">d-b</span> <span class="hljs-attr">filter-keywords</span>=<span class="hljs-string">&#x27;strawberry fruit red&#x27;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">#</span>&gt;</span>Strawberry<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-item</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-filter-list</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">module</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">const</span> list = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;tagFilterList&#x27;</span>);<br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">&#x27;#tagButtons [data-filter]&#x27;</span>).<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">btn</span> =&gt;</span> {<br>    btn.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;click&#x27;</span>, <span class="hljs-function">() =&gt;</span> {<br>      <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">&#x27;#tagButtons [data-filter]&#x27;</span>).<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">b</span> =&gt;</span> b.<span class="hljs-property">classList</span>.<span class="hljs-title function_">remove</span>(<span class="hljs-string">&#x27;primary&#x27;</span>));<br>      btn.<span class="hljs-property">classList</span>.<span class="hljs-title function_">add</span>(<span class="hljs-string">&#x27;primary&#x27;</span>);<br>      list.<span class="hljs-title function_">filter</span>(btn.<span class="hljs-property">dataset</span>.<span class="hljs-property">filter</span>);<br>    });<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <div class="d-f gap mb" id="tagButtons">
+            <button class="btn primary" data-filter="">All</button>
+            <button class="btn" data-filter="red">Red</button>
+            <button class="btn" data-filter="yellow">Yellow</button>
+            <button class="btn" data-filter="citrus">Citrus</button>
+          </div>
+          <k-filter-list id="tagFilterList">
+            <k-filter-item class="d-b" filter-keywords="apple fruit red"><a href="#">Apple</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="banana fruit yellow"><a href="#">Banana</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="cherry fruit red"><a href="#">Cherry</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="grape fruit purple"><a href="#">Grape</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="lemon citrus yellow fruit"><a href="#">Lemon</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="orange citrus fruit"><a href="#">Orange</a></k-filter-item>
+            <k-filter-item class="d-b" filter-keywords="strawberry fruit red"><a href="#">Strawberry</a></k-filter-item>
+          </k-filter-list>
+          <script type="module">
+            const list = document.getElementById('tagFilterList');
+            document.querySelectorAll('#tagButtons [data-filter]').forEach(btn => {
+              btn.addEventListener('click', () => {
+                document.querySelectorAll('#tagButtons [data-filter]').forEach(b => b.classList.remove('primary'));
+                btn.classList.add('primary');
+                list.filter(btn.dataset.filter);
+              });
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
+    <h5><code>new FilterList()</code></h5>
+    <h5><code>new FilterItem()</code></h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+    </ul>
+
+    <h3 id="filterItem"><a href="#filterItem" class="no-link">FilterItem Attributes</a></h3>
+    <h5><code>filter-keywords<i>: string</i></code></h5>
+    <p>A string of keywords used to match against the search term. The <code>filter()</code> method checks if this value includes the lowercased search term as a substring.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>filter(term<i>: string</i>)<i>: void</i></code></h5>
+    <p>Shows or hides each child <code>k-filter-item</code> based on whether its <code>filter-keywords</code> attribute includes <code>term</code> (case-insensitive). Passing an empty string reveals all items.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/FilterList.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/FilterItem.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>

package/docs-src/components/focus-capture.page.html

@@ -0,0 +1,97 @@
+<page pageName="FocusCapture" title="FocusCapture - Components - Kempo Docs - A Web Components Solution">
+  <content>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m ">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#dialogExample">Dialog Example</a><br />
+          
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#properties">Properties</a><br />
+          <a href="#methods">Methods</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>The <code>k-focus-capture</code> component traps focus within its children. When focus reaches the end of the focusable elements, it cycles back to the first focusable element. This is useful for modal dialogs, side menus, or any UI where you want to keep focus contained within a specific area.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-focus-capture</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span>&gt;</span>First Button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Input field"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span> /&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span>&gt;</span>Second Button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-b mb"</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-focus-capture</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <p class="mb"><em>Tab through the elements below. Focus will cycle back to the first element after the last one.</em></p>
+          <k-focus-capture>
+            <div class="card">
+              <button class="mb">First Button</button>
+              <input type="text" placeholder="Input field" class="mb" />
+              <button class="mb">Second Button</button>
+              <a href="#" class="d-b mb">Link</a>
+            </div>
+          </k-focus-capture>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="dialogExample"><a href="#dialogExample" class="no-link">Dialog Example</a></h3>
+    <p>FocusCapture is used internally by the <a href="dialog.html">Dialog</a> and <a href="aside.html">Aside</a> components. You do not need to add it yourself. Open the dialog below and tab through the elements to see how focus is trapped within the dialog.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"focusDialog"</span> <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">"Close"</span> <span class="hljs-attr">confirm-text</span>=<span class="hljs-string">"Submit"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">h6</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m0 px"</span>&gt;</span>Focus Capture Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Tab through the elements. Focus stays trapped in the dialog.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span> /&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span> /&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"document.getElementById('focusDialog').open()"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <button onclick="document.getElementById('focusDialog').open()">Open Dialog</button>
+          <k-dialog
+            id="focusDialog"
+            cancel-text="Close"
+            confirm-text="Submit"
+          >
+            <h6 slot="title" class="m0 px">Focus Capture Dialog</h6>
+            <div class="p">
+              <p>Tab through the elements. Focus stays trapped in the dialog.</p>
+              <input type="text" placeholder="Name" class="mb" />
+              <input type="email" placeholder="Email" class="mb" />
+            </div>
+          </k-dialog>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef">JavaScript Reference</h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends LitElement</h6>
+    <h5>
+      <code>new FocusCapture()</code>
+    </h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li>Lit</li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>afterFocus<i>: function</i></code></h5>
+    <p>A method that is called when focus reaches the end capture element. By default, it finds the first focusable element within the component and focuses it. Focusable elements include: <code>button</code>, <code>[href]</code>, <code>input</code>, <code>select</code>, <code>textarea</code>, and <code>[tabindex]:not([tabindex="-1"])</code>.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>render()<i>: TemplateResult</i></code></h5>
+    <p>Renders the component with a slot for children and an invisible div with <code>tabindex="0"</code> that captures focus and cycles it back to the beginning.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/FocusCapture.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Dialog.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>