kempo-ui 0.0.43 → 0.0.63

package/icons/format_align_right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-760v-80h720v80H120Zm240 160v-80h480v80H360ZM120-440v-80h720v80H120Zm240 160v-80h480v80H360ZM120-120v-80h720v80H120Z"/></svg>

package/icons/format_bold.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M272-200v-560h221q65 0 120 40t55 111q0 51-23 78.5T602-491q25 11 55.5 41t30.5 90q0 89-65 124.5T501-200H272Zm121-112h104q48 0 58.5-24.5T566-372q0-11-10.5-35.5T494-432H393v120Zm0-228h93q33 0 48-17t15-38q0-24-17-39t-44-15h-95v109Z"/></svg>

package/icons/format_clear.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m528-546-93-93-121-121h486v120H568l-40 94ZM792-56 460-388l-80 188H249l119-280L56-792l56-56 736 736-56 56Z"/></svg>

package/icons/format_color_fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m247-904 57-56 343 343q23 23 23 57t-23 57L457-313q-23 23-57 23t-57-23L153-503q-23-23-23-57t23-57l190-191-96-96Zm153 153L209-560h382L400-751Zm360 471q-33 0-56.5-23.5T680-360q0-21 12.5-45t27.5-45q9-12 19-25t21-25q11 12 21 25t19 25q15 21 27.5 45t12.5 45q0 33-23.5 56.5T760-280ZM80 0v-160h800V0H80Z"/></svg>

package/icons/format_color_text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M80 0v-160h800V0H80Zm140-280 210-560h100l210 560h-96l-50-144H368l-52 144h-96Zm176-224h168l-82-232h-4l-82 232Z"/></svg>

package/icons/format_h1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-280v-400h80v160h160v-160h80v400h-80v-160H280v160h-80Zm480 0v-320h-80v-80h160v400h-80Z"/></svg>

package/icons/format_h2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-280v-400h80v160h160v-160h80v400h-80v-160H200v160h-80Zm400 0v-160q0-33 23.5-56.5T600-520h160v-80H520v-80h240q33 0 56.5 23.5T840-600v80q0 33-23.5 56.5T760-440H600v80h240v80H520Z"/></svg>

package/icons/format_h3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-280v-400h80v160h160v-160h80v400h-80v-160H200v160h-80Zm400 0v-80h240v-80H600v-80h160v-80H520v-80h240q33 0 56.5 23.5T840-600v240q0 33-23.5 56.5T760-280H520Z"/></svg>

package/icons/format_h4.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-280v-400h80v160h160v-160h80v400h-80v-160H200v160h-80Zm600 0v-120H520v-280h80v200h120v-200h80v200h80v80h-80v120h-80Z"/></svg>

package/icons/format_h5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-280v-400h80v160h160v-160h80v400h-80v-160H200v160h-80Zm400 0v-80h240v-80H520v-240h320v80H600v80h160q33 0 56.5 23.5T840-440v80q0 33-23.5 56.5T760-280H520Z"/></svg>

package/icons/format_h6.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-280v-400h80v160h160v-160h80v400h-80v-160H200v160h-80Zm480 0q-33 0-56.5-23.5T520-360v-240q0-33 23.5-56.5T600-680h240v80H600v80h160q33 0 56.5 23.5T840-440v80q0 33-23.5 56.5T760-280H600Zm0-160v80h160v-80H600Z"/></svg>

package/icons/format_italic.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-200v-100h160l120-360H320v-100h400v100H580L460-300h140v100H200Z"/></svg>

package/icons/format_list_bulleted.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M360-200v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360ZM200-160q-33 0-56.5-23.5T120-240q0-33 23.5-56.5T200-320q33 0 56.5 23.5T280-240q0 33-23.5 56.5T200-160Zm0-240q-33 0-56.5-23.5T120-480q0-33 23.5-56.5T200-560q33 0 56.5 23.5T280-480q0 33-23.5 56.5T200-400Zm0-240q-33 0-56.5-23.5T120-720q0-33 23.5-56.5T200-800q33 0 56.5 23.5T280-720q0 33-23.5 56.5T200-640Z"/></svg>

package/icons/format_list_numbered.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-80v-60h100v-30h-60v-60h60v-30H120v-60h120q17 0 28.5 11.5T280-280v40q0 17-11.5 28.5T240-200q17 0 28.5 11.5T280-160v40q0 17-11.5 28.5T240-80H120Zm0-280v-110q0-17 11.5-28.5T160-510h60v-30H120v-60h120q17 0 28.5 11.5T280-560v70q0 17-11.5 28.5T240-450h-60v30h100v60H120Zm60-280v-180h-60v-60h120v240h-60Zm180 440v-80h480v80H360Zm0-240v-80h480v80H360Zm0-240v-80h480v80H360Z"/></svg>

package/icons/format_paragraph.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M360-160v-240q-83 0-141.5-58.5T160-600q0-83 58.5-141.5T360-800h360v80h-80v560h-80v-560H440v560h-80Z"/></svg>

package/icons/format_underlined.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-120v-80h560v80H200Zm280-160q-101 0-157-63t-56-167v-330h103v336q0 56 28 91t82 35q54 0 82-35t28-91v-336h103v330q0 104-56 167t-157 63Z"/></svg>

package/icons/help.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

package/icons/link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/></svg>

package/icons/more_vert.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z"/></svg>

package/icons/strikethrough_s.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M486-160q-76 0-135-45t-85-123l88-38q14 48 48.5 79t85.5 31q42 0 76-20t34-64q0-18-7-33t-19-27h112q5 14 7.5 28.5T694-340q0 86-61.5 133T486-160ZM80-480v-80h800v80H80Zm402-326q66 0 115.5 32.5T674-674l-88 39q-9-29-33.5-52T484-710q-41 0-68 18.5T386-640h-96q2-69 54.5-117.5T482-806Z"/></svg>

package/icons/table.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm240-240H200v160h240v-160Zm80 0v160h240v-160H520Zm-80-80v-160H200v160h240Zm80 0h240v-160H520v160ZM200-680h560v-80H200v80Z"/></svg>

package/icons/wysiwyg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-480H200v480Zm80-280v-80h400v80H280Zm0 160v-80h240v80H280Z"/></svg>

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "kempo-ui",
-  "version": "0.0.43",
+  "version": "0.0.63",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",
   "scripts": {
     "build": "node scripts/build.js",
-    "docs": "node scripts/docs.js",
-    "docs:src": "node scripts/docs.js --src",
-    "docs:no-build": "node scripts/docs.js --no-build",
+    "prod": "node scripts/docs.js",
+    "dev": "node scripts/docs.js --src",
+    "geticon": "node scripts/getIcon.js",
     "test": "npx kempo-test",
     "test:gui": "npx kempo-test --gui",
     "test:browser": "npx kempo-test -b",
     "test:node": "npx kempo-test -n",
-    "update-kempo-css": "node scripts/update-kempo-css.js"
+    "update-kempo-css": "node scripts/update-kempo-css.js",
+    "update-kempo-ui-cdn": "node scripts/update-kempo-ui-cdn.js"
   },
   "repository": {
     "type": "git",

package/scripts/getIcon.js

@@ -0,0 +1,52 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { spawn } from 'child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const iconName = process.argv[2];
+const customName = process.argv[3];
+
+if(!iconName){
+	console.error('Error: Please provide an icon name');
+	console.log('Usage: npm run geticon <icon_name> [custom_name]');
+	console.log('Example: npm run geticon format_bold');
+	console.log('Example: npm run geticon content_copy copy');
+	process.exit(1);
+}
+
+const fileName = customName || iconName;
+const url = `https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/${iconName}/default/24px.svg`;
+const outputPath = path.join(__dirname, '..', 'icons', `${fileName}.svg`);
+
+console.log(`Downloading ${iconName}...`);
+
+try {
+	const response = await fetch(url);
+	
+	if(!response.ok){
+		throw new Error(`Failed to fetch icon: ${response.status} ${response.statusText}`);
+	}
+	
+	let svgContent = await response.text();
+	
+	svgContent = svgContent.replace(/ height="24"/g, '');
+	svgContent = svgContent.replace(/ width="24"/g, '');
+	svgContent = svgContent.replace(/<path d=/g, '<path fill="currentColor" d=');
+	
+	await fs.writeFile(outputPath, svgContent, 'utf8');
+	
+	console.log(`✓ Successfully downloaded and formatted ${fileName}.svg`);
+	console.log(`  Saved to: icons/${fileName}.svg`);
+	
+	console.log('\nStarting build in background...');
+	spawn('npm', ['run', 'build'], {
+		stdio: 'inherit',
+		shell: true
+	});
+} catch(error){
+	console.error(`Error: ${error.message}`);
+	process.exit(1);
+}

package/src/components/Dialog.js

@@ -52,9 +52,23 @@ export default class Dialog extends ShadowComponent {
 		} else if(id === 'cancel') {
 			this.cancelAction(event);
 			if(!event.defaultPrevented) this.close();
-		} else if(id === 'confirm') {
-			this.confirmAction(event);
-			if(!event.defaultPrevented) this.close();
+		}
+	}
+
+	handleSubmit = event => {
+		event.preventDefault();
+		this.confirmAction(event);
+		if(!event.keepDialogOpen) this.close();
+	}
+
+	handleSlotKeydown = event => {
+		if(event.key === 'Enter' && this.confirmText) {
+			const target = event.target;
+			if(target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+				event.preventDefault();
+				const form = this.shadowRoot.querySelector('form');
+				if(form) form.requestSubmit();
+			}
 		}
 	}
 
@@ -227,14 +241,15 @@ export default class Dialog extends ShadowComponent {
 	*/
 	render() {
 		return html`
-			<button id="overlay" aria-label="Close the Dialog" @click=${this.handleClick}></button>
+			<button id="overlay" type="button" aria-label="Close the Dialog" @click=${this.handleClick}></button>
 			<div id="wrapper">
 				<k-focus-capture>
-					<div
+					<form
 						id="dialog"
 						role="dialog"
 						aria-modal="true"
 						aria-labelledby="title"
+						@submit=${this.handleSubmit}
 					>
 						<div
 							id="header"
@@ -244,29 +259,29 @@ export default class Dialog extends ShadowComponent {
 								<slot name="title"></slot>
 							</div>
 							${this.closeBtn ? html`
-								<button id="close" @click=${this.handleClick}>
+								<button id="close" type="button" @click=${this.handleClick}>
 									<k-icon name="close"></k-icon>
 								</button>
 							` : ''}
 						</div>
 						<div id="body">
-							<slot></slot>
+							<slot @keydown=${this.handleSlotKeydown}></slot>
 						</div>
 						${this.cancelText || this.confirmText ? html`
 							<div id="footer">
 								${this.cancelText ? html`
-									<button id="cancel" class="${this.cancelClasses}" @click=${this.handleClick}>
+									<button id="cancel" type="button" class="${this.cancelClasses}" @click=${this.handleClick}>
 										${this.cancelText}
 									</button>
 								` : ''}
 								${this.confirmText ? html`
-									<button id="confirm" class="${this.confirmClasses}" @click=${this.handleClick}>
+									<button id="confirm" type="submit" class="${this.confirmClasses}">
 										${this.confirmText}
 									</button>
 								` : ''}
 							</div>
 						` : ''}
-					</div>
+					</form>
 				</k-focus-capture>
 			</div>
 		`;