kempo-ui 0.4.11 → 0.4.13

package/docs/utils/elevation.html

@@ -120,6 +120,9 @@
             href="../components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a
               href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="segmented control segment option button group components"><a
+              href="../components/segmented-control.html"
+            >Segmented Control<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>

package/docs/utils/formatTimestamp.html

@@ -120,6 +120,9 @@
             href="../components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a
               href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="segmented control segment option button group components"><a
+              href="../components/segmented-control.html"
+            >Segmented Control<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>

package/docs/utils/object.html

@@ -120,6 +120,9 @@
             href="../components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a
               href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="segmented control segment option button group components"><a
+              href="../components/segmented-control.html"
+            >Segmented Control<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>

package/docs/utils/propConverters.html

@@ -120,6 +120,9 @@
             href="../components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a
               href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="segmented control segment option button group components"><a
+              href="../components/segmented-control.html"
+            >Segmented Control<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>

package/docs/utils/sanitizeHtml.html

@@ -120,6 +120,9 @@
             href="../components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a
               href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="segmented control segment option button group components"><a
+              href="../components/segmented-control.html"
+            >Segmented Control<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>

package/docs/utils/string.html

@@ -120,6 +120,9 @@
             href="../components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a
               href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="segmented control segment option button group components"><a
+              href="../components/segmented-control.html"
+            >Segmented Control<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>

package/docs/utils/theme.html

@@ -120,6 +120,9 @@
             href="../components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a
               href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="segmented control segment option button group components"><a
+              href="../components/segmented-control.html"
+            >Segmented Control<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>

package/docs/utils/toTitleCase.html

@@ -120,6 +120,9 @@
             href="../components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a
               href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="segmented control segment option button group components"><a
+              href="../components/segmented-control.html"
+            >Segmented Control<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>

package/docs/utils/type.html

@@ -120,6 +120,9 @@
             href="../components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a
               href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="segmented control segment option button group components"><a
+              href="../components/segmented-control.html"
+            >Segmented Control<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>

package/docs/utils/voice.html

@@ -120,6 +120,9 @@
             href="../components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a
               href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="segmented control segment option button group components"><a
+              href="../components/segmented-control.html"
+            >Segmented Control<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>

package/docs/utils/wait.html

@@ -120,6 +120,9 @@
             href="../components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a
               href="../components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="segmented control segment option button group components"><a
+              href="../components/segmented-control.html"
+            >Segmented Control<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a
               href="../components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>

package/docs-src/components/segmented-control.page.html

@@ -0,0 +1,236 @@
+<page pageName="Segmented Control" title="Segmented Control - 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 pl">
+        <h6>Examples</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#selectedByDefault">Selected By Default</a><br />
+        <a href="#javascriptUsage">JavaScript Usage</a><br />
+        <a href="#customComponents">Icon Options</a><br />
+        <a href="#formUsage">Form Integration</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="#events">Events</a><br />
+        <a href="#optionElement">Option Element</a><br />
+      </div>
+    </k-accordion-panel>
+    </k-accordion>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>A segmented control groups related options and allows the user to select one at a time. Provide your own sub-components as options.</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-segmented-control</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sc-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"small"</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">k-sc-option</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sc-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"medium"</span>&gt;</span>Medium<span class="hljs-tag">&lt;/<span class="hljs-name">k-sc-option</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sc-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"large"</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">k-sc-option</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-segmented-control</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-segmented-control>
+            <k-sc-option value="small">Small</k-sc-option>
+            <k-sc-option value="medium">Medium</k-sc-option>
+            <k-sc-option value="large">Large</k-sc-option>
+          </k-segmented-control>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="selectedByDefault"><a href="#selectedByDefault" class="no-link">Selected By Default</a></h3>
+    <p>Set an initial value to select an option by default.</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-segmented-control</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"medium"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sc-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"small"</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">k-sc-option</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sc-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"medium"</span>&gt;</span>Medium<span class="hljs-tag">&lt;/<span class="hljs-name">k-sc-option</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sc-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"large"</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">k-sc-option</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-segmented-control</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-segmented-control value="medium">
+            <k-sc-option value="small">Small</k-sc-option>
+            <k-sc-option value="medium">Medium</k-sc-option>
+            <k-sc-option value="large">Large</k-sc-option>
+          </k-segmented-control>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="javascriptUsage"><a href="#javascriptUsage" class="no-link">JavaScript Usage</a></h3>
+    <p>Get and set the selected value programmatically using JavaScript.</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-segmented-control</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sizes"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"medium"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sc-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"small"</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">k-sc-option</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sc-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"medium"</span>&gt;</span>Medium<span class="hljs-tag">&lt;/<span class="hljs-name">k-sc-option</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sc-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"large"</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">k-sc-option</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-segmented-control</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Selected: <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"output"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><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-keyword">const</span> $sizes = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sizes'</span>);<br />  <span class="hljs-keyword">const</span> $output = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'output'</span>);<br />  <br />  $output.textContent = $sizes.value;<br />  <br />  $sizes.addEventListener(<span class="hljs-string">'change'</span>, (event) =&gt; {<br />    $output.textContent = event.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-segmented-control id="sizes" value="medium">
+            <k-sc-option value="small">Small</k-sc-option>
+            <k-sc-option value="medium">Medium</k-sc-option>
+            <k-sc-option value="large">Large</k-sc-option>
+          </k-segmented-control>
+          <p>Selected: <span id="output"></span></p>
+          <script>
+            const $sizes = document.getElementById('sizes');
+            const $output = document.getElementById('output');
+            
+            $output.textContent = $sizes.value;
+            
+            $sizes.addEventListener('change', (event) => {
+              $output.textContent = event.detail.value;
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="customComponents"><a href="#customComponents" class="no-link">Custom Components as Options</a></h3>
+    <p>Use any custom components as the options within the segmented control.</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-segmented-control</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"list"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sc-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"grid"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cards"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-sc-option</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sc-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"list"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"format_list_bulleted"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-sc-option</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-segmented-control</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-segmented-control value="list">
+            <k-sc-option value="grid"><k-icon name="cards"></k-icon></k-sc-option>
+            <k-sc-option value="list"><k-icon name="format_list_bulleted"></k-icon></k-sc-option>
+          </k-segmented-control>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="formUsage"><a href="#formUsage" class="no-link">Form Integration</a></h3>
+    <p>The segmented control integrates with HTML forms using the name attribute. The selected value is submitted with the form.</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">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sizeForm"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Size:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-segmented-control</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"size"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"medium"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-sc-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"small"</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">k-sc-option</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-sc-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"medium"</span>&gt;</span>Medium<span class="hljs-tag">&lt;/<span class="hljs-name">k-sc-option</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-sc-option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"large"</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">k-sc-option</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-segmented-control</span>&gt;</span><br />  <br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>&gt;</span>Submit<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">type</span>=<span class="hljs-string">"reset"</span>&gt;</span>Reset<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Submitted: <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"result"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><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">'sizeForm'</span>).addEventListener(<span class="hljs-string">'submit'</span>, (e) =&gt; {<br />    e.preventDefault();<br />    <span class="hljs-keyword">const</span> formData = <span class="hljs-keyword">new</span> FormData(e.target);<br />    <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'result'</span>).textContent = formData.get(<span class="hljs-string">'size'</span>);<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">
+          <form id="sizeForm">
+            <label>Size:</label>
+            <k-segmented-control name="size" value="medium">
+              <k-sc-option value="small">Small</k-sc-option>
+              <k-sc-option value="medium">Medium</k-sc-option>
+              <k-sc-option value="large">Large</k-sc-option>
+            </k-segmented-control>
+            <div class="mt">
+              <button type="submit" class="mr">Submit</button>
+              <button type="reset">Reset</button>
+            </div>
+          </form>
+          <p>Submitted: <span id="result"></span></p>
+          <script>
+            document.getElementById('sizeForm').addEventListener('submit', (e) => {
+              e.preventDefault();
+              const formData = new FormData(e.target);
+              document.getElementById('result').textContent = formData.get('size');
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <hr class="mt" />
+
+    <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>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">new</span> SegmentedControl();</code></pre>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <p>The segmented control component is a custom element and does not require any external dependencies beyond the Kempo-UI library.</p>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <div class="table-wrapper mb">
+      <table class="w-full">
+        <thead>
+          <tr>
+            <th>Property</th>
+            <th>Type</th>
+            <th>Default</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><code>value</code></td>
+            <td>String</td>
+            <td><code>''</code></td>
+            <td>The value of the currently selected option. Set this to match the `value` attribute of one of the `<k-sc-option>` children.</td>
+          </tr>
+          <tr>
+            <td><code>name</code></td>
+            <td>String</td>
+            <td><code>''</code></td>
+            <td>The name attribute for form submission. When used in a form, this is the key under which the selected value is submitted.</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <div class="table-wrapper mb">
+      <table class="w-full">
+        <thead>
+          <tr>
+            <th>Event</th>
+            <th>Detail</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><code>change</code></td>
+            <td><code>{ value: String }</code></td>
+            <td>Fired when the selected option changes. The detail contains the new value.</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <h3 id="optionElement"><a href="#optionElement" class="no-link">Option Element (k-sc-option)</a></h3>
+    <p>The <code>&lt;k-sc-option&gt;</code> element represents a single option within the segmented control. It is a lightweight custom element that wraps your option content.</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">new</span> SegmentedControlOption();</code></pre>
+
+    <h4>Attributes</h4>
+    <div class="table-wrapper mb">
+      <table class="w-full">
+        <thead>
+          <tr>
+            <th>Attribute</th>
+            <th>Type</th>
+            <th>Required</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><code>value</code></td>
+            <td>String</td>
+            <td>Yes</td>
+            <td>The value identifier for this option. Should be unique among sibling options and used to select this option via the parent's <code>value</code> property.</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <h4>Content</h4>
+    <p>The <code>&lt;k-sc-option&gt;</code> element accepts any HTML content or components as children. Common use cases include text labels or icons (e.g., <code>&lt;k-icon&gt;</code> elements).</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/SegmentedControl.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/tabs.page.html

@@ -9,6 +9,7 @@
           <a href="#tabSpacers">Tab Spacers</a><br />
           <a href="#scrollingTabs">Scrolling Tabs</a><br />
           <a href="#fixedHeight">Fixed Height</a><br />
+          <a href="#persistentState">Persistent State</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 />
@@ -155,6 +156,30 @@
       </div>
     </div>
 
+    <h3 id="persistentState"><a href="#persistentState" class="no-link">Persistent State</a></h3>
+    <p>Use the <code>persistent-id</code> attribute to automatically save and restore the active tab to browser localStorage. When the component is reloaded, it will restore the previously active tab.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tabs</span> <span class="hljs-attr">persistent-id</span>=<span class="hljs-string">"userPreferences"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"account"</span>&gt;</span>Account<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"settings"</span>&gt;</span>Settings<span class="hljs-tag">&lt;/<span class="hljs-name">k-tab</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"account"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Account settings content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"settings"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>General settings content<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-tab-content</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-tabs</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-tabs persistent-id="tabsPersistentExample">
+            <k-tab for="account">Account</k-tab>
+            <k-tab for="settings">Settings</k-tab>
+            <k-tab-content name="account">
+              <p>Account settings content</p>
+            </k-tab-content>
+            <k-tab-content name="settings">
+              <p>General settings content</p>
+            </k-tab-content>
+          </k-tabs>
+        </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>
@@ -170,6 +195,8 @@
     <p>The name of the active tab. Syncs to <code>active</code> attribute.</p>
     <h5><code>fixedHeight<i>: boolean</i></code></h5>
     <p>Whether the tabs component uses fixed height mode. Syncs to <code>fixed-height</code> attribute.</p>
+    <h5><code>persistentId<i>: string</i></code></h5>
+    <p>A unique identifier for persisting the active tab state to localStorage. When set, the component will save the active tab name and restore it on reload. Syncs to <code>persistent-id</code> attribute.</p>
     <h5><code>contents<i>: TabContent[]</i></code></h5>
     <p>Returns an array of all tab content elements.</p>
     <h5><code>tabs<i>: Tab[]</i></code></h5>
@@ -192,6 +219,8 @@
     <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
     <h5><code>tab</code></h5>
     <p>Fired when the active tab changes. Detail contains <code>{ tab }</code> with the name of the new active tab.</p>
+    <h5><code>restored</code></h5>
+    <p>Fired when the active tab is restored from persistent localStorage. Detail contains <code>{ tab }</code> with the name of the restored active tab. Only fires when <code>persistent-id</code> is set and a stored value is found.</p>
   </content>
   <content location="scripts">
     <script type="module" src="{{pathToRoot}}src/components/Tabs.js"></script>

package/docs-src/index.page.html

@@ -179,6 +179,12 @@
           <p class="tc-muted">Draggable handle to resize adjacent elements dynamically.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/segmented-control.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Segmented Control</h3>
+          <p class="tc-muted">Button group where one option can be selected at a time with support for custom sub-components.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="{{pathToRoot}}components/show-more.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Show More</h3>

package/docs-src/nav.fragment.html

@@ -104,6 +104,9 @@
             href="{{pathToRoot}}components/progress.html">Progress<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="resize components"><a
               href="{{pathToRoot}}components/resize.html">Resize<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="segmented control segment option button group components"><a
+              href="{{pathToRoot}}components/segmented-control.html"
+            >Segmented Control<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="show more showmore components"><a
               href="{{pathToRoot}}components/show-more.html"
             >Show More<br><small>Component</small></a></k-filter-item>

package/icons/account-circle.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/></svg>

package/llms.txt

@@ -76,6 +76,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-nav-spacer>` | `NavSpacer.js` | Auto-sizing spacer that offsets page content below a fixed `k-nav` bar; default bottom margin of `var(--spacer)` can be overridden with kempo-css margin utilities | [nav-spacer.html](https://dustinpoissant.github.io/kempo-ui/components/nav-spacer.html) |
 | `<k-photo-viewer>` | `PhotoViewer.js` | Lightbox/gallery viewer | [photo-viewer.html](https://dustinpoissant.github.io/kempo-ui/components/photo-viewer.html) |
 | `<k-resize>` | `Resize.js` | Resizable pane with drag handle | [resize.html](https://dustinpoissant.github.io/kempo-ui/components/resize.html) |
+| `<k-segmented-control>` | `SegmentedControl.js` | Button group with one selectable option; accepts custom sub-components as options; `value` property reflects the selected option's value; fires `change` event | [segmented-control.html](https://dustinpoissant.github.io/kempo-ui/components/segmented-control.html) |
 | `<k-show-more>` | `ShowMore.js` | Truncated content with expand toggle | [show-more.html](https://dustinpoissant.github.io/kempo-ui/components/show-more.html) |
 | `<k-slider>` | `Slider.js` | Slider with min, max, discrete step snap points, vertical orientation, and dual-handle range mode via comma-separated `value` (e.g. `"20,80"`); `format` attribute for value formatting (e.g. `"$0.00"`) applied to change events, form submission, and optional drag `tooltip`; form-associated; fires `change` | [slider.html](https://dustinpoissant.github.io/kempo-ui/components/slider.html) |
 | `<k-sortable>` `<k-sortable-item>` | `Sortable.js` | Drag-to-reorder list | [sortable.html](https://dustinpoissant.github.io/kempo-ui/components/sortable.html) |
@@ -83,7 +84,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-spinner>` | `Spinner.js` | Loading indicator; `size` (xs/sm/md/lg/xl), `variant` (spinner/dots/bar) | [spinner.html](https://dustinpoissant.github.io/kempo-ui/components/spinner.html) |
 | `<k-split>` | `Split.js` | Resizable split panes | [split.html](https://dustinpoissant.github.io/kempo-ui/components/split.html) |
 | `<k-table>` | `Table.js` | Data table with sorting, filtering, pagination, row selection, server sync; `placeholder` (default "No Records") shown when empty; `filtered-placeholder` shown when all records are filtered/hidden | [table.html](https://dustinpoissant.github.io/kempo-ui/components/table.html) |
-| `<k-tabs>` `<k-tab>` `<k-tab-content>` `<k-tab-spacer>` | `Tabs.js` | Tabbed interface; `<k-tab for-content="id">` links to `<k-tab-content name="id">` | [tabs.html](https://dustinpoissant.github.io/kempo-ui/components/tabs.html) |
+| `<k-tabs>` `<k-tab>` `<k-tab-content>` `<k-tab-spacer>` | `Tabs.js` | Tabbed interface; `<k-tab for-content="id">` links to `<k-tab-content name="id">`; `persistent-id` attribute persists active tab to localStorage | [tabs.html](https://dustinpoissant.github.io/kempo-ui/components/tabs.html) |
 | `<k-tags>` `<k-tag>` | `Tags.js` | Tag input; add/remove tags; fires `change` | [tags.html](https://dustinpoissant.github.io/kempo-ui/components/tags.html) |
 | `<k-text-to-speech>` | `TextToSpeech.js` | Button that wraps `window.speechSynthesis`; speaks `text` attr or slotted content; `voice`, `language`, `rate`, `pitch`, `volume` attrs; methods `speak(text?)` / `stop()` / `toggle()`; fires `start`, `end`, `error` | [text-to-speech.html](https://dustinpoissant.github.io/kempo-ui/components/text-to-speech.html) |
 | `<k-theme-select>` | `ThemeSelect.js` | Dropdown to pick a theme | [theme-select.html](https://dustinpoissant.github.io/kempo-ui/components/theme-select.html) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",