kempo-ui 0.0.40 → 0.0.42

package/docs/src/components/Dropdown.js

@@ -0,0 +1,123 @@
+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`
+		:host {
+			display: inline-block;
+			position: relative;
+		}
+		#trigger {
+			cursor: pointer;
+			anchor-name: --dropdown-trigger;
+		}
+		#menu {
+			display: none;
+			position: fixed;
+			position-anchor: --dropdown-trigger;
+			z-index: 1000;
+			min-width: anchor-size(width);
+			background: var(--c_bg);
+			border: 1px solid var(--c_border);
+			box-shadow: var(--drop_shadow);
+			margin: 0.25rem;
+		}
+		:host([opened]) #menu {
+			display: block;
+		}
+		/* Default: down left */
+		#menu {
+			position-area: bottom span-right;
+			position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+		}
+		/* down right */
+		:host([open-direction="down right"]) #menu {
+			position-area: bottom span-left;
+		}
+		/* down center */
+		:host([open-direction="down center"]) #menu,
+		:host([open-direction="down"]) #menu {
+			position-area: bottom center;
+		}
+		/* up left */
+		:host([open-direction="up left"]) #menu {
+			position-area: top span-right;
+		}
+		/* up right */
+		:host([open-direction="up right"]) #menu {
+			position-area: top span-left;
+		}
+		/* up center */
+		:host([open-direction="up center"]) #menu,
+		:host([open-direction="up"]) #menu {
+			position-area: top center;
+		}
+		/* left up */
+		:host([open-direction="left up"]) #menu {
+			position-area: left span-top;
+		}
+		/* left down */
+		:host([open-direction="left down"]) #menu {
+			position-area: left span-bottom;
+		}
+		/* left center */
+		:host([open-direction="left center"]) #menu,
+		:host([open-direction="left"]) #menu {
+			position-area: left center;
+		}
+		/* right up */
+		:host([open-direction="right up"]) #menu {
+			position-area: right span-top;
+		}
+		/* right down */
+		:host([open-direction="right down"]) #menu {
+			position-area: right span-bottom;
+		}
+		/* right center */
+		:host([open-direction="right center"]) #menu,
+		:host([open-direction="right"]) #menu {
+			position-area: right center;
+		}
+		/* Slotted menu item styles (not trigger) */
+		::slotted(a:not([slot="trigger"])),
+		::slotted(button:not([slot="trigger"])) {
+			all: unset !important;
+			display: block !important;
+			box-sizing: border-box !important;
+			width: 100% !important;
+			padding: var(--spacer_h) var(--spacer) !important;
+			color: var(--tc) !important;
+			background: transparent !important;
+			border: none !important;
+			border-top: 1px solid var(--c_border) !important;
+			border-radius: 0 !important;
+			font: inherit !important;
+			text-align: left !important;
+			cursor: pointer !important;
+			white-space: nowrap !important;
+			transition: background var(--animation_ms) !important;
+		}
+		::slotted(a.k-dropdown-first),
+		::slotted(button.k-dropdown-first) {
+			border-top: none !important;
+		}
+		::slotted(a:not([slot="trigger"]):hover),
+		::slotted(a:not([slot="trigger"]):focus-visible),
+		::slotted(button:not([slot="trigger"]):hover),
+		::slotted(button:not([slot="trigger"]):focus-visible) {
+			background: var(--c_bg__alt) !important;
+			outline: none !important;
+		}
+		::slotted(a:not([slot="trigger"])[disabled]),
+		::slotted(button:not([slot="trigger"])[disabled]) {
+			opacity: 0.5 !important;
+			cursor: not-allowed !important;
+			pointer-events: none !important;
+		}
+		::slotted(hr) {
+			display: none !important;
+		}
+	`;handleSlotChange=t=>{t.target.assignedElements().filter(t=>t.matches("a, button")).forEach((t,e)=>t.classList.toggle("k-dropdown-first",0===e))};render(){return html`
+			<div id="trigger" @click=${this.handleTriggerClick}>
+				<slot name="trigger"></slot>
+			</div>
+			<div id="menu" role="menu" @click=${this.handleMenuClick}>
+				<slot @slotchange=${this.handleSlotChange}></slot>
+			</div>
+		`}}customElements.define("k-dropdown",Dropdown);

package/docs/src/components/Icon.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}from"../lit-all.min.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise(async(e,n)=>{const o=(new AbortController).signal;try{const n=await fetch(t,{signal:o});200===n.status?e(await n.text()):404===n.status&&e(null)}catch(t){"AbortError"!==t.name&&n(t)}}).catch(()=>null)),await cache[t]),getIconByName=t=>{const e=async e=>getIconByPath(`${e}/${t}.svg`);return new Promise(async(t,n)=>{let o;const s=window.kempo?.pathsToIcons||["/icons"];for(let t=0;t<s.length&&!o;t++)try{o=await e(s[t])}catch(t){}t(o||null)})};export default class Icon extends ShadowComponent{static properties={src:{type:String,reflect:!0},name:{type:String,reflect:!0},iconContent:{type:String}};constructor(t=""){super(),this.src="",this.name=t,this.iconContent=""}updated(t){super.updated(),(t.has("src")||t.has("name"))&&this.loadIcon()}async loadIcon(){let t;if(this.src?t=await getIconByPath(this.src):this.name&&(t=await getIconByName(this.name)),t)this.iconContent=this.fixSVG(t);else{const t=this.innerHTML.trim();this.iconContent=t?this.fixSVG(t):window.kempo?.fallbackIcon||'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>'}}fixSVG(t){if(!t)return t;const e=(new DOMParser).parseFromString(t,"image/svg+xml").querySelector("svg");return e?(e.removeAttribute("width"),e.removeAttribute("height"),e.querySelectorAll("path, rect, circle").forEach(t=>{t.setAttribute("fill","currentColor")}),(new XMLSerializer).serializeToString(e)):t}static styles=css`
+import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}from"../lit-all.min.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise(async(e,n)=>{const s=(new AbortController).signal;try{const n=await fetch(t,{signal:s});200===n.status?e(await n.text()):404===n.status&&e(null)}catch(t){"AbortError"!==t.name&&n(t)}}).catch(()=>null)),await cache[t]),getIconByName=t=>{const e=async e=>{const n=e.endsWith("/")?e.slice(0,-1):e;return getIconByPath(`${n}/${t}.svg`)};return new Promise(async(t,n)=>{let s;const o=window.kempo?.pathsToIcons||["/icons","../../icons","https://cdn.jsdelivr.net/npm/kempo-ui@0.0.32/icons/"];for(let t=0;t<o.length&&!s;t++)try{s=await e(o[t])}catch(t){}t(s||null)})};export default class Icon extends ShadowComponent{static properties={src:{type:String,reflect:!0},name:{type:String,reflect:!0},iconContent:{type:String}};constructor(t=""){super(),this.src="",this.name=t,this.iconContent=""}updated(t){super.updated(),(t.has("src")||t.has("name"))&&this.loadIcon()}async loadIcon(){let t;if(this.src?t=await getIconByPath(this.src):this.name&&(t=await getIconByName(this.name)),t)this.iconContent=this.fixSVG(t);else{const t=this.innerHTML.trim();this.iconContent=t?this.fixSVG(t):window.kempo?.fallbackIcon||'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>'}}fixSVG(t){if(!t)return t;const e=(new DOMParser).parseFromString(t,"image/svg+xml").querySelector("svg");return e?(e.removeAttribute("width"),e.removeAttribute("height"),e.querySelectorAll("path, rect, circle").forEach(t=>{t.setAttribute("fill","currentColor")}),(new XMLSerializer).serializeToString(e)):t}static styles=css`
 		:host {
 			display: inline-block;
 			vertical-align: bottom;

package/docs/src/components/ShadowComponent.js

@@ -1 +1 @@
-import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{#e;connectedCallback(){super.connectedCallback(),this.#e=new MutationObserver(()=>{console.log("MutationObserver fired for",this.constructor.name),this.childrenUpdated(),this.requestUpdate()}),this.#e.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this.#e?.disconnect()}childrenUpdated(){}createRenderRoot(){const e=this.attachShadow({mode:"open"}),t=document.createElement("link");t.rel="stylesheet",t.href=window.kempo?.pathToStylesheet||"https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css",e.appendChild(t);const n=this.constructor.styles;if(n){const t=document.createElement("style");Array.isArray(n)?t.textContent=n.map(e=>e.cssText||e).join("\n"):t.textContent=n.cssText||n,e.appendChild(t)}const s=document.createElement("div");return s.style.display="contents",e.appendChild(s),s}}
+import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{#e;connectedCallback(){super.connectedCallback(),this.#e=new MutationObserver(()=>{console.log("MutationObserver fired for",this.constructor.name),this.childrenUpdated(),this.requestUpdate()}),this.#e.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this.#e?.disconnect()}childrenUpdated(){}createRenderRoot(){const e=this.attachShadow({mode:"open"}),t=document.createElement("link");t.rel="stylesheet",t.href=window.kempo?.pathToStylesheet||"https://cdn.jsdelivr.net/npm/kempo-css@1.3.2/dist/kempo.min.css",e.appendChild(t);const n=this.constructor.styles;if(n){const t=document.createElement("style");Array.isArray(n)?t.textContent=n.map(e=>e.cssText||e).join("\n"):t.textContent=n.cssText||n,e.appendChild(t)}const s=document.createElement("div");return s.style.display="contents",e.appendChild(s),s}}

package/docs/src/components/Spinner.js

@@ -0,0 +1,113 @@
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Spinner extends ShadowComponent{static properties={size:{type:String,reflect:!0},variant:{type:String,reflect:!0}};constructor(){super(),this.size="md",this.variant="spinner"}static styles=css`
+		:host {
+			--spinner-size: 2rem;
+			--spinner-border-width: 3px;
+			--spinner-color: var(--c_primary);
+			--spinner-track-color: var(--c_border);
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+		}
+		/* Sizes */
+		:host([size="xs"]) {
+			--spinner-size: 1rem;
+			--spinner-border-width: 2px;
+		}
+		:host([size="sm"]) {
+			--spinner-size: 1.5rem;
+			--spinner-border-width: 2px;
+		}
+		:host([size="md"]) {
+			--spinner-size: 2rem;
+			--spinner-border-width: 3px;
+		}
+		:host([size="lg"]) {
+			--spinner-size: 3rem;
+			--spinner-border-width: 4px;
+		}
+		:host([size="xl"]) {
+			--spinner-size: 4rem;
+			--spinner-border-width: 5px;
+		}
+		/* Spinner variant */
+		.spinner {
+			width: var(--spinner-size);
+			height: var(--spinner-size);
+			border: var(--spinner-border-width) solid var(--spinner-track-color);
+			border-top-color: var(--spinner-color);
+			border-radius: 50%;
+			animation: spin 0.8s linear infinite;
+		}
+		@keyframes spin {
+			to { transform: rotate(360deg); }
+		}
+		/* Dots variant */
+		.dots {
+			display: flex;
+			gap: calc(var(--spinner-size) * 0.2);
+		}
+		.dots span {
+			width: calc(var(--spinner-size) * 0.3);
+			height: calc(var(--spinner-size) * 0.3);
+			background: var(--spinner-color);
+			border-radius: 50%;
+			animation: bounce 1.4s ease-in-out infinite both;
+		}
+		.dots span:nth-child(1) { animation-delay: -0.32s; }
+		.dots span:nth-child(2) { animation-delay: -0.16s; }
+		.dots span:nth-child(3) { animation-delay: 0s; }
+		@keyframes bounce {
+			0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
+			40% { transform: scale(1); opacity: 1; }
+		}
+		/* Bars variant */
+		.bars {
+			display: flex;
+			align-items: center;
+			gap: calc(var(--spinner-size) * 0.1);
+			height: var(--spinner-size);
+		}
+		.bars span {
+			width: calc(var(--spinner-size) * 0.15);
+			height: 60%;
+			background: var(--spinner-color);
+			border-radius: calc(var(--spinner-size) * 0.05);
+			animation: bars 1.2s ease-in-out infinite;
+		}
+		.bars span:nth-child(1) { animation-delay: -0.24s; }
+		.bars span:nth-child(2) { animation-delay: -0.12s; }
+		.bars span:nth-child(3) { animation-delay: 0s; }
+		.bars span:nth-child(4) { animation-delay: 0.12s; }
+		@keyframes bars {
+			0%, 40%, 100% { height: 40%; }
+			20% { height: 100%; }
+		}
+		/* Pulse variant */
+		.pulse {
+			width: var(--spinner-size);
+			height: var(--spinner-size);
+			background: var(--spinner-color);
+			border-radius: 50%;
+			animation: pulse 1.5s ease-in-out infinite;
+		}
+		@keyframes pulse {
+			0% { transform: scale(0.8); opacity: 0.5; }
+			50% { transform: scale(1); opacity: 1; }
+			100% { transform: scale(0.8); opacity: 0.5; }
+		}
+		/* Ring variant */
+		.ring {
+			width: var(--spinner-size);
+			height: var(--spinner-size);
+			border: var(--spinner-border-width) solid var(--spinner-color);
+			border-radius: 50%;
+			animation: ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+		}
+		@keyframes ring {
+			0% { transform: rotate(0deg); border-color: var(--spinner-color) transparent transparent transparent; }
+			25% { border-color: transparent var(--spinner-color) transparent transparent; }
+			50% { border-color: transparent transparent var(--spinner-color) transparent; }
+			75% { border-color: transparent transparent transparent var(--spinner-color); }
+			100% { transform: rotate(360deg); border-color: var(--spinner-color) transparent transparent transparent; }
+		}
+	`;render(){switch(this.variant){case"dots":return html`<div class="dots"><span></span><span></span><span></span></div>`;case"bars":return html`<div class="bars"><span></span><span></span><span></span><span></span></div>`;case"pulse":return html`<div class="pulse"></div>`;case"ring":return html`<div class="ring"></div>`;default:return html`<div class="spinner"></div>`}}}customElements.define("k-spinner",Spinner);

package/docs/utils/context.html

@@ -11,7 +11,6 @@
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script src="../init-1.js" type="module"></script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>

package/docs/utils/debounce.html

@@ -11,7 +11,6 @@
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script src="../init-1.js" type="module"></script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>

package/docs/utils/drag.html

@@ -11,7 +11,6 @@
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script src="../init-1.js" type="module"></script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>

package/docs/utils/formatTimestamp.html

@@ -11,7 +11,6 @@
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script src="../init-1.js" type="module"></script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>

package/docs/utils/object.html

@@ -11,7 +11,6 @@
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script src="../init-1.js" type="module"></script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>

package/docs/utils/propConverters.html

@@ -11,7 +11,6 @@
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script src="../init-1.js" type="module"></script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>

package/docs/utils/string.html

@@ -11,7 +11,6 @@
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script src="../init-1.js" type="module"></script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>

package/docs/utils/theme.html

@@ -11,7 +11,6 @@
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script src="../init-1.js" type="module"></script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>

package/docs/utils/toTitleCase.html

@@ -11,7 +11,6 @@
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script src="../init-1.js" type="module"></script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>

package/docs/utils/type.html

@@ -11,7 +11,6 @@
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script src="../init-1.js" type="module"></script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>

package/docs/utils/wait.html

@@ -11,7 +11,6 @@
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
-  <script src="../init-1.js" type="module"></script>
 </head>
 <body>
   <k-import src="../nav-1.inc.html"></k-import>

package/package.json

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