kempo-ui 0.0.3 → 0.0.4

package/dist/src/components/ShowMore.js

@@ -0,0 +1,42 @@
+import{LitElement,html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import Icon from"./Icon.js";import{boolExists}from"../utils/propConverters.js";export default class ShowMore extends ShadowComponent{static properties={opened:{type:Boolean,converter:boolExists,reflect:!0}};constructor(){super(),this.opened=!1}updated(e){super.updated(e),e.has("opened")&&(this.dispatchEvent(new CustomEvent("change",{detail:{opened:this.opened}})),this.dispatchEvent(new CustomEvent(this.opened?"opened":"closed")))}handleToggleClick=()=>{this.toggle()};more(){this.opened=!0}less(){this.opened=!1}toggle(){this.opened=!this.opened}static styles=css`
+		:host {
+			--closed_height: 7rem;
+			
+			display: block;
+		}
+		:host(:not([opened])) #content {
+			height: var(--closed_height);
+			overflow-y: hidden;
+		}
+		:host(:not([opened])) #content {
+			margin-bottom: calc(var(--closed_height) * -0.9);
+		}
+		:host(:not([opened])) #toggle {
+			padding-top: calc(var(--closed_height) - 2rem);
+			background: linear-gradient(to bottom, transparent 0%, var(--c_bg) 95%);
+		}
+		#toggle {
+			width: 100%;
+			padding: var(--spacer_h);
+			text-align: center;
+			background: var(--c_bg);
+		}
+		:host([opened]) #more,
+		:host(:not([opened])) #less {
+			display: none;
+		}
+	`;render(){return html`
+			<div id="wrapper">
+				<div id="content">
+					<slot></slot>
+				</div>
+				<button id="toggle" @click=${this.handleToggleClick} class="no-btn">
+					<span id="more">
+						<slot name="more">Show More <k-icon name="arrow-down-double"></k-icon></slot>
+					</span>
+					<span id="less">
+						<slot name="less">Show Less <k-icon name="arrow-up-double"></k-icon></slot>
+					</span>
+				</button>
+			</div>
+		`}}customElements.define("k-show-more",ShowMore);

package/dist/src/components/SideMenu.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import"./FocusCapture.js";export default class SideMenu extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close"},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`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./FocusCapture.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`
 			<k-focus-capture>
 				<div id="container">
 					<button id="overlay" @click=${this.overlayClick}>

package/dist/src/components/Split.js

@@ -0,0 +1,84 @@
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import drag from"../utils/drag.js";import{watchWindowSize,unwatchWindowSize}from"../utils/watchWindowSize.js";export default class Split extends ShadowComponent{static properties={resizing:{type:Boolean,reflect:!0},stacked:{type:Boolean,reflect:!0},stackWidth:{type:Number,attribute:"stack-width"}};constructor(){super(),this.resizing=!1,this.stacked=!1,this.stackWidth=0,this.dragStartWidth=0,this.dragCleanup=()=>{},this.windowResizeHandler=this.handleWindowResize.bind(this)}firstUpdated(){super.firstUpdated(),this.setupDragHandler(),this.stacked=watchWindowSize(this.windowResizeHandler)<=this.stackWidth}disconnectedCallback(){super.disconnectedCallback(),this.dragCleanup(),unwatchWindowSize(this.windowResizeHandler)}handleWindowResize=t=>{this.stacked=t<=this.stackWidth};handleDragStart=()=>{this.resizing=!0,this.dragStartWidth=Math.round(this.shadowRoot.getElementById("left").getBoundingClientRect().width),this.dispatchEvent(new CustomEvent("resizestart",{detail:{startSize:this.dragStartWidth},bubbles:!0}))};handleDrag=({x:t})=>{const e=`${this.dragStartWidth+t}px`;this.setSize(e),this.dispatchEvent(new CustomEvent("resize",{detail:{size:e},bubbles:!0}))};handleDragEnd=({x:t})=>{this.resizing=!1;const e=`${this.dragStartWidth+t}px`;this.setSize(e),this.dispatchEvent(new CustomEvent("resizeend",{detail:{size:e},bubbles:!0}))};setSize(t){this.style.setProperty("--left_width",t)}setupDragHandler(){const t=this.shadowRoot.getElementById("divider-handle");t&&(this.dragCleanup=drag({element:t,callback:this.handleDrag,startCallback:this.handleDragStart,endCallback:this.handleDragEnd}))}static styles=css`
+		:host {
+			--left_width: calc((100% - var(--handle_width)) / 2);
+			--handle_width: 0.5rem;
+			--min_pane_width: 6rem;
+
+			height: 100%;
+			display: flex;
+			align-items: stretch;
+			flex: 1 1 auto;
+			overflow: hidden;
+		}
+
+		.pane, #divider-handle {
+			display: inline-block;
+		}
+
+		.pane {
+			min-width: var(--min_pane_width);
+			max-width: calc(100% - var(--min_pane_width));
+			max-height: 100%;
+			overflow: hidden;
+		}
+
+		#left {
+			flex: 0 0 var(--left_width);
+		}
+
+		#divider-handle {
+			display: flex;
+			justify-content: center;
+			width: var(--handle_width);
+			cursor: ew-resize;
+		}
+
+		:host([resizing]) #divider-handle {
+			background-color: var(--tc_primary);
+		}
+
+		:host([resizing]) .pane {
+			pointer-events: none;
+			user-select: none;
+		}
+
+		#divider-border {
+			width: 1px;
+			height: 100%;
+			border-left: 1px solid var(--c_border);
+		}
+
+		#right {
+			flex: 1 1;
+		}
+
+		:host([stacked]) #left,
+		:host([stacked]) #right {
+			display: block;
+		}
+
+		:host([stacked]) #divider-handle {
+			display: none;
+		}
+
+		:host([stacked]) .pane {
+			min-width: 0;
+			max-width: 100%;
+			max-height: none;
+			overflow: auto;
+		}
+
+		:host([stacked]) {
+			display: block;
+		}
+	`;render(){return html`
+			<div id="left" class="pane">
+				<slot></slot>
+			</div>
+			<div id="divider-handle">
+				<div id="divider-border"></div>
+			</div>
+			<div id="right" class="pane">
+				<slot name="right"></slot>
+			</div>
+		`}}customElements.define("k-split",Split);

package/dist/src/components/Tabs.js

@@ -0,0 +1,155 @@
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{boolExists}from"../utils/propConverters.js";export class Tabs extends ShadowComponent{static properties={active:{type:String,reflect:!0},fixedHeight:{type:Boolean,reflect:!0,attribute:"fixed-height",converter:boolExists}};constructor(){super(),this.active="",this.fixedHeight=!1}firstUpdated(){if(super.firstUpdated(),!this.active){const t=this.querySelector("k-tab-content");t&&(this.active=t.name)}this.setupScrollListeners(),this.updateScrollIndicators(),new ResizeObserver(()=>this.updateScrollIndicators()).observe(this.shadowRoot.getElementById("tabs"))}updated(t){super.updated(t),t.has("active")&&this.updateActiveElements()}setupScrollListeners(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),o=this.shadowRoot.getElementById("scroll-right");t.addEventListener("scroll",()=>this.updateScrollIndicators()),e.addEventListener("click",()=>{t.scrollBy({left:-200,behavior:"smooth"})}),o.addEventListener("click",()=>{t.scrollBy({left:200,behavior:"smooth"})})}updateScrollIndicators(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),o=this.shadowRoot.getElementById("scroll-right"),s=t.scrollLeft>0,i=t.scrollLeft<t.scrollWidth-t.clientWidth;e.classList.toggle("visible",s),o.classList.toggle("visible",i)}updateActiveElements(){const t=this.getActiveTab();t&&(t.active=!1);const e=this.getActiveContent();e&&(e.active=!1);const o=this.getTab(this.active);o&&(o.active=!0);const s=this.getContent(this.active);s&&(s.active=!0),this.dispatchEvent(new CustomEvent("tab",{detail:{tab:this.active},bubbles:!0}))}get contents(){return[...this.querySelectorAll(":scope > k-tab-content")]}get tabs(){return[...this.querySelectorAll(":scope > k-tab")]}getTab(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab[for="${t}"]`)),!e){let o=parseInt(t);o||(o=0),e=this.querySelectorAll("k-tab")[o]}return e}getActiveTab(){return this.querySelector(":scope > k-tab[active]")}getContent(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab-content[name="${t}"]`)),!e){let o=parseInt(t);o||(o=0),e=this.querySelectorAll("k-tab-content")[o]}return e}getActiveContent(){return this.querySelector(":scope > k-tab-content[active]")}static styles=css`
+		:host {
+			display: block;
+			width: 100%;
+		}
+
+		#wrapper {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			min-width: 0;
+		}
+
+		#tabs-container {
+			position: relative;
+			border-bottom: 1px solid var(--c_border);
+		}
+
+		#tabs {
+			display: flex;
+			overflow-x: auto;
+			overflow-y: hidden;
+		}
+
+		#tabs ::slotted(*) {
+			flex: 0 0 auto;
+		}
+
+		.scroll-indicator {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			width: 72px;
+			pointer-events: none;
+			opacity: 0;
+			transition: opacity 0.2s;
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			padding-bottom: 2px;
+		}
+
+		.scroll-indicator .arrow {
+			color: var(--tc_base);
+			z-index: 1;
+		}
+
+		.scroll-indicator.visible {
+			opacity: 1;
+		}
+
+		#scroll-left {
+			left: 0;
+			background: linear-gradient(90deg, 
+				var(--c_bg) 0%,
+				var(--c_bg) 30%,
+				transparent 100%
+			);
+		}
+
+		#scroll-right {
+			right: 0;
+			justify-content: flex-end;
+			background: linear-gradient(-90deg, 
+				var(--c_bg) 0%,
+				var(--c_bg) 30%,
+				transparent 100%
+			);
+		}
+
+		:host([fixed-height]) #wrapper {
+			height: 100%;
+		}
+
+		:host([fixed-height]) #contents {
+			height: 100%;
+			flex: 1;
+			min-height: 1.35rem;
+			overflow: auto;
+		}
+	`;render(){return html`
+			<div id="wrapper">
+				<div id="tabs-container">
+					<div id="scroll-left" class="scroll-indicator">
+						<svg class="arrow" width="20" height="20" viewBox="0 0 20 20" fill="none">
+							<path d="M12 15L7 10L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+						</svg>
+					</div>
+					<div id="tabs">
+						<slot name="tabs"></slot>
+					</div>
+					<div id="scroll-right" class="scroll-indicator">
+						<svg class="arrow" width="20" height="20" viewBox="0 0 20 20" fill="none">
+							<path d="M8 15L13 10L8 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+						</svg>
+					</div>
+				</div>
+				<div id="contents">
+					<slot></slot>
+				</div>
+			</div>
+		`}}export class Tab extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},for:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.for="",this.slot="tabs"}handleClick=()=>{if(!this.active){const t=this.parentElement;t&&"K-TABS"===t.tagName&&(t.active=this.for||t.tabs.indexOf(this).toString())}};get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}static styles=css`
+		:host {
+			margin-bottom: -1px;
+			flex: 0 0 auto;
+		}
+
+		#button {
+			padding: var(--spacer_h);
+			background-color: transparent;
+			border: none;
+			cursor: inherit;
+			box-shadow: none;
+			color: inherit;
+			white-space: nowrap;
+		}
+
+		:host(:not([active])) #button {
+			cursor: pointer;
+		}
+
+		:host([active]) {
+			border-bottom: 2px solid var(--c_primary);
+			margin-bottom: -1px;
+		}
+
+		:host([active]) #button {
+			color: var(--tc_primary);
+		}
+	`;render(){return html`
+			<button id="button" @click=${this.handleClick}>
+				<slot></slot>
+			</button>
+		`}}export class TabContent extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},name:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.name=""}get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}static styles=css`
+		:host {
+			display: block;
+			height: 100%;
+			max-height: 100%;
+			flex: 1 1 auto;
+			overflow: auto;
+		}
+
+		:host([active]) {
+			display: block;
+		}
+
+		:host(:not([active])) {
+			display: none;
+		}
+	`;render(){return html`<slot></slot>`}}export class TabSpacer extends ShadowComponent{constructor(){super(),this.slot="tabs"}static styles=css`
+		:host {
+			flex: 1 1 auto !important;
+			height: 1px;
+		}
+	`;render(){return html`<slot></slot>`}}customElements.define("k-tabs",Tabs),customElements.define("k-tab",Tab),customElements.define("k-tab-content",TabContent),customElements.define("k-tab-spacer",TabSpacer);export default{Tab:Tab,TabContent:TabContent,Tabs:Tabs,TabSpacer:TabSpacer};

package/dist/src/components/Tags.js

@@ -0,0 +1,69 @@
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Tags extends ShadowComponent{static properties={value:{type:String,reflect:!0},allowedTags:{type:String,reflect:!0,attribute:"allowed-tags"},disallowedTags:{type:String,reflect:!0,attribute:"disallowed-tags"}};constructor(){super(),this.value="",this.allowedTags="",this.disallowedTags=""}firstUpdated(){super.firstUpdated(),this.renderTags()}updated(t){if(super.updated(t),t.has("value")){const a=t.get("value"),e=this.validateTags();e!==this.value?this.value=e:(this.dispatchEvent(new CustomEvent("change",{detail:{oldValue:a,newValue:this.value},bubbles:!0})),this.renderTags())}if(t.has("allowedTags")||t.has("disallowedTags")){const a=t.get("allowedTags")||t.get("disallowedTags"),e=this.allowedTags||this.disallowedTags,s=this.validateTags();if(s!==this.value)this.value=s;else{const s=t.has("allowedTags")?"allowedtagschange":"disallowedtagschange";this.dispatchEvent(new CustomEvent(s,{detail:{oldValue:a,newValue:e},bubbles:!0})),this.renderTags()}}}handleInputChange=()=>{const t=this.shadowRoot.getElementById("tagsInput"),a=t.value.trim();a&&(this.addTag(a),t.value="")};handleInputInput=t=>{if(","===t.data||"insertFromPaste"===t.inputType){const t=this.shadowRoot.getElementById("tagsInput"),a=t.value.split(",").filter(t=>!!t.trim());a.length&&(a.forEach(t=>this.addTag(t.trim())),t.value="")}};async renderTags(){await this.updateComplete;const t=this.shadowRoot.getElementById("tags");t.innerHTML="",this.value&&this.value.split(",").forEach(a=>{const e=new Tag(a.trim(),this);t.appendChild(e)})}addTag(t){const a=new Set(this.value.split(",").filter(t=>!!t.trim()));a.add(t.trim()),this.value=[...a].filter(t=>!!t).join(","),this.dispatchEvent(new CustomEvent("addtag",{detail:{tag:t},bubbles:!0}))}removeTag(t){const a=new Set(this.value.split(",").filter(t=>!!t.trim()));a.delete(t),this.value=[...a].join(","),this.dispatchEvent(new CustomEvent("removetag",{detail:{tag:t},bubbles:!0}))}validateTags(){return this.value.split(",").map(t=>t.trim()).map(t=>{const a=new Set(this.allowedTags.split(",").filter(t=>!!t.trim()));if(a.size)return a.has(t)?t:"";const e=new Set(this.disallowedTags.split(",").filter(t=>!!t.trim()));return e.size&&e.has(t)?"":t}).filter(t=>!!t).join(",")}static styles=css`
+		:host {
+			display: block;
+
+		#tagsHolder {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			width: 100%;
+			background-color: var(--input_bg);
+			color: var(--input_tc);
+			border: var(--input_border_width) solid var(--c_border);
+			padding: var(--spacer_q);
+			margin-bottom: var(--spacer);
+			border-radius: var(--radius);
+			outline: none;
+			transition: box-shadow var(--animation_ms);
+			cursor: default;
+		}
+
+		#tagsHolder:focus-within {
+			box-shadow: var(--focus_shadow);
+		}
+
+		#tags {
+			display: contents;
+		}
+
+		#tagsInput {
+			display: inline-block;
+			min-width: 5rem;
+			width: auto;
+			max-width: 100%;
+			background-color: transparent;
+			color: inherit;
+			border: 0 solid transparent;
+			margin: var(--spacer_q);
+			padding: var(--spacer_q) 0;
+			border-radius: 0;
+			transition: none;
+			box-shadow: 0 0 0 transparent;
+		}
+	`;render(){return html`
+			<label for="tagsInput">
+				<slot></slot>
+				<div id="tagsHolder">
+					<span id="tags"></span>
+					<input 
+						id="tagsInput" 
+						@change=${this.handleInputChange}
+						@input=${this.handleInputInput}
+					/>
+				</div>
+			</label>
+		`}}class Tag extends ShadowComponent{constructor(t,a){super(),this.tag=t,this.tagsComponent=a,this.innerHTML=t}handleClick=()=>{this.tagsComponent.removeTag(this.tag)};static styles=css`
+		:host {
+			display: inline-block;
+			width: min-content;
+			margin: var(--spacer_q);
+			padding: var(--spacer_q) var(--spacer_h);
+			border: 1px solid var(--c_border);
+			border-radius: var(--radius);
+			cursor: pointer;
+		}
+
+		:host(:hover) {
+			text-decoration: line-through;
+		}
+	`;render(){return html`<span @click=${this.handleClick}><slot></slot></span>`}}customElements.define("k-tags",Tags),customElements.define("k-tag",Tag);

package/dist/src/components/ThemeSwitcher.js

@@ -0,0 +1,23 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import"./Icon.js";export default class ThemeSwitcher extends ShadowComponent{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=ThemeSwitcher.getCurrentTheme()}handleClick=()=>{const e=ThemeSwitcher.getCurrentTheme();"auto"===e&&ThemeSwitcher.setTheme("light"),"light"===e&&ThemeSwitcher.setTheme("dark"),"dark"===e&&ThemeSwitcher.setTheme("auto")};handleStorageChange=()=>{this.currentTheme=ThemeSwitcher.getCurrentTheme()};connectedCallback(){super.connectedCallback(),window.addEventListener("storage",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("storage",this.handleStorageChange)}static styles=css`
+		:host {
+			--padding: var(--spacer);
+			display: flex;
+		}
+		button {
+			padding: var(--padding);
+		}
+	`;render(){const e="auto"===this.currentTheme?"mode-auto":"light"===this.currentTheme?"mode-light":"mode-dark";return html`
+			<button
+				class="no-btn"
+				@click=${this.handleClick}
+			>
+				<k-icon name=${e}></k-icon>
+			</button>
+		`}static styles=css`
+		:host {
+			--padding: var(--spacer, 1rem);
+		}
+		button.no-btn {
+			padding: var(--padding);
+		}
+	`;static setTheme(e){localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e),window.dispatchEvent(new StorageEvent("storage",{key:"theme",newValue:e}))}static getCurrentTheme(){let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||"auto"}}const colorSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),colorSchemeChangeHandler=e=>document.documentElement.setAttribute("auto-theme",e.matches?"dark":"light");colorSchemeQuery.addEventListener("change",colorSchemeChangeHandler),colorSchemeChangeHandler(colorSchemeQuery),ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme()),customElements.define("k-theme-switcher",ThemeSwitcher);

package/dist/src/components/Timestamp.js

@@ -0,0 +1 @@
+import{html}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import formatTimestamp from"../utils/formatTimestamp.js";export default class Timestamp extends ShadowComponent{static properties={timestamp:{type:Number,reflect:!0},format:{type:String,reflect:!0},locale:{type:String,reflect:!0}};constructor(){super(),this.timestamp=0,this.format="",this.locale=""}render(){const t=this.timestamp?formatTimestamp(this.timestamp,this.format,this.locale||navigator.language):"";return html`<span>${t}</span>`}}window.customElements.define("k-timestamp",Timestamp);

package/dist/src/utils/debounce.js

@@ -0,0 +1 @@
+function debounce(e,t=300){let u;return(...o)=>{clearTimeout(u),u=setTimeout(()=>{e.apply(this,o)},t)}}export default debounce;

package/dist/src/utils/drag.js

@@ -0,0 +1 @@
+export default(e={})=>{let t,n,o;const{element:s,callback:a=()=>{},startCallback:r=()=>{},moveCallback:c=()=>{},endCallback:u=()=>{},preventScroll:v=!1}=e,d=s=>{v&&s.preventDefault(),clearTimeout(o);const r=s.pageX||s.touches[0].pageX,u=s.pageY||s.touches[0].pageY,d={x:r-t,y:u-n,...e};a(d),c(d)},i=s=>{clearTimeout(o);const r=s.pageX||s.changedTouches&&s.changedTouches[0].pageX||0,c=s.pageY||s.changedTouches&&s.changedTouches[0].pageY||0,v={x:r-t,y:c-n,...e};a(v),u(v),m()},p=s=>{if(s.button&&0!==s.button)return;clearTimeout(o),t=s.pageX||s.touches[0].pageX,n=s.pageY||s.touches[0].pageY;const a={x:0,y:0,...e};r(a),window.addEventListener("mousemove",d,{passive:!v}),window.addEventListener("mouseup",i,{passive:!v}),window.addEventListener("touchmove",d,{passive:!v}),window.addEventListener("touchend",i,{passive:!v})},m=()=>{window.removeEventListener("mousemove",d),window.removeEventListener("mouseup",i),window.removeEventListener("touchmove",d),window.removeEventListener("touchend",i)};return s.addEventListener("mousedown",p,{passive:!v}),s.addEventListener("touchstart",p,{passive:!v}),()=>{s.removeEventListener("mousedown",p),s.removeEventListener("touchstart",p),m()}};

package/dist/src/utils/formatTimestamp.js

@@ -0,0 +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)};

package/dist/src/utils/propConverters.js

@@ -0,0 +1 @@
+export const boolTrueFalse={fromAttribute:t=>null===t?void 0:"true"===t.toLowerCase(),toAttribute:t=>t?"true":"false"};export const boolExists={fromAttribute:t=>null!==t,toAttribute:t=>t?"":null};

package/dist/src/utils/watchWindowSize.js

@@ -0,0 +1 @@
+import debounce from"./debounce.js";const handlers=new Set;window.addEventListener("resize",debounce(()=>{const e=window.innerWidth;handlers.forEach(n=>n(e))}));export const watchWindowSize=e=>(handlers.add(e),window.innerWidth);export const unwatchWindowSize=e=>{handlers.delete(e)};

package/docs/components/accordion.html

@@ -7,8 +7,10 @@
   <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
   <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
   <script type="module">
+    import ShadowComponent from '../src/components/ShadowComponent.js';
     import Import from '../src/components/Import.js';
     import Icon from '../src/components/Icon.js';
+    ShadowComponent.stylesheetPath = '../kempo.min.css';
     Import.replacements.root = '../';
     Icon.pathToIcons = ['../icons'];
   </script>
@@ -28,9 +30,9 @@
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</a><br />
         <a href="#requirements">Requirements</a><br />
-        <a href="#attributes">Attributes</a><br />
         <a href="#properties">Properties</a><br />
         <a href="#methods">Methods</a><br />
+        <a href="#events">Events</a><br />
       </div>
     </details>
 
@@ -79,43 +81,85 @@
     <h2 id="jsRef">JavaScript Reference</h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
-    <h6>Extends <a href="./component.html">Component</a></h6>
+    <h6>Extends <a href="./component.html">ShadowComponent</a></h6>
     <h5>
       <code>new Accordion()</code><br />
     </h5>
 
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="../utils/element.html">utils/element.js</a></li>
+      <li><a href="./component.html">ShadowComponent</a></li>
     </ul>
 
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
-    <h5><code>forPanel: string</code></h5>
-    <p>Specifies the panel associated with the header.</p>
-    <h5><code>active: boolean</code></h5>
-    <p>Indicates whether the panel or header is active.</p>
-    <h5><code>transitioning: boolean</code></h5>
-    <p>Indicates whether the panel is in the process of transitioning.</p>
-
     <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
-    <h5><code>activeHeader: HTMLElement</code></h5>
-    <p>Returns the currently active header element.</p>
-    <h5><code>activePanel: HTMLElement</code></h5>
-    <p>Returns the currently active panel element.</p>
+    
+    <h4>Accordion (Main Component)</h4>
+    <h5><code>activeHeader<i>: HTMLElement | null</i></code></h5>
+    <p>Returns the currently active header element, or <code>null</code> if no panel is open.</p>
+    <h5><code>activePanel<i>: HTMLElement | null</i></code></h5>
+    <p>Returns the currently active panel element, or <code>null</code> if no panel is open.</p>
+
+    <h4>AccordionHeader</h4>
+    <h5><code>forPanel<i>: string</i></code></h5>
+    <p>The panel name that this header controls. Syncs with the <code>for-panel</code> attribute.</p>
+    <h5><code>active<i>: boolean</i></code></h5>
+    <p>Whether this header is currently active (its associated panel is open). Syncs with the <code>active</code> attribute.</p>
+    <h5><code>accordion<i>: Accordion | null</i></code></h5>
+    <p>Returns the parent accordion component, or <code>null</code> if not inside an accordion.</p>
+
+    <h4>AccordionPanel</h4>
+    <h5><code>name<i>: string</i></code></h5>
+    <p>Unique identifier for this panel. Must match the <code>for-panel</code> attribute of its associated header. Syncs with the <code>name</code> attribute.</p>
+    <h5><code>active<i>: boolean</i></code></h5>
+    <p>Whether this panel is currently open. Syncs with the <code>active</code> attribute.</p>
+    <h5><code>transitioning<i>: boolean</i></code></h5>
+    <p>Whether this panel is currently animating (opening or closing). Syncs with the <code>transitioning</code> attribute.</p>
+    <h5><code>accordion<i>: Accordion | null</i></code></h5>
+    <p>Returns the parent accordion component, or <code>null</code> if not inside an accordion.</p>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
-    <h5><code>getHeader(panelName: string): HTMLElement</code></h5>
-    <p>Returns the header element associated with the specified panel name.</p>
-    <h5><code>getPanel(panelName: string): HTMLElement</code></h5>
-    <p>Returns the panel element associated with the specified panel name.</p>
-    <h5><code>openPanel(panelName: string): void</code></h5>
-    <p>Opens the panel associated with the specified panel name.</p>
-    <h5><code>closePanel(panelName: string): void</code></h5>
-    <p>Closes the panel associated with the specified panel name.</p>
-    <h5><code>togglePanel(panelName: string): void</code></h5>
-    <p>Toggles the panel associated with the specified panel name.</p>
+    
+    <h4>Accordion (Main Component)</h4>
+    <h5><code>getHeader(panelName)<i>: HTMLElement | null</i></code></h5>
+    <p>Returns the header element associated with the specified panel name, or <code>null</code> if not found.</p>
+    <ul>
+      <li><strong>panelName</strong> <code>string</code> - The name of the panel whose header to retrieve</li>
+    </ul>
+
+    <h5><code>getPanel(panelName)<i>: HTMLElement | null</i></code></h5>
+    <p>Returns the panel element with the specified name, or <code>null</code> if not found.</p>
+    <ul>
+      <li><strong>panelName</strong> <code>string</code> - The name of the panel to retrieve</li>
+    </ul>
+
+    <h5><code>openPanel(panelName)<i>: void</i></code></h5>
+    <p>Opens the panel with the specified name. Closes any currently open panel first. Dispatches an <code>openpanel</code> event.</p>
+    <ul>
+      <li><strong>panelName</strong> <code>string</code> - The name of the panel to open</li>
+    </ul>
+
+    <h5><code>closePanel(panelName)<i>: void</i></code></h5>
+    <p>Closes the panel with the specified name. Dispatches a <code>closepanel</code> event.</p>
+    <ul>
+      <li><strong>panelName</strong> <code>string</code> - The name of the panel to close</li>
+    </ul>
+
+    <h5><code>togglePanel(panelName)<i>: void</i></code></h5>
+    <p>Toggles the panel with the specified name (opens if closed, closes if open). Dispatches a <code>togglepanel</code> event.</p>
+    <ul>
+      <li><strong>panelName</strong> <code>string</code> - The name of the panel to toggle</li>
+    </ul>
+
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>openpanel</code></h5>
+    <p>Fired when a panel is opened. The event detail contains <code>{ panelName }</code>.</p>
+    <h5><code>closepanel</code></h5>
+    <p>Fired when a panel is closed. The event detail contains <code>{ panelName }</code>.</p>
+    <h5><code>togglepanel</code></h5>
+    <p>Fired when a panel is toggled. The event detail contains <code>{ panelName }</code>.</p>
     
   </main>
+  <div style="height:33vh"></div>
   <script type="module" src="../src/components/Import.js"></script>
   <script type="module" src="../src/components/Accordion.js"></script>
 </body>

package/docs/components/card.html

@@ -7,8 +7,10 @@
   <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
   <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
   <script type="module">
+    import ShadowComponent from '../src/components/ShadowComponent.js';
     import Import from '../src/components/Import.js';
     import Icon from '../src/components/Icon.js';
+    ShadowComponent.stylesheetPath = '../kempo.min.css';
     Import.replacements.root = '../';
     Icon.pathToIcons = ['../icons'];
   </script>
@@ -26,7 +28,6 @@
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</a><br />
         <a href="#requirements">Requirements</a><br />
-        <a href="#attributes">Attributes</a><br />
         <a href="#properties">Properties</a><br />
         <a href="#methods">Methods</a><br />
       </div>
@@ -60,7 +61,7 @@
     <h2 id="jsRef">JavaScript Reference</h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
-    <h6>Extends <a href="./component.html">Component</a></h6>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
     <h5>
       <code>new Card()</code><br />
       <code>new Card(<i>string</i> label)</code>
@@ -72,12 +73,12 @@
 
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>
-      <li><a href="./component.html">Component</a></li>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
     </ul>
 
-    <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
     <h5><code>label<i>: string</i></code></h5>
-    <p>The label for the card.</p>
+    <p>The label for the card. Syncs with the <code>label</code> attribute.</p>
 
     <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
     <h5><code>setLabel(<i>string</i> label)<i>: void</i></code></h5>