kempo-ui 0.0.26 → 0.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/README.md +18 -1
  2. package/dist/components/Dialog.js +2 -2
  3. package/dist/components/Icon.js +1 -1
  4. package/dist/components/ShadowComponent.js +1 -1
  5. package/dist/components/SideMenu.js +1 -1
  6. package/docs/components/accordion.html +4 -0
  7. package/docs/components/card.html +2 -0
  8. package/docs/components/content-slider.html +2 -0
  9. package/docs/components/dialog.html +20 -1
  10. package/docs/components/focus-capture.html +2 -0
  11. package/docs/components/hybrid-component.html +2 -0
  12. package/docs/components/icon.html +2 -0
  13. package/docs/components/import.html +2 -0
  14. package/docs/components/light-component.html +2 -0
  15. package/docs/components/photo-viewer.html +2 -0
  16. package/docs/components/resize.html +2 -0
  17. package/docs/components/shadow-component.html +8 -6
  18. package/docs/components/show-more.html +2 -0
  19. package/docs/components/side-menu.html +3 -0
  20. package/docs/components/sortable.html +2 -0
  21. package/docs/components/split.html +2 -0
  22. package/docs/components/table.html +2 -0
  23. package/docs/components/tableControls.html +2 -0
  24. package/docs/components/tableCustomFields.html +2 -0
  25. package/docs/components/tableFetchRecords.html +2 -0
  26. package/docs/components/tableFieldSortHide.html +2 -0
  27. package/docs/components/tablePagination.html +2 -0
  28. package/docs/components/tableRecordEditing.html +2 -0
  29. package/docs/components/tableRecordFiltering.html +2 -0
  30. package/docs/components/tableRecordHiding.html +2 -0
  31. package/docs/components/tableRecordSearching.html +2 -0
  32. package/docs/components/tableRecordSelection.html +2 -0
  33. package/docs/components/tableRowControls.html +2 -0
  34. package/docs/components/tableSorting.html +2 -0
  35. package/docs/components/tabs.html +2 -0
  36. package/docs/components/tags.html +2 -0
  37. package/docs/components/theme-switcher.html +2 -0
  38. package/docs/components/timestamp.html +2 -0
  39. package/docs/components/toast.html +3 -1
  40. package/docs/components/toggle.html +2 -0
  41. package/docs/components/tree.html +2 -0
  42. package/docs/index.html +33 -2
  43. package/docs/init-1.js +1 -1
  44. package/docs/init.js +2 -2
  45. package/docs/manifest.json +87 -0
  46. package/docs/media/hexagon.svg +22 -0
  47. package/docs/media/icon-maskable.png +0 -0
  48. package/docs/media/icon.svg +1 -0
  49. package/docs/media/icon128.png +0 -0
  50. package/docs/media/icon144.png +0 -0
  51. package/docs/media/icon152.png +0 -0
  52. package/docs/media/icon16-48.svg +19 -0
  53. package/docs/media/icon16.png +0 -0
  54. package/docs/media/icon192.png +0 -0
  55. package/docs/media/icon256.png +0 -0
  56. package/docs/media/icon32.png +0 -0
  57. package/docs/media/icon384.png +0 -0
  58. package/docs/media/icon48.png +0 -0
  59. package/docs/media/icon512.png +0 -0
  60. package/docs/media/icon64.png +0 -0
  61. package/docs/media/icon72.png +0 -0
  62. package/docs/media/icon96.png +0 -0
  63. package/docs/media/kempo-fist.svg +21 -0
  64. package/docs/nav-1.inc.html +12 -3
  65. package/docs/nav.inc.html +15 -5
  66. package/docs/src/components/Dialog.js +2 -2
  67. package/docs/src/components/Icon.js +1 -1
  68. package/docs/src/components/ShadowComponent.js +1 -1
  69. package/docs/src/components/SideMenu.js +1 -1
  70. package/docs/styles.css +5 -0
  71. package/docs/utils/debounce.html +2 -0
  72. package/docs/utils/drag.html +2 -0
  73. package/docs/utils/formatTimestamp.html +2 -0
  74. package/docs/utils/propConverters.html +2 -0
  75. package/docs/utils/toTitleCase.html +2 -0
  76. package/package.json +1 -1
  77. package/scripts/docs.js +12 -5
  78. package/src/components/Dialog.js +4 -1
  79. package/src/components/Icon.js +1 -1
  80. package/src/components/ShadowComponent.js +1 -1
  81. package/src/components/SideMenu.js +2 -0
package/README.md CHANGED
@@ -9,12 +9,29 @@ A modern, lightweight web component library built with Lit, providing accessible
9
9
  - **Customizable**: Easy theming and styling
10
10
  - **Lightweight**: Minimal bundle size with minimal dependecnies/
11
11
 
12
- ## Installation
12
+ ## Getting Started
13
13
 
14
14
  ```bash
15
15
  npm install kempo-ui
16
16
  ```
17
17
 
18
+ #### Set your configuration
19
+ ```html
20
+ <html>
21
+ <head>
22
+ <script>
23
+ window.kempo = {
24
+ pathToStylesheet: '/kempo.min.css',
25
+ pathToIcons: '/icons'
26
+ };
27
+ </script>
28
+ </head>
29
+ <body>
30
+ <!-- Content -->
31
+ </body>
32
+ </html>
33
+ ```
34
+
18
35
  ## Quick Start
19
36
 
20
37
  Import and use components in your HTML:
package/dist/components/Dialog.js CHANGED
@@ -1,4 +1,4 @@
1
- import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";import"./FocusCapture.js";const firstFocusable=e=>e.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')[0];export default class Dialog extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolExists},closeBtn:{type:Boolean,reflect:!0,attribute:"close-btn",converter:boolExists},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolExists},confirmText:{type:String,reflect:!0,attribute:"confirm-text"},confirmClasses:{type:String,reflect:!0,attribute:"confirm-classes"},cancelText:{type:String,reflect:!0,attribute:"cancel-text"},cancelClasses:{type:String,reflect:!0,attribute:"cancel-classes"}};constructor(){super(),this.opened=!1,this.closeBtn=!0,this.overlayClose=!0,this.confirmText="",this.confirmClasses="success ml",this.cancelText="",this.cancelClasses="",this.confirmAction=()=>{},this.cancelAction=()=>{},this.closeCallback=()=>{},this.previousFocus=null}handleClick=e=>{const{target:t}=e,o=t.id||t.closest("[id]")?.id;"overlay"===o&&this.overlayClose||"close"===o?this.close():"cancel"===o?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"===o&&(this.confirmAction(e),e.defaultPrevented||this.close())};handleKeydown=e=>{27===e.keyCode&&this.close()};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("opened")&&this.dispatchEvent(new CustomEvent(this.opened?"opened":"close"))}open(){this.opened=!0,window.addEventListener("keydown",this.handleKeydown);const e=this.updateComplete||this.requestUpdate();e&&e.then?e.then(()=>{const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus()}):setTimeout(()=>{const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus()},0)}close(){this.opened=!1,this.blur(),this.closeCallback(),window.removeEventListener("keydown",this.handleKeydown)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}hasTitle(){return!!this.querySelector('[slot="title"]')}static styles=css`
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";import"./FocusCapture.js";const firstFocusable=e=>e.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')[0];export default class Dialog extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolExists},closeBtn:{type:Boolean,reflect:!0,attribute:"close-btn",converter:boolExists},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolExists},disableKeyboardClose:{type:Boolean,reflect:!0,attribute:"disable-keyboard-close",converter:boolExists},confirmText:{type:String,reflect:!0,attribute:"confirm-text"},confirmClasses:{type:String,reflect:!0,attribute:"confirm-classes"},cancelText:{type:String,reflect:!0,attribute:"cancel-text"},cancelClasses:{type:String,reflect:!0,attribute:"cancel-classes"}};constructor(){super(),this.opened=!1,this.closeBtn=!0,this.overlayClose=!0,this.disableKeyboardClose=!1,this.confirmText="",this.confirmClasses="success ml",this.cancelText="",this.cancelClasses="",this.confirmAction=()=>{},this.cancelAction=()=>{},this.closeCallback=()=>{},this.previousFocus=null}handleClick=e=>{const{target:t}=e,o=t.id||t.closest("[id]")?.id;"overlay"===o&&this.overlayClose||"close"===o?this.close():"cancel"===o?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"===o&&(this.confirmAction(e),e.defaultPrevented||this.close())};handleKeydown=e=>{this.disableKeyboardClose||27!==e.keyCode||this.close()};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.handleKeydown)}updated(e){super.updated(e),e.has("opened")&&this.dispatchEvent(new CustomEvent(this.opened?"opened":"close"))}open(){this.opened=!0,window.addEventListener("keydown",this.handleKeydown);const e=this.updateComplete||this.requestUpdate();e&&e.then?e.then(()=>{const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus()}):setTimeout(()=>{const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus()},0)}close(){this.opened=!1,this.blur(),this.closeCallback(),window.removeEventListener("keydown",this.handleKeydown)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}hasTitle(){return!!this.querySelector('[slot="title"]')}static styles=css`
2
2
  :host {
3
3
  position: fixed;
4
4
  top: 0;
@@ -117,4 +117,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
117
117
  </div>
118
118
  </k-focus-capture>
119
119
  </div>
120
- `}static create(e="",t={}){!1!==t.closeExisting&&document.querySelectorAll("k-dialog").forEach(e=>e.close());const{removeOnClose:o=!0,closeCallback:s=()=>{},title:i="",titleClasses:l="pyh px m0"}=t,n=new Dialog;if(Object.assign(n,{opened:!0,...t,closeCallback:(...e)=>{o&&n.remove(),s(...e)}}),i){const e=document.createElement("h5");e.slot="title",e.className=l,i instanceof HTMLElement?e.appendChild(i):e.innerHTML=i,n.appendChild(e)}if(e instanceof HTMLElement||e instanceof DocumentFragment)n.appendChild(e);else if(e){if(/<[^>]+>/.test(e))n.innerHTML+=e;else{const t=document.createElement("p");t.className="p",t.textContent=e,n.appendChild(t)}}return t.width&&n.style.setProperty("--width",t.width),t.minWidth&&n.style.setProperty("--min_width",t.minWidth),t.maxWidth&&n.style.setProperty("--max_width",t.maxWidth),t.height&&n.style.setProperty("--height",t.height),t.minHeight&&n.style.setProperty("--min_height",t.minHeight),t.maxHeight&&n.style.setProperty("--max_height",t.maxHeight),document.body.appendChild(n),n.open(),n}static confirm(e,t,o={}){return Dialog.create(e,{title:o.title||"Confirm",closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>t(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>t(!1),...o})}static alert(e,t=()=>{},o={}){return Dialog.create(e,{title:o.title||"Alert",closeCallback:t,cancelText:"Ok",...o})}static error(e,t=()=>{},o={}){return Dialog.create(e,{title:o.title||"Error",titleClasses:"pyh px m0 tc-danger",closeCallback:t,cancelText:"Ok",...o})}static success(e,t=()=>{},o={}){return Dialog.create(e,{title:o.title||"Success",titleClasses:"pyh px m0 tc-success",closeCallback:t,cancelText:"Ok",...o})}}customElements.define("k-dialog",Dialog);
120
+ `}static create(e="",t={}){!1!==t.closeExisting&&document.querySelectorAll("k-dialog").forEach(e=>e.close());const{removeOnClose:o=!0,closeCallback:s=()=>{},title:i="",titleClasses:l="pyh px m0"}=t,a=new Dialog;if(Object.assign(a,{opened:!0,...t,closeCallback:(...e)=>{o&&a.remove(),s(...e)}}),i){const e=document.createElement("h5");e.slot="title",e.className=l,i instanceof HTMLElement?e.appendChild(i):e.innerHTML=i,a.appendChild(e)}if(e instanceof HTMLElement||e instanceof DocumentFragment)a.appendChild(e);else if(e){if(/<[^>]+>/.test(e))a.innerHTML+=e;else{const t=document.createElement("p");t.className="p",t.textContent=e,a.appendChild(t)}}return t.width&&a.style.setProperty("--width",t.width),t.minWidth&&a.style.setProperty("--min_width",t.minWidth),t.maxWidth&&a.style.setProperty("--max_width",t.maxWidth),t.height&&a.style.setProperty("--height",t.height),t.minHeight&&a.style.setProperty("--min_height",t.minHeight),t.maxHeight&&a.style.setProperty("--max_height",t.maxHeight),document.body.appendChild(a),a.open(),a}static confirm(e,t,o={}){return Dialog.create(e,{title:o.title||"Confirm",closeBtn:!1,overlayClose:!1,disableKeyboardClose:!0,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>t(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>t(!1),...o})}static alert(e,t=()=>{},o={}){return Dialog.create(e,{title:o.title||"Alert",closeCallback:t,cancelText:"Ok",...o})}static error(e,t=()=>{},o={}){return Dialog.create(e,{title:o.title||"Error",titleClasses:"pyh px m0 tc-danger",closeCallback:t,cancelText:"Ok",...o})}static success(e,t=()=>{},o={}){return Dialog.create(e,{title:o.title||"Success",titleClasses:"pyh px m0 tc-success",closeCallback:t,cancelText:"Ok",...o})}}customElements.define("k-dialog",Dialog);
package/dist/components/Icon.js CHANGED
@@ -1,4 +1,4 @@
1
- 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?.pathToIcons||["/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`
1
+ 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`
2
2
  :host {
3
3
  display: inline-block;
4
4
  vertical-align: bottom;
package/dist/components/ShadowComponent.js CHANGED
@@ -1 +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?.stylesheetPath||"/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}}
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||"/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/dist/components/SideMenu.js CHANGED
@@ -1,4 +1,4 @@
1
- import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./FocusCapture.js";import"./Icon.js";export default class SideMenu extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolTrueFalse},side:{type:String,reflect:!0}};constructor(){super(),this.opened=!1,this.overlayClose=!0,this.side="left"}overlayClick=()=>{this.overlayClose&&this.close()};updated(e){super.updated(e),e.has("opened")&&(this.opened?(this.dispatchEvent(new CustomEvent("change",{detail:"open"})),this.dispatchEvent(new CustomEvent("open"))):(this.dispatchEvent(new CustomEvent("change",{detail:"close"})),this.dispatchEvent(new CustomEvent("close"))))}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened?this.close():this.open(),this.dispatchEvent(new CustomEvent("toggle"))}render(){return html`
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./FocusCapture.js";import"./Icon.js";export default class SideMenu extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolTrueFalse},side:{type:String,reflect:!0}};constructor(){super(),this.opened=!1,this.overlayClose=!0,this.side="left"}overlayClick=()=>{this.overlayClose&&this.close()};updated(e){super.updated(e),e.has("opened")&&(this.opened?(document.body.style.overflow="hidden",this.dispatchEvent(new CustomEvent("change",{detail:"open"})),this.dispatchEvent(new CustomEvent("open"))):(document.body.style.overflow="",this.dispatchEvent(new CustomEvent("change",{detail:"close"})),this.dispatchEvent(new CustomEvent("close"))))}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened?this.close():this.open(),this.dispatchEvent(new CustomEvent("toggle"))}render(){return html`
2
2
  <k-focus-capture>
3
3
  <div id="container">
4
4
  <button id="overlay" @click=${this.overlayClick}>
package/docs/components/accordion.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Accordion - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
@@ -155,7 +157,9 @@
155
157
  <k-card>
156
158
  <h3 id="accordion-ref" class="bb pb">Accordion</h3>
157
159
  <h4>Properties</h4>
160
+ <ul>
158
161
  <li><code>multiple: boolean</code> — If present, allows multiple panels to be open.</li>
162
+ </ul>
159
163
  <h4>Methods</h4>
160
164
  <ul>
161
165
  <li><code>getHeader(panelName): HTMLElement | null</code></li>
package/docs/components/card.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Card - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/content-slider.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Content Slider - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/dialog.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Dialog - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
@@ -24,6 +26,7 @@
24
26
  <a href="#basicUsage">Basic Usage</a><br />
25
27
  <a href="#titles">Titles</a><br />
26
28
  <a href="#actionButtons">Action Buttons</a><br />
29
+ <a href="#disableKeyboardClose">Disabling Keyboard Close</a><br />
27
30
  <a href="#jsUsage">JavaScript Usage</a><br />
28
31
  <a href="#confirmDialog">Confirm Dialog</a><br />
29
32
 
@@ -92,6 +95,14 @@
92
95
  <p class="p">Ranch is gross</p>
93
96
  </k-dialog>
94
97
 
98
+ <h3 id="disableKeyboardClose"><a href="#disableKeyboardClose" class="no-link">Disabling Keyboard Close</a></h3>
99
+ <p>You can disable closing the dialog with the ESC key by adding the <code>disable-keyboard-close</code> attribute. This is useful for dialogs that require explicit user action.</p>
100
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d10"</span> <span class="hljs-attr">disable-keyboard-close</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>This dialog cannot be closed with ESC<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-dialog</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"document.getElementById('d10').open()"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
101
+ <button class="openDialog mb" data-dialog="d10" slot="right">Open Dialog</button>
102
+ <k-dialog id="d10" disable-keyboard-close>
103
+ <p class="p">This dialog cannot be closed with ESC</p>
104
+ </k-dialog>
105
+
95
106
  <h3 id="jsUsage"><a href="#jsUsage" class="no-link">JavaScript Usage</a></h3>
96
107
  <h5>Create Dialog</h5>
97
108
  <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"d7"</span>&gt;</span>Open Dialog<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Dialog.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'d7'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Dialog.create(<span class="hljs-string">'Hello World'</span>);<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
@@ -180,6 +191,9 @@
180
191
  <h5><code>overlay-close<i>: boolean</i></code></h5>
181
192
  <p>Whether clicking the overlay closes the dialog. Default is <code>true</code>.</p>
182
193
 
194
+ <h5><code>disable-keyboard-close<i>: boolean</i></code></h5>
195
+ <p>Whether to disable closing the dialog with the ESC key. Default is <code>false</code>.</p>
196
+
183
197
  <h5><code>confirm-text<i>: string</i></code></h5>
184
198
  <p>Text for the confirm button.</p>
185
199
 
@@ -199,6 +213,9 @@
199
213
  <h5><code>cancelAction<i>: function</i></code></h5>
200
214
  <p>Action to perform on cancel. If the function calls <code>event.preventDefault()</code>, the dialog will not close automatically.</p>
201
215
 
216
+ <h5><code>disableKeyboardClose<i>: boolean</i></code></h5>
217
+ <p>Whether to disable closing the dialog with the ESC key. Default is <code>false</code>.</p>
218
+
202
219
  <h5><code>closeCallback<i>: function</i></code></h5>
203
220
  <p>Callback to execute when the dialog is closed.</p>
204
221
 
@@ -239,6 +256,7 @@
239
256
  <li><code>opened</code>: <i>boolean</i> - Whether the dialog is initially opened. Default is <code>true</code>.</li>
240
257
  <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button.</li>
241
258
  <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog.</li>
259
+ <li><code>disableKeyboardClose</code>: <i>boolean</i> - Whether to disable closing the dialog with the ESC key.</li>
242
260
  <li><code>confirmText</code>: <i>string</i> - Text for the confirm button.</li>
243
261
  <li><code>confirmClasses</code>: <i>string</i> - Classes for the confirm button.</li>
244
262
  <li><code>confirmAction</code>: <i>function</i> - Action to perform on confirm.</li>
@@ -257,7 +275,7 @@
257
275
  </ul>
258
276
 
259
277
  <h5><code>Dialog.confirm(text, responseCallback, options)<i>: Dialog</i></code></h5>
260
- <p>Creates and opens a confirmation dialog with the specified text and options. The response callback receives a boolean value indicating whether the user confirmed (<code>true</code>) or canceled (<code>false</code>).</p>
278
+ <p>Creates and opens a confirmation dialog with the specified text and options. The response callback receives a boolean value indicating whether the user confirmed (<code>true</code>) or canceled (<code>false</code>). By default, the close button and overlay close are disabled, and keyboard close (ESC key) is disabled to ensure the user must explicitly choose Yes or No.</p>
261
279
 
262
280
  <h6>Parameters</h6>
263
281
  <ul>
@@ -275,6 +293,7 @@
275
293
  <li><code>cancelClasses</code>: <i>string</i> - Classes for the cancel button. Default is <code>'danger'</code>.</li>
276
294
  <li><code>closeBtn</code>: <i>boolean</i> - Whether to show the close button. Default is <code>false</code>.</li>
277
295
  <li><code>overlayClose</code>: <i>boolean</i> - Whether clicking the overlay closes the dialog. Default is <code>false</code>.</li>
296
+ <li><code>disableKeyboardClose</code>: <i>boolean</i> - Whether to disable closing the dialog with the ESC key. Default is <code>true</code>.</li>
278
297
  </ul>
279
298
 
280
299
  <h5><code>Dialog.alert(text, responseCallback, options)<i>: Dialog</i></code></h5>
package/docs/components/focus-capture.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>FocusCapture - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/hybrid-component.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>HybridComponent - Base Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/icon.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Icon - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/import.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Import - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/light-component.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>LightComponent - Base Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/photo-viewer.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>PhotoViewer - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/resize.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Resize - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/shadow-component.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>ShadowComponent - Base Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
@@ -23,7 +25,7 @@
23
25
  <a href="#overview">Overview</a><br />
24
26
  <a href="#basicUsage">Basic Usage</a><br />
25
27
  <a href="#customStyles">Custom Styles</a><br />
26
- <a href="#stylesheetPath">Changing Stylesheet Path</a><br />
28
+ <a href="#pathToStylesheet">Changing Stylesheet Path</a><br />
27
29
 
28
30
  <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
29
31
  <a href="#constructor">Constructor</a><br />
@@ -55,9 +57,9 @@
55
57
  <p>Add component-specific styles using the static <code>styles</code> property:</p>
56
58
  <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> ShadowComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./ShadowComponent.js'</span>;<br /><span class="hljs-keyword">import</span> { html, css } <span class="hljs-keyword">from</span> <span class="hljs-string">'../lit-all.min.js'</span>;<br /><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyStyledComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br /> <span class="hljs-keyword">static</span> styles = css<span class="hljs-string">`<br /> :host {<br /> display: block;<br /> padding: var(--spacer);<br /> }<br /> .custom-element {<br /> background-color: var(--c_primary);<br /> color: var(--tc_on_primary);<br /> border-radius: var(--radius);<br /> }<br /> `</span>;<br /><br /> <span class="hljs-title function_">render</span>() {<br /> <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br /> &lt;div class="custom-element p"&gt;<br /> Custom styled content<br /> &lt;/div&gt;<br /> `</span>;<br /> }<br />}</code></pre>
57
59
 
58
- <h3 id="stylesheetPath"><a href="#stylesheetPath" class="no-link">Changing Stylesheet Path</a></h3>
59
- <p>By default, ShadowComponent loads <code>/kempo.min.css</code>. Change this globally by setting the <code>kempo.stylesheetPath</code> config before any components are loaded:</p>
60
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"><br /> window.kempo = {<br /> stylesheetPath: <span class="hljs-string">'/custom-path/kempo.min.css'</span><br /> };<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
60
+ <h3 id="pathToStylesheet"><a href="#pathToStylesheet" class="no-link">Changing Stylesheet Path</a></h3>
61
+ <p>By default, ShadowComponent loads <code>/kempo.min.css</code>. Change this globally by setting the <code>kempo.pathToStylesheet</code> config before any components are loaded:</p>
62
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"><br /> window.kempo = {<br /> pathToStylesheet: <span class="hljs-string">'/custom-path/kempo.min.css'</span><br /> };<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
61
63
 
62
64
  <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
63
65
  <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -71,9 +73,9 @@
71
73
  </ul>
72
74
 
73
75
  <h3 id="staticProperties"><a href="#staticProperties" class="no-link">Static Properties</a></h3>
74
- <h5><code>stylesheetPath<i>: string</i></code></h5>
76
+ <h5><code>pathToStylesheet<i>: string</i></code></h5>
75
77
  <p>The path to the Kempo CSS stylesheet to inject into the shadow DOM. Default is <code>'/kempo.min.css'</code>.
76
- This is configured via the global <code>window.kempo.stylesheetPath</code> config object.</p>
78
+ This is configured via the global <code>window.kempo.pathToStylesheet</code> config object.</p>
77
79
 
78
80
  <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
79
81
  <h5><code>createRenderRoot()<i>: Element</i></code></h5>
package/docs/components/show-more.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Show More - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/side-menu.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>SideMenu - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
@@ -119,6 +121,7 @@
119
121
  <ul>
120
122
  <li><a href="./shadowcomponent.html">ShadowComponent</a></li>
121
123
  <li><a href="./focuscapture.html">FocusCapture</a></li>
124
+ <li><strong>CSS:</strong> Add <code>html { scrollbar-gutter: stable; }</code> to your global styles to prevent layout shifts when the menu disables scrolling.</li>
122
125
  </ul>
123
126
 
124
127
  <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
package/docs/components/sortable.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Sortable - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/split.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Split - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/table.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Table - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/tableControls.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Top and Bottom Controls - Table - Kempo Docs</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/tableCustomFields.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Custom Fields - Table - Kempo Docs</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/tableFetchRecords.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Table - Fetch Records - Kempo Docs</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/tableFieldSortHide.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Field Sort and Hide - Table - Kempo Docs</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/tablePagination.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Pagination - Table - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/tableRecordEditing.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Record Editing - Table - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/tableRecordFiltering.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Record Filtering - Table - Kempo Docs</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/tableRecordHiding.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Row Controls - Table - Kempo Docs</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/tableRecordSearching.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Record Searching - Table - Kempo Docs</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/tableRecordSelection.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Record Selection - Table - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/tableRowControls.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Row Controls - Table - Kempo Docs</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/tableSorting.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Sorting - Table - Kempo Docs</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/tabs.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Tabs - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/tags.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Tags - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/theme-switcher.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>ThemeSwitcher - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/timestamp.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Timestamp - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
package/docs/components/toast.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Toast - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
@@ -292,7 +294,7 @@
292
294
 
293
295
  <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
294
296
  <ul>
295
- <li>ShadowComponent (configure <code>ShadowComponent.stylesheetPath</code> as needed for your server)</li>
297
+ <li>ShadowComponent (configure <code>ShadowComponent.pathToStylesheet</code> as needed for your server)</li>
296
298
  <li><a href="./icon.html">Icon</a></li>
297
299
  </ul>
298
300
 
package/docs/components/toggle.html CHANGED
@@ -4,6 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Toggle - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
+ <link rel="manifest" href="../manifest.json" />
7
9
  <link rel="stylesheet" href="../kempo-vars.css" />
8
10
  <link rel="stylesheet" href="../kempo.min.css" />
9
11
  <link rel="stylesheet" href="../kempo-hljs.css" />