kempo-css 1.3.12 → 1.3.13

package/AGENTS.md

@@ -0,0 +1,43 @@
+# Code Contribution Guidelines
+
+## Project Structure
+
+ - The actual CSS file (the main file for this project) is at `src/kempo.css`.
+ - All documnentation should be in the `docs/` directory. This directory is used by GitHub as the "GitHub Pages", so all links need to be relative, and there will be a build script which copies all code to the `docs/` directory.
+ - Components used in the docs / theme builder should live within the docs directory directly, as they are not part of the distributed code for this project.
+ - All tests should live in the `tests/` directory. These use the kempo-testing-framework, do not assume they are jest/enszyme or any other popular testing framework, instead read the existing tests or the docs (https://github.com/dustinpoissant/kempo-testing-framework/blob/main/README.md) to understand how these tests work.
+
+### Minimal Comments, Empty Lines, and Spacing
+
+Use minimal comments. Assume readers understand the language. Some exceptions include:
+  - complex logic
+  - anti-patterns
+  - code organization
+
+Do not put random empty lines within code; put them where they make sense for readability, for example:
+  - above and below definitions for functions and classes.
+  - to help break up large sections of logic to be more readable. If there are 100 lines of code with no breaks, it gets hard to read.
+  - above multi-line comments to indicate the comment belongs to the code below
+
+No  empty lines in css.
+
+End each file with an empty line.
+
+End each line with a `;` when possible, even if it is optional.
+
+## Development Workflow
+
+### Local Development Server
+- **DO NOT** start a development server - one is already running
+- Default port: **8083**
+- Base URL: `http://localhost:4048/`
+- Documentation URLs follow the directory/file structure in `docs/`
+- Use this server for all testing and verification
+
+### Testing and Verification
+- **ALWAYS** verify changes using the live documentation on the running server
+- Use Chrome DevTools Protocol (chrome-devtools-mcp) for interactive testing
+- **DO NOT** create one-off test files or framework-less tests
+- Test components in their natural documentation environment
+- Validate both functionality and visual appearance
+- Always add to the changelog after each commit. Assume the next version incrament will be a patch version unless stated otherwise.

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.3.13] - 2026-03-12
+
+### Changed
+- Reorganized files
+- Moved and updated .github/copilot-instructions.md -> AGENTS.md
+
+## [1.3.12] - 2026-03-12
+
+### Changed
+- Updated github workflows
+
 ## [1.3.10] - 2026-02-26
 
 ### Changed

package/docs/components/ThemePropertyInput.js

@@ -1,4 +1,16 @@
-import ShadowComponent from"https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/ShadowComponent.js";import{html,css}from"https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/lit-all.min.js";export default class ThemePropertyInput extends ShadowComponent{static properties={propName:{type:String,attribute:"prop-name"},value:{type:String},availableProperties:{type:Array,attribute:"available-properties"},mode:{type:String},initialColor:{type:String,attribute:"initial-color"}};static styles=css`
+import ShadowComponent from 'https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/ShadowComponent.js';
+import { html, css } from 'https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/lit-all.min.js';
+
+export default class ThemePropertyInput extends ShadowComponent {
+  static properties = {
+    propName: { type: String, attribute: 'prop-name' },
+    value: { type: String },
+    availableProperties: { type: Array, attribute: 'available-properties' },
+    mode: { type: String },
+    initialColor: { type: String, attribute: 'initial-color' }
+  };
+
+  static styles = css`
     :host {
       display: block;
     }
@@ -18,7 +30,95 @@ import ShadowComponent from"https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/co
     .value-input {
       flex: 1;
     }
-  `;constructor(){super(),this.propName="",this.value="",this.availableProperties=[],this.mode="color",this.initialColor=""}connectedCallback(){super.connectedCallback(),this.value?.startsWith("var(")&&(this.mode="var")}firstUpdated(){this.attachColorPickerListener()}updated(e){super.updated?.(e),this.attachColorPickerListener()}attachColorPickerListener(){if("color"===this.mode){const e=this.shadowRoot?.querySelector("k-color-picker");e&&!e._hasChangeListener&&(e._hasChangeListener=!0,e.addEventListener("change",this.handleColorChange),e.addEventListener("input",this.handleColorChange))}}handleModeChange=e=>{this.mode=e.target.value,"var"!==this.mode||this.value.startsWith("var(")?"color"===this.mode&&this.value.startsWith("var(")&&(this.value=this.initialColor||"#000000"):this.value=this.availableProperties[0]?`var(${this.availableProperties[0]})`:"",this.emitChange()};handleVarInput=e=>{const t=e.target.value;this.value=t.startsWith("var(")?t:`var(${t})`,this.emitChange()};handleColorChange=e=>{this.value=e.target.value,this.emitChange()};emitChange(){this.dispatchEvent(new CustomEvent("value-change",{detail:{propName:this.propName,value:this.value},bubbles:!0,composed:!0}))}render(){const e=`${this.propName}-datalist`,t=this.value?.startsWith("var(")?this.value.slice(4,-1).trim():"";return html`
+  `;
+
+  constructor() {
+    super();
+    this.propName = '';
+    this.value = '';
+    this.availableProperties = [];
+    this.mode = 'color';
+    this.initialColor = '';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    
+    if(this.value?.startsWith('var(')) {
+      this.mode = 'var';
+    }
+  }
+
+  firstUpdated() {
+    this.attachColorPickerListener();
+  }
+
+  updated(changedProperties) {
+    super.updated?.(changedProperties);
+    this.attachColorPickerListener();
+  }
+
+  attachColorPickerListener() {
+    if(this.mode === 'color') {
+      const colorPicker = this.shadowRoot?.querySelector('k-color-picker');
+      if(colorPicker && !colorPicker._hasChangeListener) {
+        colorPicker._hasChangeListener = true;
+        colorPicker.addEventListener('change', this.handleColorChange);
+        colorPicker.addEventListener('input', this.handleColorChange);
+      }
+    }
+  }
+
+  /*
+    Event Handlers
+  */
+
+  handleModeChange = (e) => {
+    this.mode = e.target.value;
+    
+    if(this.mode === 'var' && !this.value.startsWith('var(')) {
+      this.value = this.availableProperties[0] ? `var(${this.availableProperties[0]})` : '';
+    } else if(this.mode === 'color' && this.value.startsWith('var(')) {
+      this.value = this.initialColor || '#000000';
+    }
+    
+    this.emitChange();
+  };
+
+  handleVarInput = (e) => {
+    const varName = e.target.value;
+    this.value = varName.startsWith('var(') ? varName : `var(${varName})`;
+    this.emitChange();
+  };
+
+  handleColorChange = (e) => {
+    this.value = e.target.value;
+    this.emitChange();
+  };
+
+  /*
+    Utility Functions
+  */
+
+  emitChange() {
+    this.dispatchEvent(new CustomEvent('value-change', {
+      detail: { propName: this.propName, value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  /*
+    Rendering
+  */
+
+  render() {
+    const datalistId = `${this.propName}-datalist`;
+    const varName = this.value?.startsWith('var(') 
+      ? this.value.slice(4, -1).trim() 
+      : '';
+
+    return html`
       <label>${this.propName}</label>
       <div class="input-wrapper">
         <select class="mode-select" .value=${this.mode} @change=${this.handleModeChange}>
@@ -26,22 +126,29 @@ import ShadowComponent from"https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/co
           <option value="color">Color</option>
         </select>
 
-        ${"var"===this.mode?html`
+        ${this.mode === 'var' 
+          ? html`
             <input 
               class="value-input"
-              list=${e}
-              .value=${t}
+              list=${datalistId}
+              .value=${varName}
               @input=${this.handleVarInput}
               placeholder="--property-name"
             />
-            <datalist id=${e}>
-              ${this.availableProperties.map(e=>html`<option value=${e}></option>`)}
+            <datalist id=${datalistId}>
+              ${this.availableProperties.map(prop => html`<option value=${prop}></option>`)}
             </datalist>
-          `:html`
+          `
+          : html`
             <k-color-picker 
               class="value-input"
               value=${this.value}
             ></k-color-picker>
-          `}
+          `
+        }
       </div>
-    `}}customElements.define("k-theme-property-input",ThemePropertyInput);
+    `;
+  }
+}
+
+customElements.define('k-theme-property-input', ThemePropertyInput);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-css",
-  "version": "1.3.12",
+  "version": "1.3.13",
   "description": "",
   "type": "module",
   "main": "scripts/build.js",

package/.github/copilot-instructions.md

@@ -1,165 +0,0 @@
-# Code Contribution Guidelines
-
-## Project Structure
-
- - All code should be in the `src/` directory, with the exception of npm scripts.
- - All components should be in the `src/components/` directory.
- - All utility function module files should be in the `src/utils/` directory.
- - All documnentation should be in the `docs/` directory. This directory is used by GitHub as the "GitHub Pages", so all links need to be relative, and there will be a build script which copies all code to the `docs/` directory.
-
-## Coding Style Guidelines
-
-### Code Organization
-Use multi-line comments to separate code into logical sections. Group related functionality together.
-  - Example: In Lit components, group lifecycle callbacks, event handlers, public methods, utility functions, and rendering logic separately.
-
-```javascript
-/*
-  Lifecycle Callbacks
-*/
-```
-
-### Avoid single-use variables/functions
-Avoid defining a variable or function to only use it once; inline the logic where needed. Some exceptions include:
-  - recursion
-  - scope encapsulation (IIFE)
-  - context changes
-
-### Minimal Comments, Empty Lines, and Spacing
-
-Use minimal comments. Assume readers understand the language. Some exceptions include:
-  - complex logic
-  - anti-patterns
-  - code organization
-
-Do not put random empty lines within code; put them where they make sense for readability, for example:
-  - above and below definitions for functions and classes.
-  - to help break up large sections of logic to be more readable. If there are 100 lines of code with no breaks, it gets hard to read.
-  - above multi-line comments to indicate the comment belongs to the code below
-
-No  empty lines in css.
-
-End each file with an empty line.
-
-End each line with a `;` when possible, even if it is optional.
-
-Avoid unnecessary spacing, for example:
-  - after the word `if`
-  - within parentheses for conditional statements
-
-```javascript
-let count = 1;
-
-const incrementOdd = (n) => {
-  if(n % 2 !== 0){
-    return n++;
-  }
-  return n;
-};
-
-count = incrementOdd(count);
-```
-
-### Prefer Arrow Functions
-Prefer the use of arrow functions when possible, especially for class methods to avoid binding. Use normal functions if needed for preserving the proper context.
- - For very basic logic, use implicit returns
- - If there is a single parameter, omit the parentheses.
-```javascript
-const addOne = n => n + 1;
-```
-
-### Module Exports
-  - If a module has only one export, use the "default" export, not a named export.
-    - Do not declare the default export as a const or give it a name; just export the value.
-
-```javascript
-export default (n) => n + 1;
-```
-  - If a module has multiple exports, use named exports and do not use a "default" export.
-
-### Code Reuse
-Create utility functions for shared logic.
-  - If the shared logic is used in a single file, define a utility function in that file.
-  - If the shared logic is used in multiple files, create a utility function module file in `src/utils/`.
-
-### Naming
-Do not prefix identifiers with underscores.
-  - Never use leading underscores (`_`) for variable, property, method, or function names.
-  - Use clear, descriptive names without prefixes.
-  - When true privacy is needed inside classes, prefer native JavaScript private fields (e.g., `#myField`) instead of simulated privacy via underscores.
-
-## Components
-
-### Base Component Architecture
-
-The project provides three base components for different rendering strategies. Choose the appropriate base component and extend it:
-
-#### ShadowComponent
-For components that need shadow DOM encapsulation and automatic `/kempo.css` stylesheet injection.
-
-```javascript
-import ShadowComponent from './ShadowComponent.js';
-
-export default class MyComponent extends ShadowComponent {
-  render() {
-    return html`<p>Shadow DOM content with scoped styles</p>`;
-  }
-}
-```
-
-#### LightComponent  
-For components that render directly to light DOM without shadow DOM encapsulation.
-
-```javascript
-import LightComponent from './LightComponent.js';
-
-export default class MyComponent extends LightComponent {
-  renderLightDom() {
-    return html`<p>Light DOM content</p>`;
-  }
-}
-```
-
-#### HybridComponent
-For components that need both shadow DOM (with automatic `/kempo.css`) and light DOM rendering.
-
-```javascript
-import HybridComponent from './HybridComponent.js';
-
-export default class MyComponent extends HybridComponent {
-  render() {
-    return html`<p>Shadow DOM content</p>`;
-  }
-  
-  renderLightDom() {
-    return html`<p>Light DOM content alongside natural children</p>`;
-  }
-}
-```
-
-**Important:** Always call `super.updated()` when overriding the `updated()` method in LightComponent or HybridComponent to ensure proper rendering.
-
-### Component Architecture and Communication
-
-- Use methods to cause actions; do not emit events to trigger logic. Events are for notifying that something already happened.
-  - Prefer `el.closest('ktf-test-framework')?.enqueueSuite({...})` over firing an `enqueue` event.
-
-- Wrap dependent components inside a parent `ktf-test-framework` element. Children find it via `closest('ktf-test-framework')` and call its methods. The framework can query its subtree to orchestrate children.
-
-- Avoid `window` globals and global custom events for coordination. If broadcast is needed, scope events to the framework element; reserve window events for global, non-visual concerns (e.g., settings changes).
-
-## Development Workflow
-
-### Local Development Server
-- **DO NOT** start a development server - one is already running
-- Default port: **8083**
-- Base URL: `http://localhost:4048/`
-- Documentation URLs follow the directory/file structure in `docs/` (e.g., `docs/components/color-picker.html` → `http://localhost:8083/components/color-picker.html`)
-- Use this server for all testing and verification
-
-### Testing and Verification
-- **ALWAYS** verify changes using the live documentation on the running server
-- Use Chrome DevTools Protocol (chrome-devtools-mcp) for interactive testing
-- **DO NOT** create one-off test files or framework-less tests
-- Test components in their natural documentation environment
-- Validate both functionality and visual appearance

package/src/components/ThemePropertyInput.js

@@ -1,154 +0,0 @@
-import ShadowComponent from 'https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/ShadowComponent.js';
-import { html, css } from 'https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/lit-all.min.js';
-
-export default class ThemePropertyInput extends ShadowComponent {
-  static properties = {
-    propName: { type: String, attribute: 'prop-name' },
-    value: { type: String },
-    availableProperties: { type: Array, attribute: 'available-properties' },
-    mode: { type: String },
-    initialColor: { type: String, attribute: 'initial-color' }
-  };
-
-  static styles = css`
-    :host {
-      display: block;
-    }
-    label {
-      display: block;
-      margin-bottom: 0.25rem;
-    }
-    .input-wrapper {
-      display: flex;
-      gap: 0.5rem;
-      align-items: center;
-    }
-    .mode-select {
-      width: 100px;
-      flex-shrink: 0;
-    }
-    .value-input {
-      flex: 1;
-    }
-  `;
-
-  constructor() {
-    super();
-    this.propName = '';
-    this.value = '';
-    this.availableProperties = [];
-    this.mode = 'color';
-    this.initialColor = '';
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    
-    if(this.value?.startsWith('var(')) {
-      this.mode = 'var';
-    }
-  }
-
-  firstUpdated() {
-    this.attachColorPickerListener();
-  }
-
-  updated(changedProperties) {
-    super.updated?.(changedProperties);
-    this.attachColorPickerListener();
-  }
-
-  attachColorPickerListener() {
-    if(this.mode === 'color') {
-      const colorPicker = this.shadowRoot?.querySelector('k-color-picker');
-      if(colorPicker && !colorPicker._hasChangeListener) {
-        colorPicker._hasChangeListener = true;
-        colorPicker.addEventListener('change', this.handleColorChange);
-        colorPicker.addEventListener('input', this.handleColorChange);
-      }
-    }
-  }
-
-  /*
-    Event Handlers
-  */
-
-  handleModeChange = (e) => {
-    this.mode = e.target.value;
-    
-    if(this.mode === 'var' && !this.value.startsWith('var(')) {
-      this.value = this.availableProperties[0] ? `var(${this.availableProperties[0]})` : '';
-    } else if(this.mode === 'color' && this.value.startsWith('var(')) {
-      this.value = this.initialColor || '#000000';
-    }
-    
-    this.emitChange();
-  };
-
-  handleVarInput = (e) => {
-    const varName = e.target.value;
-    this.value = varName.startsWith('var(') ? varName : `var(${varName})`;
-    this.emitChange();
-  };
-
-  handleColorChange = (e) => {
-    this.value = e.target.value;
-    this.emitChange();
-  };
-
-  /*
-    Utility Functions
-  */
-
-  emitChange() {
-    this.dispatchEvent(new CustomEvent('value-change', {
-      detail: { propName: this.propName, value: this.value },
-      bubbles: true,
-      composed: true
-    }));
-  }
-
-  /*
-    Rendering
-  */
-
-  render() {
-    const datalistId = `${this.propName}-datalist`;
-    const varName = this.value?.startsWith('var(') 
-      ? this.value.slice(4, -1).trim() 
-      : '';
-
-    return html`
-      <label>${this.propName}</label>
-      <div class="input-wrapper">
-        <select class="mode-select" .value=${this.mode} @change=${this.handleModeChange}>
-          <option value="var">Var</option>
-          <option value="color">Color</option>
-        </select>
-
-        ${this.mode === 'var' 
-          ? html`
-            <input 
-              class="value-input"
-              list=${datalistId}
-              .value=${varName}
-              @input=${this.handleVarInput}
-              placeholder="--property-name"
-            />
-            <datalist id=${datalistId}>
-              ${this.availableProperties.map(prop => html`<option value=${prop}></option>`)}
-            </datalist>
-          `
-          : html`
-            <k-color-picker 
-              class="value-input"
-              value=${this.value}
-            ></k-color-picker>
-          `
-        }
-      </div>
-    `;
-  }
-}
-
-customElements.define('k-theme-property-input', ThemePropertyInput);