kempo-ui 0.2.2 → 0.2.4

package/docs/nav.inc.html

@@ -25,6 +25,7 @@
         <k-filter-item filter-keywords="card components"><a href="./components/card.html">Card<br><small>Component</small></a></k-filter-item>
         <k-filter-item filter-keywords="color picker colorpicker components"><a href="./components/color-picker.html">Color Picker<br><small>Component</small></a></k-filter-item>
         <k-filter-item filter-keywords="content slider components"><a href="./components/content-slider.html">Content Slider<br><small>Component</small></a></k-filter-item>
+        <k-filter-item filter-keywords="context state global components"><a href="./components/context.html">Context<br><small>Component</small></a></k-filter-item>
         <k-filter-item filter-keywords="dialog modal popup components"><a href="./components/dialog.html">Dialog<br><small>Component</small></a></k-filter-item>
         <k-filter-item filter-keywords="dropdown select components"><a href="./components/dropdown.html">Dropdown<br><small>Component</small></a></k-filter-item>
         <k-filter-item filter-keywords="filter list filterlist components"><a href="./components/filter-list.html">Filter List<br><small>Component</small></a></k-filter-item>
@@ -80,7 +81,8 @@
     </div>
   </div>
   <div class="flex"></div>
-  <a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icont></a>
+  <a href="https://github.com/dustinpoissant/kempo-ui?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank" target="_blank"><k-icon name="license"></k-icont></a>
+  <a href="https://www.npmjs.com/package/kempo-ui" target="_blank"><k-icon name="npm"></k-icont></a>
   <a href="https://github.com/dustinpoissant/kempo-ui" target="_blank"><k-icon name="github-mark"></k-icont></a>
   <k-theme-switcher></k-theme-switcher>
 </k-nav>
@@ -103,6 +105,7 @@
       <a href="./components/card.html">Card</a>
       <a href="./components/color-picker.html">ColorPicker</a>
       <a href="./components/content-slider.html">Content Slider</a>
+      <a href="./components/context.html">Context</a>
       <a href="./components/dialog.html">Dialog</a>
       <a href="./components/dropdown.html">Dropdown</a>
       <a href="./components/filter-list.html">Filter List</a>

package/docs/src/components/Context.js

@@ -0,0 +1 @@
+import{html}from"../lit-all.min.js";import LightComponent from"./LightComponent.js";export default class Context extends LightComponent{static properties={data:{type:String,reflect:!0}};constructor(){super(),this.data="{}"}connectedCallback(){super.connectedCallback(),this.style.display="contents"}set(t,e){const s=JSON.parse(this.data||"{}"),a=!(t in s),n=s[t];s[t]=e,this.data=JSON.stringify(s),this.dispatchEvent(new CustomEvent(a?"context:create":"context:set",{detail:a?{key:t,value:e}:{key:t,value:e,oldValue:n},bubbles:!0,composed:!0}))}get(t){return JSON.parse(this.data||"{}")[t]}has(t){return t in JSON.parse(this.data||"{}")}delete(t){const e=JSON.parse(this.data||"{}");if(!(t in e))return;const s=e[t];delete e[t],this.data=JSON.stringify(e),this.dispatchEvent(new CustomEvent("context:delete",{detail:{key:t,value:s},bubbles:!0,composed:!0}))}clear(){for(const t of Object.keys(JSON.parse(this.data||"{}")))this.delete(t)}getData(){return JSON.parse(this.data||"{}")}renderLightDom(){return html``}}customElements.define("k-context",Context);

package/docs/src/components/Import.js

@@ -1 +1 @@
-import LightComponent from"./LightComponent.js";import{html,render,unsafeHTML}from"../lit-all.min.js";export default class Import extends LightComponent{static properties={src:{type:String,reflect:!0},content:{type:String},scripts:{type:Array}};static replacements={};constructor(){super(),this.src="",this.content="",this.scripts=[]}updated(t){super.updated(),t.has("src")&&this.fetch(),t.has("content")&&this.scripts.length>0&&setTimeout(()=>this.executeScripts(),0)}async fetch(){let t=await(await fetch(this.src)).text();for(const[e,r]of Object.entries(Import.replacements))t=t.replace(new RegExp(`%%${e}%%`,"g"),r);const e=(new DOMParser).parseFromString(t,"text/html"),r=e.querySelectorAll("script");this.scripts=Array.from(r).map(t=>({src:t.src,text:t.textContent,type:t.type||"text/javascript"})),r.forEach(t=>t.remove()),this.content=e.body?e.body.innerHTML:t}executeScripts(){this.scripts.forEach(t=>{const e=document.createElement("script");e.type=t.type,t.src?e.src=t.src:t.text&&(e.textContent=t.text),document.head.appendChild(e)}),this.scripts=[]}renderLightDom(){return this.content?html`${unsafeHTML(this.content)}`:html``}}window.customElements.define("k-import",Import);
+import LightComponent from"./LightComponent.js";import{html,render,unsafeHTML}from"../lit-all.min.js";export default class Import extends LightComponent{static properties={src:{type:String,reflect:!0},content:{type:String},scripts:{type:Array}};static replacements={};constructor(){super(),this.src="",this.content="",this.scripts=[]}updated(t){super.updated(),t.has("src")&&(void 0===t.get("src")&&""===this.src||this.dispatchEvent(new CustomEvent("src-change",{detail:{src:this.src},bubbles:!0,composed:!0})),this.fetch()),t.has("content")&&this.content&&setTimeout(()=>{this.scripts.length>0&&this.executeScripts(),this.dispatchEvent(new CustomEvent("content-rendered",{bubbles:!0,composed:!0}))},0)}async fetch(){if(!this.src)return;this.dispatchEvent(new CustomEvent("fetch-start",{detail:{src:this.src},bubbles:!0,composed:!0}));const t=await fetch(this.src);this.dispatchEvent(new CustomEvent("fetch-response",{detail:{src:this.src,status:t.status},bubbles:!0,composed:!0}));let e=await t.text();for(const[t,s]of Object.entries(Import.replacements))e=e.replace(new RegExp(`%%${t}%%`,"g"),s);const s=(new DOMParser).parseFromString(e,"text/html"),r=s.querySelectorAll("script");this.scripts=Array.from(r).map(t=>({src:t.src,text:t.textContent,type:t.type||"text/javascript"})),r.forEach(t=>t.remove()),this.content=s.body?s.body.innerHTML:e}executeScripts(){this.scripts.forEach(t=>{const e=document.createElement("script");e.type=t.type,t.src?e.src=t.src:t.text&&(e.textContent=t.text),document.head.appendChild(e)}),this.scripts=[]}renderLightDom(){return this.content?html`${unsafeHTML(this.content)}`:html``}}window.customElements.define("k-import",Import);

package/docs/utils/elevation.html

@@ -50,7 +50,8 @@
     </ul>
 
     <h3 id="levels"><a href="#levels" class="no-link">Elevation Levels</a></h3>
-    <table class="mb">
+    <div class="table-wrapper mb">
+    <table>
       <thead>
         <tr>
           <th>Level</th>
@@ -72,10 +73,12 @@
         <tr><td>10</td><td>100</td><td><em>Reserved — use only when absolutely necessary</em></td></tr>
       </tbody>
     </table>
+    </div>
 
     <h3 id="components"><a href="#components" class="no-link">Component Assignments</a></h3>
     <p>Every Kempo UI component that uses <code>position: fixed</code> is assigned an elevation level:</p>
-    <table class="mb">
+    <div class="table-wrapper mb">
+    <table>
       <thead>
         <tr>
           <th>Level</th>
@@ -123,6 +126,7 @@
         </tr>
       </tbody>
     </table>
+    </div>
     <p>
       The <strong>Aside</strong> component uses two different levels depending on its <code>main</code> attribute.
       When <code>main="push"</code>, it shifts the page layout and should sit <em>below</em> your site navbar (level 3).

package/icons/npm.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"/></svg>

package/llm.txt

@@ -57,6 +57,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-card>` | `Card.js` | Bordered container; optional `label` attribute | [card.html](https://dustinpoissant.github.io/kempo-ui/components/card.html) |
 | `<k-color-picker>` | `ColorPicker.js` | Full color picker (hex, rgb, hsl, hsv, alpha); `value` property | [color-picker.html](https://dustinpoissant.github.io/kempo-ui/components/color-picker.html) |
 | `<k-content-slider>` | `ContentSlider.js` | Swipeable carousel | [content-slider.html](https://dustinpoissant.github.io/kempo-ui/components/content-slider.html) |
+| `<k-context>` | `Context.js` | Non-rendering state container; `set(key,value)`, `get(key)`, `delete(key)`, `clear()`, `getData()`; fires `context:create`, `context:set`, `context:delete` | [context.html](https://dustinpoissant.github.io/kempo-ui/components/context.html) |
 | `<k-dialog>` | `Dialog.js` | Modal dialog with focus trapping; call `.open()` / `.close()` | [dialog.html](https://dustinpoissant.github.io/kempo-ui/components/dialog.html) |
 | `<k-dropdown>` | `Dropdown.js` | Action menu with keyboard navigation | [dropdown.html](https://dustinpoissant.github.io/kempo-ui/components/dropdown.html) |
 | `<k-filter-list>` `<k-filter-item>` | `FilterList.js` `FilterItem.js` | Filter/search list; items have `filter` attribute with keywords | [filter-list.html](https://dustinpoissant.github.io/kempo-ui/components/filter-list.html) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/Context.js

@@ -0,0 +1,84 @@
+/*
+  Context Component
+
+  A non-rendering state container for sharing data between sibling and descendant
+  components, similar in purpose to React's useContext. Place it as an ancestor
+  of components that need shared state; children locate it via closest('k-context').
+*/
+import { html } from '../lit-all.min.js';
+import LightComponent from './LightComponent.js';
+
+export default class Context extends LightComponent {
+  static properties = {
+    data: { type: String, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.data = '{}';
+  }
+
+  /*
+    Lifecycle Callbacks
+  */
+  connectedCallback() {
+    super.connectedCallback();
+    this.style.display = 'contents';
+  }
+
+  /*
+    Public Methods
+  */
+  set(key, value) {
+    const obj = JSON.parse(this.data || '{}');
+    const isNew = !(key in obj);
+    const oldValue = obj[key];
+    obj[key] = value;
+    this.data = JSON.stringify(obj);
+    this.dispatchEvent(new CustomEvent(isNew ? 'context:create' : 'context:set', {
+      detail: isNew ? { key, value } : { key, value, oldValue },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  get(key) {
+    return JSON.parse(this.data || '{}')[key];
+  }
+
+  has(key) {
+    return key in JSON.parse(this.data || '{}');
+  }
+
+  delete(key) {
+    const obj = JSON.parse(this.data || '{}');
+    if(!(key in obj)) return;
+    const value = obj[key];
+    delete obj[key];
+    this.data = JSON.stringify(obj);
+    this.dispatchEvent(new CustomEvent('context:delete', {
+      detail: { key, value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  clear() {
+    for(const key of Object.keys(JSON.parse(this.data || '{}'))){
+      this.delete(key);
+    }
+  }
+
+  getData() {
+    return JSON.parse(this.data || '{}');
+  }
+
+  /*
+    Rendering
+  */
+  renderLightDom() {
+    return html``;
+  }
+}
+
+customElements.define('k-context', Context);

package/src/components/Import.js

@@ -29,14 +29,18 @@ export default class Import extends LightComponent {
 	*/
 	updated(changedProperties){
 		super.updated(); // Important: call super for LightComponent
-		
+
 		if(changedProperties.has('src')){
+			if(changedProperties.get('src') !== undefined || this.src !== '')
+				this.dispatchEvent(new CustomEvent('src-change', { detail: { src: this.src }, bubbles: true, composed: true }));
 			this.fetch();
 		}
-		
-		if(changedProperties.has('content') && this.scripts.length > 0){
-			// Execute scripts after DOM content is rendered
-			setTimeout(() => this.executeScripts(), 0);
+
+		if(changedProperties.has('content') && this.content){
+			setTimeout(() => {
+				if(this.scripts.length > 0) this.executeScripts();
+				this.dispatchEvent(new CustomEvent('content-rendered', { bubbles: true, composed: true }));
+			}, 0);
 		}
 	}
 
@@ -44,7 +48,11 @@ export default class Import extends LightComponent {
 		Methods
 	*/
 	async fetch(){
-		let contents = await (await fetch(this.src)).text();
+		if(!this.src) return;
+		this.dispatchEvent(new CustomEvent('fetch-start', { detail: { src: this.src }, bubbles: true, composed: true }));
+		const response = await fetch(this.src);
+		this.dispatchEvent(new CustomEvent('fetch-response', { detail: { src: this.src, status: response.status }, bubbles: true, composed: true }));
+		let contents = await response.text();
 		for (const [name, value] of Object.entries(Import.replacements)) {
 			contents = contents.replace(new RegExp(`%%${name}%%`, 'g'), value);
 		}
@@ -82,7 +90,7 @@ export default class Import extends LightComponent {
 			// Append to head to execute
 			document.head.appendChild(scriptElement);
 		});
-		
+
 		// Clear scripts after execution to avoid re-execution
 		this.scripts = [];
 	}

package/tests/components/Context.browser-test.js

@@ -0,0 +1,238 @@
+import Context from '../../src/components/Context.js';
+import LightComponent from '../../src/components/LightComponent.js';
+
+const createContext = async () => {
+  const container = document.createElement('div');
+  container.innerHTML = `<k-context></k-context>`;
+  document.body.appendChild(container);
+  const el = container.querySelector('k-context');
+  await el.updateComplete;
+  return { container, el };
+};
+
+const cleanup = (container) => {
+  if(container && container.parentNode){
+    container.parentNode.removeChild(container);
+  }
+};
+
+export default {
+  /*
+    Element Creation
+  */
+  'should create context element': async ({pass, fail}) => {
+    const { container, el } = await createContext();
+    if(!(el instanceof Context)){
+      cleanup(container);
+      return fail('Element should be instance of Context');
+    }
+    cleanup(container);
+    pass('Context element created correctly');
+  },
+
+  'should extend LightComponent': async ({pass, fail}) => {
+    const { container, el } = await createContext();
+    if(!(el instanceof LightComponent)){
+      cleanup(container);
+      return fail('Context should extend LightComponent');
+    }
+    cleanup(container);
+    pass('Context extends LightComponent');
+  },
+
+  'should have display contents': async ({pass, fail}) => {
+    const { container, el } = await createContext();
+    const display = getComputedStyle(el).display;
+    if(display !== 'contents'){
+      cleanup(container);
+      return fail(`Expected display to be contents, got "${display}"`);
+    }
+    cleanup(container);
+    pass('Context element has display contents');
+  },
+
+  'should have default data of \'{}\'': async ({pass, fail}) => {
+    const { container, el } = await createContext();
+    if(el.data !== '{}'){
+      cleanup(container);
+      return fail(`Expected data to be '{}', got '${el.data}'`);
+    }
+    cleanup(container);
+    pass('Default data is \'{}\'');
+  },
+
+  'data attribute reflects JSON state': async ({pass, fail}) => {
+    const { container, el } = await createContext();
+    el.set('count', 5);
+    await el.updateComplete;
+    let parsed;
+    try { parsed = JSON.parse(el.getAttribute('data')); } catch(e) {
+      cleanup(container);
+      return fail('data attribute is not valid JSON');
+    }
+    if(parsed.count !== 5){
+      cleanup(container);
+      return fail(`Expected data attribute to contain count:5, got ${el.getAttribute('data')}`);
+    }
+    cleanup(container);
+    pass('data attribute reflects JSON state');
+  },
+
+  /*
+    set() and get()
+  */
+  'should set and get a value': async ({pass, fail}) => {
+    const { container, el } = await createContext();
+    el.set('user', { name: 'Alice' });
+    const value = el.get('user');
+    if(!value || value.name !== 'Alice'){
+      cleanup(container);
+      return fail(`Expected {name:'Alice'}, got ${JSON.stringify(value)}`);
+    }
+    cleanup(container);
+    pass('set and get work correctly');
+  },
+
+  /*
+    has()
+  */
+  'has() returns true for existing key': async ({pass, fail}) => {
+    const { container, el } = await createContext();
+    el.set('theme', 'dark');
+    if(!el.has('theme')){
+      cleanup(container);
+      return fail('has() should return true for existing key');
+    }
+    cleanup(container);
+    pass('has() returns true for existing key');
+  },
+
+  'has() returns false for missing key': async ({pass, fail}) => {
+    const { container, el } = await createContext();
+    if(el.has('missing')){
+      cleanup(container);
+      return fail('has() should return false for missing key');
+    }
+    cleanup(container);
+    pass('has() returns false for missing key');
+  },
+
+  /*
+    Events
+  */
+  'set() fires context:create for new key': async ({pass, fail}) => {
+    const { container, el } = await createContext();
+    let received = null;
+    el.addEventListener('context:create', e => { received = e.detail; });
+    el.set('count', 0);
+    if(!received || received.key !== 'count' || received.value !== 0){
+      cleanup(container);
+      return fail(`Expected context:create with {key:'count',value:0}, got ${JSON.stringify(received)}`);
+    }
+    cleanup(container);
+    pass('context:create fired for new key');
+  },
+
+  'set() fires context:set for existing key': async ({pass, fail}) => {
+    const { container, el } = await createContext();
+    el.set('count', 0);
+    let received = null;
+    el.addEventListener('context:set', e => { received = e.detail; });
+    el.set('count', 1);
+    if(!received || received.key !== 'count' || received.value !== 1 || received.oldValue !== 0){
+      cleanup(container);
+      return fail(`Expected context:set with {key:'count',value:1,oldValue:0}, got ${JSON.stringify(received)}`);
+    }
+    cleanup(container);
+    pass('context:set fired for existing key update');
+  },
+
+  'set() does not fire context:create for second set': async ({pass, fail}) => {
+    const { container, el } = await createContext();
+    el.set('count', 0);
+    let createFired = false;
+    el.addEventListener('context:create', () => { createFired = true; });
+    el.set('count', 1);
+    if(createFired){
+      cleanup(container);
+      return fail('context:create should not fire when updating existing key');
+    }
+    cleanup(container);
+    pass('context:create not fired on update');
+  },
+
+  'delete() removes a key and fires context:delete': async ({pass, fail}) => {
+    const { container, el } = await createContext();
+    el.set('temp', 42);
+    let received = null;
+    el.addEventListener('context:delete', e => { received = e.detail; });
+    el.delete('temp');
+    if(el.has('temp')){
+      cleanup(container);
+      return fail('Key should be removed after delete()');
+    }
+    if(!received || received.key !== 'temp' || received.value !== 42){
+      cleanup(container);
+      return fail(`Expected context:delete with {key:'temp',value:42}, got ${JSON.stringify(received)}`);
+    }
+    cleanup(container);
+    pass('delete() removes key and fires context:delete');
+  },
+
+  'delete() on missing key does nothing': async ({pass, fail}) => {
+    const { container, el } = await createContext();
+    let fired = false;
+    el.addEventListener('context:delete', () => { fired = true; });
+    el.delete('nonexistent');
+    if(fired){
+      cleanup(container);
+      return fail('context:delete should not fire for missing key');
+    }
+    cleanup(container);
+    pass('delete() on missing key is a no-op');
+  },
+
+  /*
+    clear()
+  */
+  'clear() removes all keys and fires context:delete for each': async ({pass, fail}) => {
+    const { container, el } = await createContext();
+    el.set('a', 1);
+    el.set('b', 2);
+    const deleted = [];
+    el.addEventListener('context:delete', e => deleted.push(e.detail.key));
+    el.clear();
+    if(Object.keys(el.getData()).length !== 0){
+      cleanup(container);
+      return fail('getData() should return empty object after clear()');
+    }
+    if(deleted.length !== 2 || !deleted.includes('a') || !deleted.includes('b')){
+      cleanup(container);
+      return fail(`Expected context:delete for both keys, got: ${JSON.stringify(deleted)}`);
+    }
+    cleanup(container);
+    pass('clear() removes all keys');
+  },
+
+  /*
+    getData()
+  */
+  'getData() returns a copy of all data': async ({pass, fail}) => {
+    const { container, el } = await createContext();
+    el.set('x', 10);
+    el.set('y', 20);
+    const data = el.getData();
+    if(data.x !== 10 || data.y !== 20){
+      cleanup(container);
+      return fail(`Expected {x:10,y:20}, got ${JSON.stringify(data)}`);
+    }
+    // ensure it's a copy
+    data.x = 999;
+    if(el.get('x') !== 10){
+      cleanup(container);
+      return fail('getData() should return a copy, not a reference');
+    }
+    cleanup(container);
+    pass('getData() returns a shallow copy of all data');
+  }
+};

package/tests/components/Import.browser-test.js

@@ -308,5 +308,217 @@ export default {
 		// LightComponent sets display: contents
 		cleanup(container);
 		pass('Import has appropriate display');
+	},
+
+	/*
+		Event Tests
+	*/
+	'should not dispatch src-change event on initialization with empty src': async ({pass, fail}) => {
+		let eventFired = false;
+		const container = document.createElement('div');
+		const importEl = document.createElement('k-import');
+		importEl.addEventListener('src-change', () => { eventFired = true; });
+		container.appendChild(importEl);
+		document.body.appendChild(container);
+		await importEl.updateComplete;
+
+		if(eventFired){
+			cleanup(container);
+			return fail('src-change should not fire during initialization with empty src');
+		}
+		cleanup(container);
+		pass('src-change not fired on initialization with empty src');
+	},
+
+	'should dispatch src-change event when src is set': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		let eventFired = false;
+		let eventDetail = null;
+		importEl.addEventListener('src-change', e => {
+			eventFired = true;
+			eventDetail = e.detail;
+		});
+
+		importEl.src = '/some-file.html';
+		await importEl.updateComplete;
+
+		if(!eventFired){
+			cleanup(container);
+			return fail('src-change event should be fired when src changes');
+		}
+		if(eventDetail.src !== '/some-file.html'){
+			cleanup(container);
+			return fail(`Expected detail.src "/some-file.html", got "${eventDetail.src}"`);
+		}
+		cleanup(container);
+		pass('src-change event dispatched with correct detail');
+	},
+
+	'src-change event should bubble': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		let bubbled = false;
+		container.addEventListener('src-change', () => { bubbled = true; });
+
+		importEl.src = '/bubble-test.html';
+		await importEl.updateComplete;
+
+		if(!bubbled){
+			cleanup(container);
+			return fail('src-change event should bubble');
+		}
+		cleanup(container);
+		pass('src-change event bubbles');
+	},
+
+	'should dispatch fetch-start event when fetch begins': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		const originalFetch = window.fetch;
+		let fetchStartFired = false;
+		let fetchStartDetail = null;
+
+		importEl.addEventListener('fetch-start', e => {
+			fetchStartFired = true;
+			fetchStartDetail = e.detail;
+		});
+
+		window.fetch = () => Promise.resolve({ status: 200, text: () => Promise.resolve('<p>test</p>') });
+
+		importEl.src = '/mock-file.html';
+		await importEl.updateComplete;
+		await new Promise(resolve => setTimeout(resolve, 50));
+
+		window.fetch = originalFetch;
+
+		if(!fetchStartFired){
+			cleanup(container);
+			return fail('fetch-start event should be fired');
+		}
+		if(fetchStartDetail.src !== '/mock-file.html'){
+			cleanup(container);
+			return fail(`Expected detail.src "/mock-file.html", got "${fetchStartDetail.src}"`);
+		}
+		cleanup(container);
+		pass('fetch-start event dispatched with correct detail');
+	},
+
+	'should dispatch fetch-response event after response is received': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		const originalFetch = window.fetch;
+		let fetchResponseFired = false;
+		let fetchResponseDetail = null;
+
+		importEl.addEventListener('fetch-response', e => {
+			fetchResponseFired = true;
+			fetchResponseDetail = e.detail;
+		});
+
+		window.fetch = () => Promise.resolve({ status: 200, text: () => Promise.resolve('<p>test</p>') });
+
+		importEl.src = '/mock-file.html';
+		await importEl.updateComplete;
+		await new Promise(resolve => setTimeout(resolve, 50));
+
+		window.fetch = originalFetch;
+
+		if(!fetchResponseFired){
+			cleanup(container);
+			return fail('fetch-response event should be fired');
+		}
+		if(fetchResponseDetail.src !== '/mock-file.html'){
+			cleanup(container);
+			return fail(`Expected detail.src "/mock-file.html", got "${fetchResponseDetail.src}"`);
+		}
+		if(fetchResponseDetail.status !== 200){
+			cleanup(container);
+			return fail(`Expected detail.status 200, got ${fetchResponseDetail.status}`);
+		}
+		cleanup(container);
+		pass('fetch-response event dispatched with correct detail');
+	},
+
+	'fetch-start should fire before fetch-response': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		const originalFetch = window.fetch;
+		const order = [];
+
+		importEl.addEventListener('fetch-start', () => order.push('fetch-start'));
+		importEl.addEventListener('fetch-response', () => order.push('fetch-response'));
+
+		window.fetch = () => Promise.resolve({ status: 200, text: () => Promise.resolve('<p>test</p>') });
+
+		importEl.src = '/mock-file.html';
+		await importEl.updateComplete;
+		await new Promise(resolve => setTimeout(resolve, 50));
+
+		window.fetch = originalFetch;
+
+		if(order[0] !== 'fetch-start' || order[1] !== 'fetch-response'){
+			cleanup(container);
+			return fail(`Expected [fetch-start, fetch-response], got [${order.join(', ')}]`);
+		}
+		cleanup(container);
+		pass('fetch-start fires before fetch-response');
+	},
+
+	'should dispatch content-rendered event after content is set': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		let eventFired = false;
+
+		importEl.addEventListener('content-rendered', () => { eventFired = true; });
+
+		importEl.content = '<p>rendered content</p>';
+		await importEl.updateComplete;
+		await new Promise(resolve => setTimeout(resolve, 50));
+
+		if(!eventFired){
+			cleanup(container);
+			return fail('content-rendered event should be fired after content changes');
+		}
+		cleanup(container);
+		pass('content-rendered event dispatched after content is set');
+	},
+
+	'content-rendered event should bubble': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		let bubbled = false;
+		container.addEventListener('content-rendered', () => { bubbled = true; });
+
+		importEl.content = '<p>bubble test</p>';
+		await importEl.updateComplete;
+		await new Promise(resolve => setTimeout(resolve, 50));
+
+		if(!bubbled){
+			cleanup(container);
+			return fail('content-rendered event should bubble');
+		}
+		cleanup(container);
+		pass('content-rendered event bubbles');
+	},
+
+	'should dispatch all four events in order during a full fetch cycle': async ({pass, fail}) => {
+		const { container, importEl } = await createImport();
+		const originalFetch = window.fetch;
+		const order = [];
+
+		importEl.addEventListener('src-change', () => order.push('src-change'));
+		importEl.addEventListener('fetch-start', () => order.push('fetch-start'));
+		importEl.addEventListener('fetch-response', () => order.push('fetch-response'));
+		importEl.addEventListener('content-rendered', () => order.push('content-rendered'));
+
+		window.fetch = () => Promise.resolve({ status: 200, text: () => Promise.resolve('<p>full cycle</p>') });
+
+		importEl.src = '/full-cycle.html';
+		await importEl.updateComplete;
+		await new Promise(resolve => setTimeout(resolve, 100));
+
+		window.fetch = originalFetch;
+
+		const expected = ['src-change', 'fetch-start', 'fetch-response', 'content-rendered'];
+		if(JSON.stringify(order) !== JSON.stringify(expected)){
+			cleanup(container);
+			return fail(`Expected [${expected.join(', ')}], got [${order.join(', ')}]`);
+		}
+		cleanup(container);
+		pass('All four events fire in correct order');
 	}
 };