kempo-ui 0.0.70 → 0.0.72

package/.github/ISSUE_TEMPLATE/change-request.md

@@ -18,6 +18,6 @@ assignees: ''
 ## What is the suggested fix
 
 ## Tasks
-- [] Apply the change
-- [] Add docs and examples
-- [] Add unit tests
+- [ ] Apply the change
+- [ ] Add docs and examples
+- [ ] Add unit tests

package/.github/workflows/publish.yml

@@ -33,6 +33,10 @@ jobs:
 
       - run: npm ci
 
+      - name: Build project and documentation
+        run: |
+          npm run build
+
       - name: Set version type
         id: version
         run: |

package/.github/workflows/test.yml

@@ -0,0 +1,23 @@
+name: Run Unit Tests
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+
+      - run: npm ci
+
+      - name: Run Unit Tests
+        run: npm test

package/dist/components/Dropdown.js

@@ -1,4 +1,4 @@
-import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{boolTrueFalse}from"../utils/propConverters.js";const openDropdowns=new Set;export default class Dropdown extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},openDirection:{type:String,reflect:!0,attribute:"open-direction"},closeOnSelect:{type:Boolean,reflect:!0,attribute:"close-on-select",converter:boolTrueFalse},closeOnClickOutside:{type:Boolean,reflect:!0,attribute:"close-on-click-outside",converter:boolTrueFalse}};anchorId=`dropdown-anchor-${Math.random().toString(36).slice(2,11)}`;constructor(){super(),this.opened=!1,this.openDirection="down left",this.closeOnSelect=!0,this.closeOnClickOutside=!0}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick),document.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick),document.removeEventListener("keydown",this.handleKeydown),openDropdowns.delete(this)}updated(t){super.updated(t),t.has("opened")&&(this.opened?openDropdowns.add(this):openDropdowns.delete(this),this.dispatchEvent(new CustomEvent(this.opened?"opened":"closed",{bubbles:!0})))}handleDocumentClick=t=>{const e=t.target.closest("k-dropdown"),o=t.target.closest('[slot="trigger"]');if(e&&e!==this&&o)return void(this.opened&&this.close());if(!this.opened)return;if(e!==this)return void(this.closeOnClickOutside&&this.close());if(o)return;t.target.closest("a, button")&&this.closeOnSelect&&this.close()};handleTriggerClick=t=>{t.stopPropagation(),this.opened||openDropdowns.forEach(t=>{t!==this&&t.close()}),this.toggle()};handleMenuClick=t=>{const e=t.target.closest("a, button");if(e&&!e.hasAttribute("disabled")){const t=e.dataset?.value||e.textContent.trim();this.dispatchEvent(new CustomEvent("select",{detail:{value:t,item:e},bubbles:!0}))}};handleKeydown=t=>{if(this.opened)if("Escape"===t.key)t.preventDefault(),this.close(),this.focusTrigger();else if("ArrowDown"===t.key)t.preventDefault(),this.focusNextItem();else if("ArrowUp"===t.key)t.preventDefault(),this.focusPreviousItem();else if("Enter"===t.key||" "===t.key){const e=this.querySelector("a:focus, button:focus");e&&(t.preventDefault(),e.click())}};open(){return openDropdowns.forEach(t=>{t!==this&&t.close()}),this.opened=!0,requestAnimationFrame(()=>this.focusFirstItem()),this}close(){return this.opened=!1,this}toggle(){return this.opened?this.close():this.open()}focusTrigger(){const t=this.querySelector('[slot="trigger"]');t&&t.focus()}getMenuItems(){return[...this.querySelectorAll("a, button")].filter(t=>!t.hasAttribute("disabled")&&!t.closest('[slot="trigger"]'))}focusFirstItem(){const t=this.getMenuItems();t.length>0&&t[0].focus()}focusNextItem(){const t=this.getMenuItems(),e=document.activeElement,o=t.indexOf(e),n=t[o+1]||t[0];n&&n.focus()}focusPreviousItem(){const t=this.getMenuItems(),e=document.activeElement,o=t.indexOf(e),n=t[o-1]||t[t.length-1];n&&n.focus()}getPositionArea(){const t=this.openDirection.toLowerCase().trim().split(/\s+/),e={down:"bottom",up:"top",left:"left",right:"right",center:"center"};return t.map(t=>e[t]||t).join(" ")}getFallbacks(){this.getPositionArea().split(" ");const t=[];return t.push("flip-block"),t.push("flip-inline"),t.push("flip-block flip-inline"),t.join(", ")}static styles=css`
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{boolTrueFalse}from"../utils/propConverters.js";const openDropdowns=new Set;export default class Dropdown extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},openDirection:{type:String,reflect:!0,attribute:"open-direction"},closeOnSelect:{type:Boolean,reflect:!0,attribute:"close-on-select",converter:boolTrueFalse},closeOnClickOutside:{type:Boolean,reflect:!0,attribute:"close-on-click-outside",converter:boolTrueFalse}};constructor(){super(),this.opened=!1,this.openDirection="down left",this.closeOnSelect=!0,this.closeOnClickOutside=!0}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick),document.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick),document.removeEventListener("keydown",this.handleKeydown),openDropdowns.delete(this)}updated(t){super.updated(t),t.has("opened")&&(this.opened?openDropdowns.add(this):openDropdowns.delete(this),this.dispatchEvent(new CustomEvent(this.opened?"opened":"closed",{bubbles:!0})))}handleDocumentClick=t=>{const e=t.target.closest("k-dropdown"),o=t.target.closest('[slot="trigger"]');if(e&&e!==this&&o)return void(this.opened&&this.close());if(!this.opened)return;if(e!==this)return void(this.closeOnClickOutside&&this.close());if(o)return;t.target.closest("a, button")&&this.closeOnSelect&&this.close()};handleTriggerClick=t=>{t.stopPropagation(),this.opened||openDropdowns.forEach(t=>{t!==this&&t.close()}),this.toggle()};handleMenuClick=t=>{const e=t.target.closest("a, button");if(e&&!e.hasAttribute("disabled")){const t=e.dataset?.value||e.textContent.trim();this.dispatchEvent(new CustomEvent("select",{detail:{value:t,item:e},bubbles:!0}))}};handleKeydown=t=>{if(this.opened)if("Escape"===t.key)t.preventDefault(),this.close(),this.focusTrigger();else if("ArrowDown"===t.key)t.preventDefault(),this.focusNextItem();else if("ArrowUp"===t.key)t.preventDefault(),this.focusPreviousItem();else if("Enter"===t.key||" "===t.key){const e=this.querySelector("a:focus, button:focus");e&&(t.preventDefault(),e.click())}};open(){return openDropdowns.forEach(t=>{t!==this&&t.close()}),this.opened=!0,requestAnimationFrame(()=>this.focusFirstItem()),this}close(){return this.opened=!1,this}toggle(){return this.opened?this.close():this.open()}focusTrigger(){const t=this.querySelector('[slot="trigger"]');t&&t.focus()}getMenuItems(){return[...this.querySelectorAll("a, button")].filter(t=>!t.hasAttribute("disabled")&&!t.closest('[slot="trigger"]'))}focusFirstItem(){const t=this.getMenuItems();t.length>0&&t[0].focus()}focusNextItem(){const t=this.getMenuItems(),e=document.activeElement,o=t.indexOf(e),n=t[o+1]||t[0];n&&n.focus()}focusPreviousItem(){const t=this.getMenuItems(),e=document.activeElement,o=t.indexOf(e),n=t[o-1]||t[t.length-1];n&&n.focus()}static styles=css`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -15,8 +15,10 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 			min-width: anchor-size(width);
 			background: var(--c_bg);
 			border: 1px solid var(--c_border);
+			border-radius: var(--radius);
 			box-shadow: var(--drop_shadow);
 			margin: 0.25rem;
+			overflow: hidden;
 		}
 		:host([opened]) #menu {
 			display: block;

package/dist/components/Tree.js

@@ -6,7 +6,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			<div class="tree-root">
 				${e?e.map(([e,t])=>Tree.renderValue(t,e,1,this.depth)):Tree.renderValue(this.data,null,0,this.depth)}
 			</div>
-		`}static nodes=[];static addNode=(...e)=>{[...e].reverse().forEach(e=>{Object.prototype.hasOwnProperty.call(e,"nodeTag")||(e.nodeTag="k-tree-node-"+nodeTagCounter++,window.customElements.define(e.nodeTag,e)),Tree.nodes.unshift(e)})};static renderValue(e,t=null,s=0,r=0){const n=Tree.nodes.find(t=>t.detect(e))??TreeNode,a=document.createElement(n.nodeTag);return a.value=e,a.key=t,a.depth=s,a.maxDepth=r,a}}window.customElements.define("k-tree",Tree);export class TreeNode extends ShadowComponent{static nodeTag="k-tree-node";static properties={value:{type:Object},key:{attribute:!1},depth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:boolExists,reflect:!0},icon:{type:String}};constructor(){super(),this.value=null,this.key=null,this.depth=0,this.maxDepth=0,this.opened=!1,this.icon=null}connectedCallback(){super.connectedCallback(),this.depth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};renderLabel(){return"object"==typeof this.value&&null!==this.value?html`${Array.isArray(this.value)?"Array":"Object"}`:html`${this.value}`}getChildren(){return"object"!=typeof this.value||null===this.value?null:Array.isArray(this.value)?this.value.map((e,t)=>[t,e]):Object.entries(this.value)}renderIcon(){return this.icon?html`<k-icon name="${this.icon}"></k-icon>`:html`<k-icon name="chevron" class="toggle-icon" direction="${this.opened?"down":"right"}"></k-icon>`}render(){const e=this.getChildren(),t=null!==this.key?html`<span class="${"number"==typeof this.key?"tc-muted":""}">${this.key}: </span>`:"";return e?html`
+		`}static nodes=[];static addNode=(...e)=>{[...e].reverse().forEach(e=>{Object.prototype.hasOwnProperty.call(e,"nodeTag")||(e.nodeTag="k-tree-node-"+nodeTagCounter++,window.customElements.define(e.nodeTag,e)),Tree.nodes.unshift(e)})};static renderValue(e,t=null,s=0,n=0){const r=Tree.nodes.find(t=>t.detect(e));if(r){const s=new r(e),n=null!==t?html`<span class="${"number"==typeof t?"tc-muted":""}">${t}: </span>`:"";return html`<span class="d-b">${n}${s.renderLabel()}</span>`}const a=document.createElement(TreeNode.nodeTag);return a.value=e,a.key=t,a.depth=s,a.maxDepth=n,a}}window.customElements.define("k-tree",Tree);export class TreeNode extends ShadowComponent{static nodeTag="k-tree-node";static properties={value:{type:Object},key:{attribute:!1},depth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:boolExists,reflect:!0},icon:{type:String}};constructor(e){super(),this.value=void 0!==e?e:null,this.key=null,this.depth=0,this.maxDepth=0,this.opened=!1,this.icon=null}connectedCallback(){super.connectedCallback(),this.depth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};renderLabel(){return"object"==typeof this.value&&null!==this.value?html`${Array.isArray(this.value)?"Array":"Object"}`:html`${this.value}`}getChildren(){return"object"!=typeof this.value||null===this.value?null:Array.isArray(this.value)?this.value.map((e,t)=>[t,e]):Object.entries(this.value)}renderIcon(){return this.icon?html`<k-icon name="${this.icon}"></k-icon>`:html`<k-icon name="chevron" class="toggle-icon" direction="${this.opened?"down":"right"}"></k-icon>`}render(){const e=this.getChildren(),t=null!==this.key?html`<span class="${"number"==typeof this.key?"tc-muted":""}">${this.key}: </span>`:"";return e?html`
 			<div>
 				<button class="branch-label no-btn" @click=${this.toggle} aria-expanded="${this.opened}">
 					${this.renderIcon()}

package/dist/utils/formatTimestamp.js

@@ -1 +1 @@
-export default(e,i,t)=>{const s=new Date(parseInt(e));if(i){const e=(e,i)=>("000"+e).slice(-1*i),t={YYYY:s.getFullYear(),YY:String(s.getFullYear()).slice(-2),MM:e(s.getMonth()+1,2),M:s.getMonth()+1,DD:e(s.getDate(),2),D:s.getDate(),hh:e(s.getHours(),2),h:s.getHours(),mm:e(s.getMinutes(),2),m:s.getMinutes(),ss:e(s.getSeconds(),2),s:s.getSeconds(),iiii:e(s.getMilliseconds(),3),iii:e(s.getMilliseconds(),3),ii:e(s.getMilliseconds(),2),i:s.getMilliseconds()};return i.replace(/YYYY|YY|MM|M|DD|D|hh|h|mm|m|ss|s|iiii|iii|ii|i/g,e=>t[e])}return s.toLocaleString(t||navigator.language)};
+export default(e,i,t)=>{const s=new Date(parseInt(e));if(i){const e=(e,i)=>("000"+e).slice(-1*i),t={YYYY:s.getFullYear(),YY:String(s.getFullYear()).slice(-2),MM:e(s.getMonth()+1,2),M:s.getMonth()+1,DD:e(s.getDate(),2),D:s.getDate(),hh:e(s.getHours(),2),h:s.getHours(),mm:e(s.getMinutes(),2),m:s.getMinutes(),ss:e(s.getSeconds(),2),s:s.getSeconds(),iiii:e(s.getMilliseconds(),3),iii:e(s.getMilliseconds(),3),ii:e(s.getMilliseconds(),2),i:s.getMilliseconds()};return i.replace(/YYYY|YY|MM|M|DD|D|hh|h|mm|m|ss|s|iiii|iii|ii|i/g,e=>t[e])}return s.toLocaleString(t||Intl.DateTimeFormat().resolvedOptions().locale)};

package/docs/components/dropdown.html

@@ -35,6 +35,7 @@
           <a href="#attributes">Attributes</a><br />
           <a href="#methods">Methods</a><br />
           <a href="#eventsRef">Events</a><br />
+          <a href="#cssVars">CSS Custom Properties</a><br />
         </div>
       </k-accordion-panel>
     </k-accordion>
@@ -270,6 +271,10 @@
       <li><code>Escape</code> - Close the dropdown</li>
     </ul>
 
+    <h3 id="cssVars"><a href="#cssVars" class="no-link">CSS Custom Properties</a></h3>
+    <h5><code>--radius</code></h5>
+    <p>Controls the border radius of the dropdown menu. Defaults to the global <code>--radius</code> value.</p>
+
   </main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Dropdown.js"></script>

package/docs/src/components/Dropdown.js

@@ -1,4 +1,4 @@
-import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{boolTrueFalse}from"../utils/propConverters.js";const openDropdowns=new Set;export default class Dropdown extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},openDirection:{type:String,reflect:!0,attribute:"open-direction"},closeOnSelect:{type:Boolean,reflect:!0,attribute:"close-on-select",converter:boolTrueFalse},closeOnClickOutside:{type:Boolean,reflect:!0,attribute:"close-on-click-outside",converter:boolTrueFalse}};anchorId=`dropdown-anchor-${Math.random().toString(36).slice(2,11)}`;constructor(){super(),this.opened=!1,this.openDirection="down left",this.closeOnSelect=!0,this.closeOnClickOutside=!0}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick),document.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick),document.removeEventListener("keydown",this.handleKeydown),openDropdowns.delete(this)}updated(t){super.updated(t),t.has("opened")&&(this.opened?openDropdowns.add(this):openDropdowns.delete(this),this.dispatchEvent(new CustomEvent(this.opened?"opened":"closed",{bubbles:!0})))}handleDocumentClick=t=>{const e=t.target.closest("k-dropdown"),o=t.target.closest('[slot="trigger"]');if(e&&e!==this&&o)return void(this.opened&&this.close());if(!this.opened)return;if(e!==this)return void(this.closeOnClickOutside&&this.close());if(o)return;t.target.closest("a, button")&&this.closeOnSelect&&this.close()};handleTriggerClick=t=>{t.stopPropagation(),this.opened||openDropdowns.forEach(t=>{t!==this&&t.close()}),this.toggle()};handleMenuClick=t=>{const e=t.target.closest("a, button");if(e&&!e.hasAttribute("disabled")){const t=e.dataset?.value||e.textContent.trim();this.dispatchEvent(new CustomEvent("select",{detail:{value:t,item:e},bubbles:!0}))}};handleKeydown=t=>{if(this.opened)if("Escape"===t.key)t.preventDefault(),this.close(),this.focusTrigger();else if("ArrowDown"===t.key)t.preventDefault(),this.focusNextItem();else if("ArrowUp"===t.key)t.preventDefault(),this.focusPreviousItem();else if("Enter"===t.key||" "===t.key){const e=this.querySelector("a:focus, button:focus");e&&(t.preventDefault(),e.click())}};open(){return openDropdowns.forEach(t=>{t!==this&&t.close()}),this.opened=!0,requestAnimationFrame(()=>this.focusFirstItem()),this}close(){return this.opened=!1,this}toggle(){return this.opened?this.close():this.open()}focusTrigger(){const t=this.querySelector('[slot="trigger"]');t&&t.focus()}getMenuItems(){return[...this.querySelectorAll("a, button")].filter(t=>!t.hasAttribute("disabled")&&!t.closest('[slot="trigger"]'))}focusFirstItem(){const t=this.getMenuItems();t.length>0&&t[0].focus()}focusNextItem(){const t=this.getMenuItems(),e=document.activeElement,o=t.indexOf(e),n=t[o+1]||t[0];n&&n.focus()}focusPreviousItem(){const t=this.getMenuItems(),e=document.activeElement,o=t.indexOf(e),n=t[o-1]||t[t.length-1];n&&n.focus()}getPositionArea(){const t=this.openDirection.toLowerCase().trim().split(/\s+/),e={down:"bottom",up:"top",left:"left",right:"right",center:"center"};return t.map(t=>e[t]||t).join(" ")}getFallbacks(){this.getPositionArea().split(" ");const t=[];return t.push("flip-block"),t.push("flip-inline"),t.push("flip-block flip-inline"),t.join(", ")}static styles=css`
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{boolTrueFalse}from"../utils/propConverters.js";const openDropdowns=new Set;export default class Dropdown extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},openDirection:{type:String,reflect:!0,attribute:"open-direction"},closeOnSelect:{type:Boolean,reflect:!0,attribute:"close-on-select",converter:boolTrueFalse},closeOnClickOutside:{type:Boolean,reflect:!0,attribute:"close-on-click-outside",converter:boolTrueFalse}};constructor(){super(),this.opened=!1,this.openDirection="down left",this.closeOnSelect=!0,this.closeOnClickOutside=!0}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick),document.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick),document.removeEventListener("keydown",this.handleKeydown),openDropdowns.delete(this)}updated(t){super.updated(t),t.has("opened")&&(this.opened?openDropdowns.add(this):openDropdowns.delete(this),this.dispatchEvent(new CustomEvent(this.opened?"opened":"closed",{bubbles:!0})))}handleDocumentClick=t=>{const e=t.target.closest("k-dropdown"),o=t.target.closest('[slot="trigger"]');if(e&&e!==this&&o)return void(this.opened&&this.close());if(!this.opened)return;if(e!==this)return void(this.closeOnClickOutside&&this.close());if(o)return;t.target.closest("a, button")&&this.closeOnSelect&&this.close()};handleTriggerClick=t=>{t.stopPropagation(),this.opened||openDropdowns.forEach(t=>{t!==this&&t.close()}),this.toggle()};handleMenuClick=t=>{const e=t.target.closest("a, button");if(e&&!e.hasAttribute("disabled")){const t=e.dataset?.value||e.textContent.trim();this.dispatchEvent(new CustomEvent("select",{detail:{value:t,item:e},bubbles:!0}))}};handleKeydown=t=>{if(this.opened)if("Escape"===t.key)t.preventDefault(),this.close(),this.focusTrigger();else if("ArrowDown"===t.key)t.preventDefault(),this.focusNextItem();else if("ArrowUp"===t.key)t.preventDefault(),this.focusPreviousItem();else if("Enter"===t.key||" "===t.key){const e=this.querySelector("a:focus, button:focus");e&&(t.preventDefault(),e.click())}};open(){return openDropdowns.forEach(t=>{t!==this&&t.close()}),this.opened=!0,requestAnimationFrame(()=>this.focusFirstItem()),this}close(){return this.opened=!1,this}toggle(){return this.opened?this.close():this.open()}focusTrigger(){const t=this.querySelector('[slot="trigger"]');t&&t.focus()}getMenuItems(){return[...this.querySelectorAll("a, button")].filter(t=>!t.hasAttribute("disabled")&&!t.closest('[slot="trigger"]'))}focusFirstItem(){const t=this.getMenuItems();t.length>0&&t[0].focus()}focusNextItem(){const t=this.getMenuItems(),e=document.activeElement,o=t.indexOf(e),n=t[o+1]||t[0];n&&n.focus()}focusPreviousItem(){const t=this.getMenuItems(),e=document.activeElement,o=t.indexOf(e),n=t[o-1]||t[t.length-1];n&&n.focus()}static styles=css`
 		:host {
 			display: inline-block;
 			position: relative;
@@ -15,8 +15,10 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 			min-width: anchor-size(width);
 			background: var(--c_bg);
 			border: 1px solid var(--c_border);
+			border-radius: var(--radius);
 			box-shadow: var(--drop_shadow);
 			margin: 0.25rem;
+			overflow: hidden;
 		}
 		:host([opened]) #menu {
 			display: block;

package/docs/src/components/Tree.js

@@ -6,7 +6,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			<div class="tree-root">
 				${e?e.map(([e,t])=>Tree.renderValue(t,e,1,this.depth)):Tree.renderValue(this.data,null,0,this.depth)}
 			</div>
-		`}static nodes=[];static addNode=(...e)=>{[...e].reverse().forEach(e=>{Object.prototype.hasOwnProperty.call(e,"nodeTag")||(e.nodeTag="k-tree-node-"+nodeTagCounter++,window.customElements.define(e.nodeTag,e)),Tree.nodes.unshift(e)})};static renderValue(e,t=null,s=0,r=0){const n=Tree.nodes.find(t=>t.detect(e))??TreeNode,a=document.createElement(n.nodeTag);return a.value=e,a.key=t,a.depth=s,a.maxDepth=r,a}}window.customElements.define("k-tree",Tree);export class TreeNode extends ShadowComponent{static nodeTag="k-tree-node";static properties={value:{type:Object},key:{attribute:!1},depth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:boolExists,reflect:!0},icon:{type:String}};constructor(){super(),this.value=null,this.key=null,this.depth=0,this.maxDepth=0,this.opened=!1,this.icon=null}connectedCallback(){super.connectedCallback(),this.depth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};renderLabel(){return"object"==typeof this.value&&null!==this.value?html`${Array.isArray(this.value)?"Array":"Object"}`:html`${this.value}`}getChildren(){return"object"!=typeof this.value||null===this.value?null:Array.isArray(this.value)?this.value.map((e,t)=>[t,e]):Object.entries(this.value)}renderIcon(){return this.icon?html`<k-icon name="${this.icon}"></k-icon>`:html`<k-icon name="chevron" class="toggle-icon" direction="${this.opened?"down":"right"}"></k-icon>`}render(){const e=this.getChildren(),t=null!==this.key?html`<span class="${"number"==typeof this.key?"tc-muted":""}">${this.key}: </span>`:"";return e?html`
+		`}static nodes=[];static addNode=(...e)=>{[...e].reverse().forEach(e=>{Object.prototype.hasOwnProperty.call(e,"nodeTag")||(e.nodeTag="k-tree-node-"+nodeTagCounter++,window.customElements.define(e.nodeTag,e)),Tree.nodes.unshift(e)})};static renderValue(e,t=null,s=0,n=0){const r=Tree.nodes.find(t=>t.detect(e));if(r){const s=new r(e),n=null!==t?html`<span class="${"number"==typeof t?"tc-muted":""}">${t}: </span>`:"";return html`<span class="d-b">${n}${s.renderLabel()}</span>`}const a=document.createElement(TreeNode.nodeTag);return a.value=e,a.key=t,a.depth=s,a.maxDepth=n,a}}window.customElements.define("k-tree",Tree);export class TreeNode extends ShadowComponent{static nodeTag="k-tree-node";static properties={value:{type:Object},key:{attribute:!1},depth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:boolExists,reflect:!0},icon:{type:String}};constructor(e){super(),this.value=void 0!==e?e:null,this.key=null,this.depth=0,this.maxDepth=0,this.opened=!1,this.icon=null}connectedCallback(){super.connectedCallback(),this.depth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};renderLabel(){return"object"==typeof this.value&&null!==this.value?html`${Array.isArray(this.value)?"Array":"Object"}`:html`${this.value}`}getChildren(){return"object"!=typeof this.value||null===this.value?null:Array.isArray(this.value)?this.value.map((e,t)=>[t,e]):Object.entries(this.value)}renderIcon(){return this.icon?html`<k-icon name="${this.icon}"></k-icon>`:html`<k-icon name="chevron" class="toggle-icon" direction="${this.opened?"down":"right"}"></k-icon>`}render(){const e=this.getChildren(),t=null!==this.key?html`<span class="${"number"==typeof this.key?"tc-muted":""}">${this.key}: </span>`:"";return e?html`
 			<div>
 				<button class="branch-label no-btn" @click=${this.toggle} aria-expanded="${this.opened}">
 					${this.renderIcon()}

package/docs/src/utils/formatTimestamp.js

@@ -1 +1 @@
-export default(e,i,t)=>{const s=new Date(parseInt(e));if(i){const e=(e,i)=>("000"+e).slice(-1*i),t={YYYY:s.getFullYear(),YY:String(s.getFullYear()).slice(-2),MM:e(s.getMonth()+1,2),M:s.getMonth()+1,DD:e(s.getDate(),2),D:s.getDate(),hh:e(s.getHours(),2),h:s.getHours(),mm:e(s.getMinutes(),2),m:s.getMinutes(),ss:e(s.getSeconds(),2),s:s.getSeconds(),iiii:e(s.getMilliseconds(),3),iii:e(s.getMilliseconds(),3),ii:e(s.getMilliseconds(),2),i:s.getMilliseconds()};return i.replace(/YYYY|YY|MM|M|DD|D|hh|h|mm|m|ss|s|iiii|iii|ii|i/g,e=>t[e])}return s.toLocaleString(t||navigator.language)};
+export default(e,i,t)=>{const s=new Date(parseInt(e));if(i){const e=(e,i)=>("000"+e).slice(-1*i),t={YYYY:s.getFullYear(),YY:String(s.getFullYear()).slice(-2),MM:e(s.getMonth()+1,2),M:s.getMonth()+1,DD:e(s.getDate(),2),D:s.getDate(),hh:e(s.getHours(),2),h:s.getHours(),mm:e(s.getMinutes(),2),m:s.getMinutes(),ss:e(s.getSeconds(),2),s:s.getSeconds(),iiii:e(s.getMilliseconds(),3),iii:e(s.getMilliseconds(),3),ii:e(s.getMilliseconds(),2),i:s.getMilliseconds()};return i.replace(/YYYY|YY|MM|M|DD|D|hh|h|mm|m|ss|s|iiii|iii|ii|i/g,e=>t[e])}return s.toLocaleString(t||Intl.DateTimeFormat().resolvedOptions().locale)};

package/package.json

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

package/src/components/Dropdown.js

@@ -13,8 +13,6 @@ export default class Dropdown extends ShadowComponent {
 		closeOnClickOutside: { type: Boolean, reflect: true, attribute: 'close-on-click-outside', converter: boolTrueFalse }
 	};
 
-	anchorId = `dropdown-anchor-${Math.random().toString(36).slice(2, 11)}`;
-
 	constructor() {
 		super();
 		this.opened = false;
@@ -182,35 +180,6 @@ export default class Dropdown extends ShadowComponent {
 		if(prev) prev.focus();
 	}
 
-	getPositionArea() {
-		const dir = this.openDirection.toLowerCase().trim();
-		const parts = dir.split(/\s+/);
-		// Map friendly names to position-area values
-		const mapping = {
-			'down': 'bottom',
-			'up': 'top',
-			'left': 'left',
-			'right': 'right',
-			'center': 'center'
-		};
-		const mapped = parts.map(p => mapping[p] || p);
-		// position-area expects: row column (e.g., "bottom left")
-		// "down left" -> "bottom left", "up right" -> "top right"
-		return mapped.join(' ');
-	}
-
-	getFallbacks() {
-		const primary = this.getPositionArea();
-		const parts = primary.split(' ');
-		// Generate sensible fallbacks
-		const fallbacks = [];
-		// flip-block flips vertical, flip-inline flips horizontal
-		fallbacks.push('flip-block');
-		fallbacks.push('flip-inline');
-		fallbacks.push('flip-block flip-inline');
-		return fallbacks.join(', ');
-	}
-
 	/*
 		Styles
 	*/
@@ -231,8 +200,10 @@ export default class Dropdown extends ShadowComponent {
 			min-width: anchor-size(width);
 			background: var(--c_bg);
 			border: 1px solid var(--c_border);
+			border-radius: var(--radius);
 			box-shadow: var(--drop_shadow);
 			margin: 0.25rem;
+			overflow: hidden;
 		}
 		:host([opened]) #menu {
 			display: block;

package/src/components/Tree.js

@@ -59,8 +59,15 @@ export default class Tree extends ShadowComponent {
 
 	/* Static Methods */
 	static renderValue(value, key = null, depth = 0, maxDepth = 0){
-		const NodeClass = Tree.nodes.find(n => n.detect(value)) ?? TreeNode;
-		const el = document.createElement(NodeClass.nodeTag);
+		const LeafClass = Tree.nodes.find(n => n.detect(value));
+		if(LeafClass){
+			const instance = new LeafClass(value);
+			const keyLabel = key !== null
+				? html`<span class="${typeof key === 'number' ? 'tc-muted' : ''}">${key}: </span>`
+				: '';
+			return html`<span class="d-b">${keyLabel}${instance.renderLabel()}</span>`;
+		}
+		const el = document.createElement(TreeNode.nodeTag);
 		el.value = value;
 		el.key = key;
 		el.depth = depth;
@@ -84,9 +91,9 @@ export class TreeNode extends ShadowComponent {
 		icon: { type: String }
 	};
 
-	constructor(){
+	constructor(value){
 		super();
-		this.value = null;
+		this.value = value !== undefined ? value : null;
 		this.key = null;
 		this.depth = 0;
 		this.maxDepth = 0;

package/src/utils/formatTimestamp.js

@@ -22,6 +22,6 @@ export default (timestamp, format, forceLocale) => {
     };
     return format.replace(/YYYY|YY|MM|M|DD|D|hh|h|mm|m|ss|s|iiii|iii|ii|i/g, (matched) => tokens[matched]);
   } else {
-    return date.toLocaleString(forceLocale || navigator.language);
+    return date.toLocaleString(forceLocale || Intl.DateTimeFormat().resolvedOptions().locale);
   }
 }

package/tests/components/Dropdown.browser-test.js

@@ -537,6 +537,28 @@ export default {
 		pass('All open-direction values accepted');
 	},
 
+	/*
+		Styles
+	*/
+	'menu should have border-radius using --radius': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		const menu = dropdown.shadowRoot.querySelector('#menu');
+		if(!menu) {
+			cleanup(container);
+			return fail('Menu element should exist');
+		}
+		document.documentElement.style.setProperty('--radius', '8px');
+		const styles = window.getComputedStyle(menu);
+		const borderRadius = styles.borderRadius;
+		document.documentElement.style.removeProperty('--radius');
+		if(borderRadius !== '8px') {
+			cleanup(container);
+			return fail(`Expected menu border-radius to use --radius (8px), got ${borderRadius}`);
+		}
+		cleanup(container);
+		pass('Menu has border-radius applied using --radius');
+	},
+
 	/*
 		Disabled Items
 	*/