kempo-ui 0.0.42 → 0.0.43

package/dist/components/Accordion.js

@@ -35,7 +35,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 		}
 	`;render(){return html`<slot></slot>`}}export class AccordionHeader extends ShadowComponent{static properties={forPanel:{type:String,reflect:!0,attribute:"for-panel"},active:{type:Boolean,reflect:!0,converter:boolExists}};constructor(){super(),this.forPanel="",this.active=!1}handleClick=()=>{this.accordion?.togglePanel(this.forPanel)};connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick)}get accordion(){return this.closest("k-accordion")}render(){return html`
 			<slot name="left-icon">
-				<k-icon id="icon" name="chevron-right"></k-icon>
+				<k-icon id="icon" name="chevron"></k-icon>
 			</slot>
 			<slot></slot>
 			<slot name="right-icon"></slot>

package/dist/components/ContentSlider.js

@@ -28,7 +28,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 					@click=${this.handlePrevClick}
 				>
 					<slot name="prev">
-						<k-icon name="chevron-left"></k-icon>
+						<k-icon name="chevron" direction="left"></k-icon>
 					</slot>
 				</button>
 				<button
@@ -37,7 +37,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 					@click=${this.handleNextClick}
 				>
 					<slot name="next">
-						<k-icon name="chevron-right"></k-icon>
+						<k-icon name="chevron"></k-icon>
 					</slot>
 				</button>
 			</div>

package/dist/components/Icon.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}from"../lit-all.min.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise(async(e,n)=>{const s=(new AbortController).signal;try{const n=await fetch(t,{signal:s});200===n.status?e(await n.text()):404===n.status&&e(null)}catch(t){"AbortError"!==t.name&&n(t)}}).catch(()=>null)),await cache[t]),getIconByName=t=>{const e=async e=>{const n=e.endsWith("/")?e.slice(0,-1):e;return getIconByPath(`${n}/${t}.svg`)};return new Promise(async(t,n)=>{let s;const o=window.kempo?.pathsToIcons||["/icons","../../icons","https://cdn.jsdelivr.net/npm/kempo-ui@0.0.32/icons/"];for(let t=0;t<o.length&&!s;t++)try{s=await e(o[t])}catch(t){}t(s||null)})};export default class Icon extends ShadowComponent{static properties={src:{type:String,reflect:!0},name:{type:String,reflect:!0},iconContent:{type:String}};constructor(t=""){super(),this.src="",this.name=t,this.iconContent=""}updated(t){super.updated(),(t.has("src")||t.has("name"))&&this.loadIcon()}async loadIcon(){let t;if(this.src?t=await getIconByPath(this.src):this.name&&(t=await getIconByName(this.name)),t)this.iconContent=this.fixSVG(t);else{const t=this.innerHTML.trim();this.iconContent=t?this.fixSVG(t):window.kempo?.fallbackIcon||'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>'}}fixSVG(t){if(!t)return t;const e=(new DOMParser).parseFromString(t,"image/svg+xml").querySelector("svg");return e?(e.removeAttribute("width"),e.removeAttribute("height"),e.querySelectorAll("path, rect, circle").forEach(t=>{t.setAttribute("fill","currentColor")}),(new XMLSerializer).serializeToString(e)):t}static styles=css`
+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(n,e)=>{const i=(new AbortController).signal;try{const e=await fetch(t,{signal:i});200===e.status?n(await e.text()):404===e.status&&n(null)}catch(t){"AbortError"!==t.name&&e(t)}}).catch(()=>null)),await cache[t]),getIconByName=t=>{const n=async n=>{const e=n.endsWith("/")?n.slice(0,-1):n;return getIconByPath(`${e}/${t}.svg`)};return new Promise(async(t,e)=>{let i;const o=window.kempo?.pathsToIcons||["/icons","../../icons","https://cdn.jsdelivr.net/npm/kempo-ui@0.0.32/icons/"];for(let t=0;t<o.length&&!i;t++)try{i=await n(o[t])}catch(t){}t(i||null)})};export default class Icon extends ShadowComponent{static properties={src:{type:String,reflect:!0},name:{type:String,reflect:!0},rotation:{type:String,reflect:!0},direction:{type:String,reflect:!0},animation:{type:String,reflect:!0},iconContent:{type:String}};constructor(t=""){super(),this.src="",this.name=t,this.rotation="",this.direction="",this.animation="",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 n=(new DOMParser).parseFromString(t,"image/svg+xml").querySelector("svg");return n?(n.removeAttribute("width"),n.removeAttribute("height"),n.querySelectorAll("path, rect, circle").forEach(t=>{t.setAttribute("fill","currentColor")}),(new XMLSerializer).serializeToString(n)):t}getRotationDegrees(){if(this.rotation)return this.rotation;return{down:"90",left:"180",up:"270"}[this.direction]||"0"}static styles=css`
 		:host {
 			display: inline-block;
 			vertical-align: bottom;
@@ -7,4 +7,36 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}fro
 			height: 1.35em;
 			vertical-align: middle;
 		}
-	`;render(){return this.iconContent?html`${unsafeHTML(this.iconContent)}`:html`<slot></slot>`}}window.customElements.define("k-icon",Icon);
+		
+		/* Rotation */
+		:host([rotation]) svg,
+		:host([direction]) svg {
+			transform: rotate(var(--icon-rotation, 0deg));
+		}
+		
+		/* Animations */
+		:host([animation="spin"]) svg {
+			animation: icon-spin 2s linear infinite;
+		}
+		:host([animation="blink"]) svg {
+			animation: icon-blink 1s ease-in-out infinite;
+		}
+		:host([animation="pulse"]) svg {
+			animation: icon-pulse 1.5s ease-in-out infinite;
+		}
+		
+		@keyframes icon-spin {
+			from { transform: rotate(0deg); }
+			to { transform: rotate(360deg); }
+		}
+		
+		@keyframes icon-blink {
+			0%, 100% { opacity: 1; }
+			50% { opacity: 0.2; }
+		}
+		
+		@keyframes icon-pulse {
+			0%, 100% { transform: scale(1); }
+			50% { transform: scale(1.2); }
+		}
+	`;render(){const t=this.getRotationDegrees(),n="0"!==t?`--icon-rotation: ${t}deg;`:"";return this.iconContent?html`<div style="${n}">${unsafeHTML(this.iconContent)}</div>`:html`<div style="${n}"><slot></slot></div>`}}window.customElements.define("k-icon",Icon);

package/dist/components/Main.js

@@ -0,0 +1,24 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Main extends ShadowComponent{static properties={panelWidth:{type:String,state:!0},panelSide:{type:String,state:!0}};constructor(){super(),this.panelWidth="0px",this.panelSide="left",this.handlePanelChange=this.handlePanelChange.bind(this)}connectedCallback(){super.connectedCallback(),window.addEventListener("side-panel-change",this.handlePanelChange);const e=document.querySelector("k-side-panel");e&&(this.panelWidth=e.collapsed?"3.5rem":"16rem",this.panelSide=e.side||"left")}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("side-panel-change",this.handlePanelChange)}handlePanelChange(e){this.panelWidth=e.detail.width,this.panelSide=e.detail.side}render(){return html`
+			<main>
+				<slot></slot>
+			</main>
+		`}static styles=css`
+		:host {
+			display: block;
+			margin-left: var(--panel-width, 0px);
+			transition: margin-left var(--animation_ms, 256ms);
+		}
+		:host([panel-side="right"]) {
+			margin-left: 0;
+			margin-right: var(--panel-width, 0px);
+			transition: margin-right var(--animation_ms, 256ms);
+		}
+		main {
+			max-width: var(--container_width, 90rem);
+			margin-left: auto;
+			margin-right: auto;
+			padding-top: var(--spacer);
+			padding-left: var(--spacer);
+			padding-right: var(--spacer);
+		}
+	`;updated(){super.updated(),this.style.setProperty("--panel-width",this.panelWidth),"right"===this.panelSide?this.setAttribute("panel-side","right"):this.removeAttribute("panel-side")}}window.customElements.define("k-main",Main);

package/dist/components/PhotoViewer.js

@@ -116,12 +116,12 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 					</button>
 					<button id="prev" class="nav-btn no-btn" @click=${this.handlePrevClick}>
 						<slot name="prev">
-							<k-icon name="chevron-left"></k-icon>
+							<k-icon name="chevron" direction="left"></k-icon>
 						</slot>
 					</button>
 					<button id="next" class="nav-btn no-btn" @click=${this.handleNextClick}>
 						<slot name="next">
-							<k-icon name="chevron-right"></k-icon>
+							<k-icon name="chevron"></k-icon>
 						</slot>
 					</button>
 					<div class="content">

package/dist/components/ShowMore.js

@@ -30,13 +30,13 @@ import{LitElement,html,css}from"../lit-all.min.js";import ShadowComponent from".
 				<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>
+			<button id="toggle" @click=${this.handleToggleClick} class="no-btn">
+				<span id="more">
+					<slot name="more">Show More <k-icon name="chevron-double" direction="down"></k-icon></slot>
+				</span>
+				<span id="less">
+					<slot name="less">Show Less <k-icon name="chevron-double" direction="up"></k-icon></slot>
+				</span>
+			</button>
 			</div>
 		`}}customElements.define("k-show-more",ShowMore);

package/dist/components/SidePanel.js

@@ -0,0 +1,225 @@
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import"./Icon.js";class SidePanel extends ShadowComponent{static properties={collapsed:{type:Boolean,reflect:!0},side:{type:String,reflect:!0}};constructor(){super(),this.collapsed=!1,this.side="left"}toggleClick=()=>this.toggle();updated(e){if(super.updated(e),e.has("collapsed")){const e=this.collapsed?"collapse":"expand";this.dispatchEvent(new CustomEvent(e)),this.dispatchEvent(new CustomEvent("change",{detail:e})),window.dispatchEvent(new CustomEvent("side-panel-change",{detail:{collapsed:this.collapsed,width:this.collapsed?"3.5rem":"16rem",side:this.side}}))}}expand=()=>this.collapsed=!1;collapse=()=>this.collapsed=!0;toggle(){this.collapsed=!this.collapsed,this.dispatchEvent(new CustomEvent("toggle"))}render(){return html`
+			<div id="header">
+				<slot name="logo"></slot>
+				<button id="toggle" @click=${this.toggleClick} aria-label="${this.collapsed?"Expand panel":"Collapse panel"}">
+					<k-icon name="arrow-line" direction="${this.collapsed?"right":"left"}"></k-icon>
+				</button>
+			</div>
+			<div id="content">
+				<slot></slot>
+			</div>
+		`}static styles=css`
+		:host {
+			--bg: var(--c_bg);
+			--width-expanded: 16rem;
+			--width-collapsed: 3.5rem;
+			--transition-duration: var(--animation_ms, 256ms);
+			display: block;
+			position: fixed;
+			top: 0;
+			left: 0;
+			height: 100vh;
+			width: var(--width-expanded);
+			transition: width var(--transition-duration);
+			background: var(--bg);
+			border-right: 1px solid var(--c_border);
+			z-index: 1000;
+		}
+		:host([collapsed]) {
+			width: var(--width-collapsed);
+		}
+		:host([side="right"]) {
+			left: auto;
+			right: 0;
+			border-right: none;
+			border-left: 1px solid var(--c_border);
+		}
+		#header {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			gap: var(--spacer_h);
+			padding: var(--spacer_h);
+			border-bottom: 1px solid var(--c_border);
+		}
+		::slotted([slot="logo"]) {
+			margin-right: auto;
+		}
+		::slotted([slot="logo"]) {
+			flex: 1;
+			min-width: 0;
+			opacity: 1;
+			transition: opacity var(--transition-duration);
+		}
+		:host([collapsed]) ::slotted([slot="logo"]) {
+			opacity: 0;
+			width: 0;
+			overflow: hidden;
+		}
+		#toggle {
+			flex-shrink: 0;
+			width: 2rem;
+			height: 2rem;
+			border: none;
+			background: transparent;
+			color: var(--c_text);
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: var(--radius);
+		}
+		#toggle:hover {
+			background: var(--c_bg_hover);
+		}
+		#content {
+			height: calc(100% - 3rem);
+			overflow-y: auto;
+			overflow-x: hidden;
+			display: flex;
+			flex-direction: column;
+		}
+	`}class SidePanelItem extends ShadowComponent{static properties={icon:{type:String},href:{type:String},active:{type:Boolean,reflect:!0}};constructor(){super(),this.icon="",this.href="#",this.active=!1,this.collapsed=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};render(){return html`
+			<a href="${this.href}" class="item ${this.active?"active bg-primary":""}">
+				${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:""}
+				<span class="label ${this.collapsed?"hidden":""}">
+					<slot></slot>
+				</span>
+			</a>
+		`}static styles=css`
+		:host {
+			display: block;
+		}
+		.item {
+			display: flex;
+			align-items: center;
+			gap: var(--spacer_h);
+			padding: var(--spacer_h);
+			color: var(--c_text);
+			text-decoration: none;
+			border-radius: var(--radius);
+			margin: 0 var(--spacer_h);
+			transition: background var(--animation_ms), color var(--animation_ms);
+			white-space: nowrap;
+		}
+		.item:hover {
+			background: var(--c_bg_hover);
+		}
+		.item.active {
+			color: var(--tc_on_primary);
+		}
+		.item.active:hover {
+			background: var(--c_primary);
+			filter: brightness(1.1);
+		}
+		k-icon {
+			flex-shrink: 0;
+		}
+		.label {
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			opacity: 1;
+			transition: opacity var(--animation_ms);
+		}
+		.label.hidden {
+			opacity: 0;
+			width: 0;
+		}
+	`}class SidePanelLabel extends ShadowComponent{constructor(){super(),this.collapsed=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};render(){return this.collapsed?html`<hr>`:html`<div class="label"><slot></slot></div>`}static styles=css`
+		:host {
+			display: block;
+			margin: var(--spacer_h) 0;
+		}
+		.label {
+			padding: 0 var(--spacer);
+			font-size: 0.75rem;
+			font-weight: 600;
+			text-transform: uppercase;
+			color: var(--c_text_muted);
+			letter-spacing: 0.05em;
+		}
+		hr {
+			border: none;
+			border-top: 1px solid var(--c_border);
+			margin: var(--spacer_h) var(--spacer);
+		}
+	`}class SidePanelMenu extends ShadowComponent{static properties={icon:{type:String},label:{type:String},open:{type:Boolean,reflect:!0}};constructor(){super(),this.icon="",this.label="",this.open=!1,this.collapsed=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.open=!1,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};toggleMenu=()=>{this.collapsed||(this.open=!this.open)};render(){return html`
+			<div class="menu-container">
+				<button class="menu-header ${this.open?"open":""}" @click=${this.toggleMenu}>
+					${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:""}
+					<span class="label ${this.collapsed?"hidden":""}">${this.label}</span>
+					${this.collapsed?"":html`<k-icon class="chevron" name="chevron" direction="${this.open?"down":"right"}"></k-icon>`}
+				</button>
+				<div class="menu-content ${this.open&&!this.collapsed?"open":""}">
+					<slot></slot>
+				</div>
+			</div>
+		`}static styles=css`
+		:host {
+			display: block;
+		}
+		.menu-container {
+			margin: 0;
+		}
+		.menu-header {
+			display: flex !important;
+			align-items: center;
+			gap: var(--spacer_h);
+			padding-top: var(--spacer_h) !important;
+			padding-bottom: var(--spacer_h) !important;
+			padding-left: var(--spacer_h) !important;
+			padding-right: var(--spacer_h) !important;
+			color: var(--c_text);
+			background: transparent;
+			border: none;
+			border-radius: var(--radius);
+			margin: 0 var(--spacer_h);
+			width: calc(100% - var(--spacer));
+			cursor: pointer;
+			text-align: left;
+			white-space: nowrap;
+			transition: background var(--animation_ms);
+		}
+		.menu-header:hover {
+			background: var(--c_bg_hover);
+		}
+		k-icon {
+			flex-shrink: 0;
+		}
+		.label {
+			flex: 1;
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			opacity: 1;
+			transition: opacity var(--animation_ms);
+		}
+		.label.hidden {
+			opacity: 0;
+			width: 0;
+		}
+		.chevron {
+			transition: transform var(--animation_ms);
+		}
+		.menu-content {
+			max-height: 0;
+			overflow: hidden;
+			transition: max-height var(--animation_ms);
+			padding-left: calc(var(--spacer_h) * 2);
+		}
+		.menu-content.open {
+			max-height: 500px;
+		}
+		::slotted(*) {
+			margin: 0.25rem 0;
+		}
+	`}class SidePanelSpacer extends ShadowComponent{render(){return html`<div class="spacer"></div>`}static styles=css`
+		:host {
+			display: block;
+			flex: 1;
+		}
+		.spacer {
+			height: 100%;
+		}
+	`}customElements.define("k-side-panel",SidePanel),customElements.define("k-side-panel-item",SidePanelItem),customElements.define("k-side-panel-label",SidePanelLabel),customElements.define("k-side-panel-menu",SidePanelMenu),customElements.define("k-side-panel-spacer",SidePanelSpacer);export default SidePanel;

package/dist/components/Table.js

@@ -15,7 +15,7 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
           @click=${this.enableSorting?()=>this.handleFieldClick(t):null}
         >
           ${s}
-          ${o?html`<k-icon name="${r.asc?"arrow-down":"arrow-up"}" class="icon-sort"></k-icon>`:""}
+          ${o?html`<k-icon name="arrow" direction="${r.asc?"down":"up"}" class="icon-sort"></k-icon>`:""}
         </div>
       `)}),this.hasAfterControls()&&e.push(html`
         <div class="field cell field-after-controls" style="width: ${this.columnSizes.afterControls}px"></div>

package/dist/components/tableControls/FirstPage.js

@@ -4,6 +4,6 @@ import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.j
 				?disabled="${this.isDisabled}"
 				@click="${this.handleClick}"
 			>
-				<k-icon name="first"></k-icon>
+				<k-icon name="chevron-line" direction="left"></k-icon>
 			</button>
 		`}}customElements.define("k-tc-first-page",FirstPage);

package/dist/components/tableControls/LastPage.js

@@ -4,6 +4,6 @@ import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.j
 				?disabled="${this.isDisabled}"
 				@click="${this.handleClick}"
 			>
-				<k-icon name="last"></k-icon>
+				<k-icon name="chevron-line"></k-icon>
 			</button>
 		`}}customElements.define("k-tc-last-page",LastPage);

package/dist/components/tableControls/NextPage.js

@@ -4,6 +4,6 @@ import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.j
 				?disabled="${this.isDisabled}"
 				@click="${this.handleClick}"
 			>
-				<k-icon name="chevron-right"></k-icon>
+				<k-icon name="chevron"></k-icon>
 			</button>
 		`}}customElements.define("k-tc-next-page",NextPage);

package/dist/components/tableControls/PrevPage.js

@@ -4,6 +4,6 @@ import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.j
 				?disabled="${this.isDisabled}"
 				@click="${this.handleClick}"
 			>
-				<k-icon name="chevron-left"></k-icon>
+				<k-icon name="chevron" direction="left"></k-icon>
 			</button>
 		`}}customElements.define("k-tc-prev-page",PrevPage);

package/dist/utils/theme.js

@@ -1 +1 @@
-import createContext from"./context.js";const getInitialTheme=()=>{let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||"auto"},themeContext=createContext("theme",getInitialTheme());themeContext.subscribe(e=>{localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e)});export const setTheme=e=>themeContext.set(e);export const getTheme=()=>themeContext.get();export const subscribeToTheme=e=>themeContext.subscribe(e);export const getCalculatedTheme=()=>{const e=getTheme();return"auto"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e};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);export default{get:getTheme,set:setTheme,subscribe:subscribeToTheme,getCalculated:getCalculatedTheme};
+import createContext from"./context.js";const getInitialTheme=()=>{let e=document.documentElement.getAttribute("theme");return e||(e=localStorage.getItem("theme")),e||"auto"},themeContext=createContext("theme",getInitialTheme()),applyTheme=e=>{localStorage.setItem("theme",e),document.documentElement.setAttribute("theme",e)};themeContext.subscribe(applyTheme),window.addEventListener("storage",e=>{"theme"===e.key&&e.newValue&&themeContext.set(e.newValue)});export const setTheme=e=>themeContext.set(e);export const getTheme=()=>themeContext.get();export const subscribeToTheme=e=>themeContext.subscribe(e);export const initTheme=()=>{const e=getInitialTheme();applyTheme(e),themeContext.set(e)};export const getCalculatedTheme=()=>{const e=getTheme();return"auto"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e};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);export default{get:getTheme,set:setTheme,subscribe:subscribeToTheme,getCalculated:getCalculatedTheme,init:initTheme};

package/docs/components/icon.html

@@ -23,6 +23,8 @@
         <div class="m ">
           <h6>Examples</h6>
           <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#rotation">Rotation and Direction</a><br />
+          <a href="#animation">Animation</a><br />
           <a href="#explicitSource">Explicitly Set the Source</a><br />
           <a href="#fallbackIcon">Fallback Icon</a><br />
           <a href="#changingIconDirectory">Changing the Icon Directory Location</a><br />
@@ -57,15 +59,52 @@
     <div class="row -mx mb">
       <div class="col d-span-6 m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"menu"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"close"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"play"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pause"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"arrow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"arrow-line"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"arrow-circle"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"chevron"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"chevron-double"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col d-span-6 m-span-12 px">
         <k-card label="Results">
-          <k-icon name="menu"></k-icon>
-          <k-icon name="close"></k-icon>
-          <k-icon name="play"></k-icon>
-          <k-icon name="pause"></k-icon>
+          <k-icon name="arrow"></k-icon>
+          <k-icon name="arrow-line"></k-icon>
+          <k-icon name="arrow-circle"></k-icon>
+          <k-icon name="chevron"></k-icon>
+          <k-icon name="chevron-double"></k-icon>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="rotation"><a href="#rotation" class="no-link">Rotation and Direction</a></h3>
+    <p>Use the <code>rotation</code> attribute to rotate an icon by a specific degree value, or use the <code>direction</code> attribute for semantic rotation (down=90°, left=180°, up=270°). Only set one attribute at a time.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"arrow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"arrow"</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">"down"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"arrow"</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">"left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"arrow"</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">"up"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"chevron"</span> <span class="hljs-attr">rotation</span>=<span class="hljs-string">"45"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-icon name="arrow"></k-icon>
+          <k-icon name="arrow" direction="down"></k-icon>
+          <k-icon name="arrow" direction="left"></k-icon>
+          <k-icon name="arrow" direction="up"></k-icon>
+          <k-icon name="chevron" rotation="45"></k-icon>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="animation"><a href="#animation" class="no-link">Animation</a></h3>
+    <p>Use the <code>animation</code> attribute to add built-in animations to icons. Available options are <code>spin</code>, <code>blink</code>, and <code>pulse</code>.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"arrow-circle"</span> <span class="hljs-attr">animation</span>=<span class="hljs-string">"spin"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"arrow"</span> <span class="hljs-attr">animation</span>=<span class="hljs-string">"blink"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"chevron"</span> <span class="hljs-attr">animation</span>=<span class="hljs-string">"pulse"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Results">
+          <k-icon name="arrow-circle" animation="spin"></k-icon>
+          <k-icon name="arrow" animation="blink"></k-icon>
+          <k-icon name="chevron" animation="pulse"></k-icon>
         </k-card>
       </div>
     </div>
@@ -152,6 +191,12 @@
     <p>The name of the icon. Syncs with the <code>name</code> attribute.</p>
     <h5><code>src<i>: string</i></code></h5>
     <p>The source URL of the icon. Syncs with the <code>src</code> attribute.</p>
+    <h5><code>rotation<i>: string</i></code></h5>
+    <p>The rotation angle in degrees (e.g., "45" or "180"). Syncs with the <code>rotation</code> attribute. Do not use with <code>direction</code>.</p>
+    <h5><code>direction<i>: string</i></code></h5>
+    <p>Semantic direction for icon rotation. Options: "down" (90°), "left" (180°), "up" (270°). Syncs with the <code>direction</code> attribute. Do not use with <code>rotation</code>.</p>
+    <h5><code>animation<i>: string</i></code></h5>
+    <p>Built-in animation to apply. Options: "spin" (continuous rotation), "blink" (fade in/out), "pulse" (scale up/down). Syncs with the <code>animation</code> attribute.</p>
     <h5><code>pathToIcons<i>: Array</i></code></h5>
     <p>An array of paths to directories containing icons. This is configured via the global <code>window.kempo.pathToIcons</code> config object.</p>
 

package/docs/components/side-panel-basic.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SidePanel Basic Example</title>
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.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/SidePanel.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-side-panel>
+		<h5 slot="logo" class="m0">Kempo</h5>
+    <k-side-panel-item icon="cards" href="#" active>Dashboard</k-side-panel-item>
+    <k-side-panel-item icon="check" href="#">Tasks</k-side-panel-item>
+    <k-side-panel-item icon="label" href="#">Email</k-side-panel-item>
+    <k-side-panel-label>Projects</k-side-panel-label>
+    <k-side-panel-item icon="folder" href="#">Figma Design</k-side-panel-item>
+    <k-side-panel-item icon="folder" href="#">Static Mania</k-side-panel-item>
+    <k-side-panel-spacer></k-side-panel-spacer>
+    <k-side-panel-item icon="settings" href="#">Settings</k-side-panel-item>
+    <k-side-panel-item icon="account-circle" href="#">Profile</k-side-panel-item>
+  </k-side-panel>
+  <k-main>
+    <h2>Main Content</h2>
+		<p>This is an example of the side panel. Click the toggle button to collapse it.</p>
+		<p>The Main component automatically adjusts its margin based on the panel state.</p>
+  </k-main>
+</body>
+</html>

package/docs/components/side-panel-menu.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SidePanel Menu Example</title>
+  <link rel="stylesheet" href="../kempo-vars.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.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/SidePanel.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      height: 100vh;
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body>
+  <k-side-panel>
+    <h3 slot="logo" style="margin: 0; font-size: 1.25rem;">App</h3>
+    <k-side-panel-item icon="cards" href="#">Dashboard</k-side-panel-item>
+    <k-side-panel-menu icon="folder" label="Projects">
+      <k-side-panel-item href="#">Website Redesign</k-side-panel-item>
+      <k-side-panel-item href="#">Mobile App</k-side-panel-item>
+    </k-side-panel-menu>
+    <k-side-panel-spacer></k-side-panel-spacer>
+    <k-side-panel-item icon="settings" href="#">Settings</k-side-panel-item>
+  </k-side-panel>
+  <div style="margin-left: 16rem; padding: 2rem; transition: margin-left 256ms;">
+    <h2>Main Content</h2>
+    <p>Click on the "Projects" menu to expand it and see sub-items.</p>
+  </div>
+  <script>
+    const panel = document.querySelector('k-side-panel');
+    const content = document.querySelector('div');
+    panel.addEventListener('collapse', () => {
+      content.style.marginLeft = '3.5rem';
+    });
+    panel.addEventListener('expand', () => {
+      content.style.marginLeft = '16rem';
+    });
+  </script>
+</body>
+</html>