kempo-ui 0.4.11 → 0.4.13

package/CHANGELOG.md

@@ -5,6 +5,30 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- **Tabs component**: `persistent-id` attribute for storing/restoring active tab state
+  - New `persistentId` property (String type, reflects to `persistent-id` attribute)
+  - Active tab state is automatically saved to localStorage when it changes
+  - Previously active tab is automatically restored on page load
+  - Fires `restored` event when state is restored from localStorage
+  - Fires `tab` event on both manual change and state restoration
+  - Supports multiple Tabs components with different `persistent-id` values for independent state management
+  - Safe fallback when localStorage is unavailable
+  - New unit test suite with 6 test cases covering all persistence scenarios
+
+## [0.4.12] - 2026-05-03
+### Added
+- **SegmentedControl component**: New form-integrated segmented control component
+  - Renders child `<k-sc-option>` elements as a button group using Kempo-CSS utility classes
+  - Supports rich content in options including text and icon elements (via `<k-icon>`)
+  - Full form integration using ElementInternals API (`formAssociated`) for proper form submission and reset
+  - `name` attribute for form field identification
+  - `value` property reflects and controls the selected option
+  - Dispatches `change` events when selection changes
+  - Comprehensive unit test suite with 13 test cases covering element creation, properties, option recognition, selection, styling, and events
+  - Complete documentation with examples: Basic Usage, Selected By Default, JavaScript Usage, Icon Options, and Form Integration
+  - Test file: `tests/components/SegmentedControl.browser-test.js`
+  - Documentation: `docs-src/components/segmented-control.page.html`
 
 ## [0.4.11] - 2026-05-01
 ### Added

package/dist/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/dist/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;