kempo-ui 0.1.5 → 0.2.1

package/dist/components/Toast.js

@@ -138,4 +138,4 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
       <button id="close" class="no-style" @click="${this.handleCloseClick}">
         <slot name="close"></slot>
       </button>
-    `}static create(t,o={}){let{position:e="auto",removeOnClose:n=!0,closeCallback:s=()=>{},action:a=!1,close:i=!1,icon:r=!1,timeout:c=5e3}=o;"auto"===e&&(e=window.innerWidth<=768?"bottom center":"top right");let l=document.querySelector(`k-toast-container[position="${e}"]`);l||(l=new ToastContainer(e),document.body.appendChild(l));const m=new Toast;m.position=e,m.timeout=c,m.innerHTML=t,m.actionCallback=o.actionCallback||(()=>{});const h=s;if(m.closeCallback=(...t)=>{n&&(m.remove(),0===l.children.length&&l.remove()),h(...t)},r){const t=document.createElement("span");t.slot="icon",r instanceof HTMLElement?t.appendChild(r):t.innerHTML=r,m.appendChild(t)}if(a){const t=document.createElement("span");t.slot="action",a instanceof HTMLElement?t.appendChild(a):t.innerHTML=a,m.appendChild(t)}if(i){const t=document.createElement("span");t.slot="close",i instanceof HTMLElement?t.appendChild(i):t.innerHTML=i,m.appendChild(t)}return l.appendChild(m),m.open(),m}static success(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="check"></k-icon>',...o});return e.classList.add("bg-success"),e}static warning(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="warning"></k-icon>',...o});return e.classList.add("bg-warning"),e}static error(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="error"></k-icon>',...o});return e.classList.add("bg-danger"),e}}class ToastContainer extends HTMLElement{constructor(t="bottom center"){super(),this.position=t.toLowerCase(),this.setAttribute("position",this.position),this.applyStyles()}applyStyles(){this.style.cssText="\n      position: fixed;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      z-index: 1000;\n      pointer-events: auto;\n      padding: 32px;\n      box-sizing: border-box;\n      max-width: 100%;\n      max-height: 100%;\n      overflow: visible;\n    ";new MutationObserver(()=>{Array.from(this.children).forEach(t=>{"K-TOAST"===t.tagName&&(t.style.filter="drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05))")})}).observe(this,{childList:!0}),Array.from(this.children).forEach(t=>{"K-TOAST"===t.tagName&&(t.style.filter="drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05))")});const[t,o]=this.position.split(" ");"top"===t?this.style.top="0":this.style.bottom="0","left"===o?(this.style.left="0",this.style.alignItems="flex-start"):"right"===o?(this.style.right="0",this.style.alignItems="flex-end"):"center"===o&&("top"===t||"bottom"===t?(this.style.left="50%",this.style.transform="translateX(-50%)",this.style.alignItems="center"):(this.style.top="50%",this.style.left="50%",this.style.transform="translate(-50%, -50%)"))}static getContainer(t){let o=document.querySelector(`k-toast-container[position="${t}"]`);return o||(o=new ToastContainer(t),document.body.appendChild(o)),o}}window.customElements.define("k-toast",Toast),window.customElements.define("k-toast-container",ToastContainer);
+    `}static create(t,o={}){let{position:e="auto",removeOnClose:n=!0,closeCallback:s=()=>{},action:a=!1,close:i=!1,icon:r=!1,timeout:c=5e3}=o;"auto"===e&&(e=window.innerWidth<=768?"bottom center":"top right");let l=document.querySelector(`k-toast-container[position="${e}"]`);l||(l=new ToastContainer(e),document.body.appendChild(l));const m=new Toast;m.position=e,m.timeout=c,m.innerHTML=t,m.actionCallback=o.actionCallback||(()=>{});const h=s;if(m.closeCallback=(...t)=>{n&&(m.remove(),0===l.children.length&&l.remove()),h(...t)},r){const t=document.createElement("span");t.slot="icon",r instanceof HTMLElement?t.appendChild(r):t.innerHTML=r,m.appendChild(t)}if(a){const t=document.createElement("span");t.slot="action",a instanceof HTMLElement?t.appendChild(a):t.innerHTML=a,m.appendChild(t)}if(i){const t=document.createElement("span");t.slot="close",i instanceof HTMLElement?t.appendChild(i):t.innerHTML=i,m.appendChild(t)}return l.appendChild(m),m.open(),m}static success(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="check"></k-icon>',...o});return e.classList.add("bg-success"),e}static warning(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="warning"></k-icon>',...o});return e.classList.add("bg-warning"),e}static error(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="error"></k-icon>',...o});return e.classList.add("bg-danger"),e}}class ToastContainer extends HTMLElement{constructor(t="bottom center"){super(),this.position=t.toLowerCase(),this.setAttribute("position",this.position),this.applyStyles()}applyStyles(){this.style.cssText="\n      position: fixed;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      z-index: 90;\n      pointer-events: auto;\n      padding: 32px;\n      box-sizing: border-box;\n      max-width: 100%;\n      max-height: 100%;\n      overflow: visible;\n    ";new MutationObserver(()=>{Array.from(this.children).forEach(t=>{"K-TOAST"===t.tagName&&(t.style.filter="drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05))")})}).observe(this,{childList:!0}),Array.from(this.children).forEach(t=>{"K-TOAST"===t.tagName&&(t.style.filter="drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05))")});const[t,o]=this.position.split(" ");"top"===t?this.style.top="0":this.style.bottom="0","left"===o?(this.style.left="0",this.style.alignItems="flex-start"):"right"===o?(this.style.right="0",this.style.alignItems="flex-end"):"center"===o&&("top"===t||"bottom"===t?(this.style.left="50%",this.style.transform="translateX(-50%)",this.style.alignItems="center"):(this.style.top="50%",this.style.left="50%",this.style.transform="translate(-50%, -50%)"))}static getContainer(t){let o=document.querySelector(`k-toast-container[position="${t}"]`);return o||(o=new ToastContainer(t),document.body.appendChild(o)),o}}window.customElements.define("k-toast",Toast),window.customElements.define("k-toast-container",ToastContainer);

package/docs/components/accordion.html

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.11/dist/kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>
@@ -15,7 +15,7 @@
 <body>
   <k-import src="../nav-1.inc.html"></k-import>
   <h1 class="ta-center">Accordion</h1>
-  <main>
+  <k-main>
     <k-accordion persistent-id="toc" class="b r mb">
       <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
       <k-accordion-panel name="toc-panel">
@@ -209,9 +209,10 @@
       <p>Fired when a panel is toggled. The event detail contains <code>{ panelName }</code>.</p>
     </k-card>
 
-  </main>
+  </k-main>
   <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
   <script type="module" src="../src/components/Card.js"></script>
   <script type="module" src="../src/components/Resize.js"></script>

package/docs/components/aside-items.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Aside Items Example</title>
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
+  <script>window.litDisableBundleWarning = true;</script>
+  <script type="module">
+    import theme from '../src/utils/theme.js';
+    theme.init();
+  </script>
+  <script type="module" src="../src/components/Aside.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      height: 100vh;
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body>
+  <k-aside main="push" state="expanded" style="--aside_padding: 0;">
+    <k-aside-toggle><h5 class="m0">Kempo</h5></k-aside-toggle>
+    <k-aside-item icon="cards" href="#" active>Dashboard</k-aside-item>
+    <k-aside-item icon="check" href="#">Tasks</k-aside-item>
+    <k-aside-item icon="label" href="#">Email</k-aside-item>
+    <k-aside-label>Projects</k-aside-label>
+    <k-aside-item icon="folder" href="#">Figma Design</k-aside-item>
+    <k-aside-item icon="folder" href="#">Static Mania</k-aside-item>
+    <k-aside-spacer></k-aside-spacer>
+    <k-aside-item icon="settings" href="#">Settings</k-aside-item>
+    <k-aside-item icon="account-circle" href="#">Profile</k-aside-item>
+  </k-aside>
+  <k-main>
+    <h2>Main Content</h2>
+    <p>Click the aside's collapse/expand to see items react.</p>
+  </k-main>
+</body>
+</html>

package/docs/components/aside-menu.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Aside Menu Example</title>
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
+  <script>window.litDisableBundleWarning = true;</script>
+  <script type="module">
+    import theme from '../src/utils/theme.js';
+    theme.init();
+  </script>
+  <script type="module" src="../src/components/Aside.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      height: 100vh;
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body>
+  <k-aside main="push" state="expanded" style="--aside_padding: 0;">
+    <k-aside-toggle><h5 class="m0">Kempo</h5></k-aside-toggle>
+    <k-aside-item icon="cards" href="#">Dashboard</k-aside-item>
+    <k-aside-menu icon="folder" label="Projects">
+      <k-aside-item href="#">Website Redesign</k-aside-item>
+      <k-aside-item href="#">Mobile App</k-aside-item>
+    </k-aside-menu>
+    <k-aside-menu icon="settings" label="Settings">
+      <k-aside-item href="#">General</k-aside-item>
+      <k-aside-item href="#">Security</k-aside-item>
+    </k-aside-menu>
+  </k-aside>
+  <k-main>
+    <h2>Main Content</h2>
+    <p>Click menu headers to expand sub-items. Collapse the aside to see menus fold.</p>
+  </k-main>
+</body>
+</html>

package/docs/components/aside-push.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" />
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <script>window.litDisableBundleWarning = true;</script>
+</head>
+<body>
+  <k-aside id="aside4" state="offscreen">
+    <p>Push Sidebar Content</p>
+  </k-aside>
+  <k-main>
+    <button id="toggle4">Toggle Sidebar</button>
+    <p>This content shifts when the aside is visible.</p>
+  </k-main>
+  <script>
+    document.getElementById('toggle4').addEventListener('click',()=>{
+      document.getElementById('aside4').toggle();
+    });
+  </script>
+  <script type="module" src="../src/components/Aside.js"></script>
+  <script type="module" src="../src/components/Main.js"></script>
+</body>
+</html>