kempo-ui 0.4.11 → 0.4.13

package/docs/components/shadow-component.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/components/show-more.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/components/slider.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/components/sortable.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/components/speech-to-text.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/components/spinner.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/components/split.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/components/table.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/components/tableControls.html

@@ -158,6 +158,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/components/tableCustomFields.html

@@ -158,6 +158,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/components/tableFetchRecords.html

@@ -159,6 +159,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/components/tableFieldSortHide.html

@@ -159,6 +159,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/components/tablePagination.html

@@ -158,6 +158,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/components/tablePlaceholder.html

@@ -122,6 +122,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/components/tableRecordEditing.html

@@ -158,6 +158,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/components/tableRecordFiltering.html

@@ -159,6 +159,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/components/tableRecordHiding.html

@@ -158,6 +158,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/components/tableRecordSearching.html

@@ -159,6 +159,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/components/tableRecordSelection.html

@@ -158,6 +158,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/components/tableRowControls.html

@@ -158,6 +158,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/components/tableServerSync.html

@@ -158,6 +158,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/components/tableSorting.html

@@ -159,6 +159,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/components/tabs.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>
@@ -494,6 +497,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 />
@@ -640,6 +644,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>
@@ -655,6 +683,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>
@@ -677,6 +707,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>
   
   </k-main>
   <div style="height:33vh"></div>

package/docs/components/tags.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/components/text-to-speech.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/components/theme-select.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/components/theme-switcher.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/components/time.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/components/timestamp.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/components/toast.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/components/toggle.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/components/tree.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/components/voice-selector.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/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/docs/index.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>
@@ -661,6 +664,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="./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="./components/show-more.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Show More</h3>

package/docs/src/components/SegmentedControl.js

@@ -0,0 +1,16 @@
+import{html as t,css as e,unsafeHTML as s}from"../lit-all.min.js";import n from"./ShadowComponent.js";class i extends n{static formAssociated=!0;static properties={value:{type:String,reflect:!0},name:{type:String}};constructor(){if(super(),this.value="",this.name="",this.initialValue="","function"==typeof this.attachInternals)try{this.internals=this.attachInternals()}catch(t){}}connectedCallback(){super.connectedCallback(),this.initialValue=this.getAttribute("value")||"",this.addEventListener("slotchange",this.handleSlotChange,!0);const t=this.closest("form");t&&t.addEventListener("reset",this.handleReset,!0)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("slotchange",this.handleSlotChange,!0);const t=this.closest("form");t&&t.removeEventListener("reset",this.handleReset,!0)}updated(t){if(super.updated(t),t.has("value")){if(this.internals&&"function"==typeof this.internals.setFormValue)try{this.internals.setFormValue(this.value||null)}catch(t){}this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))}}handleSlotChange=()=>{this.requestUpdate()};handleReset=()=>{this.value=this.initialValue};handleButtonClick=t=>{this.value=t};getOptions=()=>Array.from(this.children).filter(t=>"K-SC-OPTION"===t.tagName);render(){const e=this.getOptions();return t`
+      <div class="btn-grp">
+        ${e.map(e=>{const n=e.getAttribute("value")||"",i=n===this.value;return t`
+            <button
+              class="${i?"primary":""}"
+              @click=${()=>this.handleButtonClick(n)}
+              ?aria-pressed=${i}
+            >${s(e.innerHTML)}</button>
+          `})}
+      </div>
+      <slot style="display:none;"></slot>
+    `}static styles=e`
+    :host {
+      display: block;
+    }
+  `}class a extends HTMLElement{connectedCallback(){this.hasAttribute("value")||this.setAttribute("value","")}}export default i;customElements.define("k-segmented-control",i),customElements.define("k-sc-option",a);

package/docs/src/components/Tabs.js

@@ -1,4 +1,4 @@
-import{html as t,css as e}from"../lit-all.min.js";import o from"./ShadowComponent.js";import{boolExists as s}from"../utils/propConverters.js";export class Tabs extends o{static properties={active:{type:String,reflect:!0},fixedHeight:{type:Boolean,reflect:!0,attribute:"fixed-height",converter:s}};constructor(){super(),this.active="",this.fixedHeight=!1}firstUpdated(){if(super.firstUpdated(),!this.active){const t=this.querySelector("k-tab-content");t&&(this.active=t.name)}this.setupScrollListeners(),this.updateScrollIndicators(),new ResizeObserver(()=>this.updateScrollIndicators()).observe(this.shadowRoot.getElementById("tabs"))}updated(t){super.updated(t),t.has("active")&&this.updateActiveElements()}setupScrollListeners(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),o=this.shadowRoot.getElementById("scroll-right");t.addEventListener("scroll",()=>this.updateScrollIndicators()),e.addEventListener("click",()=>{t.scrollBy({left:-200,behavior:"smooth"})}),o.addEventListener("click",()=>{t.scrollBy({left:200,behavior:"smooth"})})}updateScrollIndicators(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),o=this.shadowRoot.getElementById("scroll-right"),s=t.scrollLeft>0,r=t.scrollLeft<t.scrollWidth-t.clientWidth;e.classList.toggle("visible",s),o.classList.toggle("visible",r)}updateActiveElements(){const t=this.getActiveTab();t&&(t.active=!1);const e=this.getActiveContent();e&&(e.active=!1);const o=this.getTab(this.active);o&&(o.active=!0);const s=this.getContent(this.active);s&&(s.active=!0),this.dispatchEvent(new CustomEvent("tab",{detail:{tab:this.active},bubbles:!0}))}get contents(){return[...this.querySelectorAll(":scope > k-tab-content")]}get tabs(){return[...this.querySelectorAll(":scope > k-tab")]}getTab(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab[for="${t}"]`)),!e){let o=parseInt(t);o||(o=0),e=this.querySelectorAll("k-tab")[o]}return e}getActiveTab(){return this.querySelector(":scope > k-tab[active]")}getContent(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab-content[name="${t}"]`)),!e){let o=parseInt(t);o||(o=0),e=this.querySelectorAll("k-tab-content")[o]}return e}getActiveContent(){return this.querySelector(":scope > k-tab-content[active]")}static styles=e`
+import{html as t,css as e}from"../lit-all.min.js";import s from"./ShadowComponent.js";import{boolExists as o}from"../utils/propConverters.js";export class Tabs extends s{static properties={active:{type:String,reflect:!0},fixedHeight:{type:Boolean,reflect:!0,attribute:"fixed-height",converter:o},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.active="",this.fixedHeight=!1,this.persistentId=null}firstUpdated(){if(super.firstUpdated(),!this.active){const t=this.querySelector("k-tab-content");t&&(this.active=t.name)}this.setupScrollListeners(),this.updateScrollIndicators(),new ResizeObserver(()=>this.updateScrollIndicators()).observe(this.shadowRoot.getElementById("tabs"))}updated(t){if(super.updated(t),t.has("persistentId")&&this.persistentId&&window?.localStorage){const t=`tabs-persistent-id-${this.persistentId}`,e=window.localStorage.getItem(t);null!==e&&(this.active=e,this.dispatchEvent(new CustomEvent("restored",{detail:{tab:e},bubbles:!0})))}t.has("active")&&this.updateActiveElements()}setupScrollListeners(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),s=this.shadowRoot.getElementById("scroll-right");t.addEventListener("scroll",()=>this.updateScrollIndicators()),e.addEventListener("click",()=>{t.scrollBy({left:-200,behavior:"smooth"})}),s.addEventListener("click",()=>{t.scrollBy({left:200,behavior:"smooth"})})}updateScrollIndicators(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),s=this.shadowRoot.getElementById("scroll-right"),o=t.scrollLeft>0,i=t.scrollLeft<t.scrollWidth-t.clientWidth;e.classList.toggle("visible",o),s.classList.toggle("visible",i)}updateActiveElements(){const t=this.getActiveTab();t&&(t.active=!1);const e=this.getActiveContent();e&&(e.active=!1);const s=this.getTab(this.active);s&&(s.active=!0);const o=this.getContent(this.active);if(o&&(o.active=!0),this.dispatchEvent(new CustomEvent("tab",{detail:{tab:this.active},bubbles:!0})),this.persistentId&&window?.localStorage){const t=`tabs-persistent-id-${this.persistentId}`;window.localStorage.setItem(t,this.active)}}get contents(){return[...this.querySelectorAll(":scope > k-tab-content")]}get tabs(){return[...this.querySelectorAll(":scope > k-tab")]}getTab(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab[for="${t}"]`)),!e){let s=parseInt(t);s||(s=0),e=this.querySelectorAll("k-tab")[s]}return e}getActiveTab(){return this.querySelector(":scope > k-tab[active]")}getContent(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab-content[name="${t}"]`)),!e){let s=parseInt(t);s||(s=0),e=this.querySelectorAll("k-tab-content")[s]}return e}getActiveContent(){return this.querySelector(":scope > k-tab-content[active]")}static styles=e`
 		:host {
 			display: block;
 			width: 100%;
@@ -99,7 +99,7 @@ import{html as t,css as e}from"../lit-all.min.js";import o from"./ShadowComponen
 					<slot></slot>
 				</div>
 			</div>
-		`}}export class Tab extends o{static properties={active:{type:Boolean,reflect:!0,converter:s},for:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.for="",this.slot="tabs"}handleClick=()=>{if(!this.active){const t=this.parentElement;t&&"K-TABS"===t.tagName&&(t.active=this.for||t.tabs.indexOf(this).toString())}};get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}render(){return t`
+		`}}export class Tab extends s{static properties={active:{type:Boolean,reflect:!0,converter:o},for:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.for="",this.slot="tabs"}handleClick=()=>{if(!this.active){const t=this.parentElement;t&&"K-TABS"===t.tagName&&(t.active=this.for||t.tabs.indexOf(this).toString())}};get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}render(){return t`
 			<button id="button" @click=${this.handleClick}>
 				<slot></slot>
 			</button>
@@ -131,7 +131,7 @@ import{html as t,css as e}from"../lit-all.min.js";import o from"./ShadowComponen
 		:host([active]) #button {
 			color: var(--tc_primary);
 		}
-	`}export class TabContent extends o{static properties={active:{type:Boolean,reflect:!0,converter:s},name:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.name=""}get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}render(){return t`<slot></slot>`}static styles=e`
+	`}export class TabContent extends s{static properties={active:{type:Boolean,reflect:!0,converter:o},name:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.name=""}get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}render(){return t`<slot></slot>`}static styles=e`
 		:host {
 			display: block;
 			height: 100%;
@@ -148,7 +148,7 @@ import{html as t,css as e}from"../lit-all.min.js";import o from"./ShadowComponen
 		:host(:not([active])) {
 			display: none;
 		}
-	`}export class TabSpacer extends o{constructor(){super(),this.slot="tabs"}static styles=e`
+	`}export class TabSpacer extends s{constructor(){super(),this.slot="tabs"}static styles=e`
 		:host {
 			flex: 1 1 auto !important;
 			height: 1px;

package/docs/utils/context.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/cookie.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/debounce.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/drag.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>