kempo-ui 0.4.20 → 0.4.21

package/src/components/controls/Undo.js

@@ -0,0 +1,18 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class Undo extends ButtonControl {
+  static requires = ['undo'];
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Undo';
+  }
+
+  handleAction() { this.host?.undo?.(); }
+
+  render() { return html`<slot><k-icon name="undo"></k-icon></slot>`; }
+}
+
+customElements.define('kc-undo', Undo);

package/src/components/controls/WordCount.js

@@ -0,0 +1,48 @@
+import Control from './Control.js';
+import { html, css } from '../../lit-all.min.js';
+
+export default class WordCount extends Control {
+  static hostEvents = ['change', 'ready'];
+
+  static properties = {
+    ...Control.properties,
+    count: { type: Number, state: true }
+  };
+
+  constructor() {
+    super();
+    this.count = 0;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    setTimeout(() => this.updateCount(), 0);
+  }
+
+  willUpdate(changed) {
+    super.willUpdate?.(changed);
+    this.updateCount();
+  }
+
+  updateCount() {
+    const host = this.host;
+    if(!host || typeof host.getValue !== 'function') return;
+    const val = host.getValue() || '';
+    const text = val.includes('<') ? (new DOMParser().parseFromString(val, 'text/html').body.innerText || '') : val;
+    this.count = text.trim().split(/\s+/).filter(w => w.length > 0).length;
+  }
+
+  render() {
+    return html`<span class="word-count"><slot name="label">Words:</slot> ${this.count}</span>`;
+  }
+
+  static styles = [
+    Control.styles,
+    css`
+      :host { align-items: center; padding: 0 0.5rem; font-size: 0.875rem; color: var(--tc_muted, #666); }
+      .word-count { display: flex; align-items: center; gap: 0.25rem; }
+    `
+  ];
+}
+
+customElements.define('kc-word-count', WordCount);

package/src/components/controls/WordWrap.js

@@ -0,0 +1,36 @@
+import ButtonControl from './ButtonControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class WordWrap extends ButtonControl {
+  static requires = ['toggleWordWrap'];
+  static hostMode = 'code';
+  static hostEvents = ['word-wrap-changed'];
+
+  static properties = {
+    ...ButtonControl.properties,
+    active: { type: Boolean, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.active = true;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Toggle Word Wrap';
+    if(this.host) this.active = this.host.wordWrap !== false;
+  }
+
+  willUpdate(changed) {
+    super.willUpdate?.(changed);
+    if(this.host) this.active = this.host.wordWrap !== false;
+  }
+
+  handleAction() { this.host?.toggleWordWrap?.(); }
+
+  render() { return html`<slot><k-icon name="wrap_text"></k-icon></slot>`; }
+}
+
+customElements.define('kc-word-wrap', WordWrap);

package/tasks/released/0007-code-editor-updates.md

@@ -0,0 +1,96 @@
+# 0007 - Unified Control Architecture
+
+## Status: In Progress
+
+## Dependency
+None
+
+## References
+- [src/components/Button.js](../src/components/Button.js)
+- [src/components/ControlGroup.js](../src/components/ControlGroup.js)
+- [src/components/codeEditorControls/](../src/components/codeEditorControls/)
+- [src/components/htmlEditorControls/](../src/components/htmlEditorControls/)
+- [src/components/markdownEditorControls/](../src/components/markdownEditorControls/)
+- [src/components/tableControls/](../src/components/tableControls/)
+- [src/components/paginationControls/](../src/components/paginationControls/)
+
+## Current State
+Each "controllable" host component (CodeEditor, HtmlEditor, MarkdownEditor, Table, Pagination) has its own dedicated control directory and base class hierarchy:
+
+- `codeEditorControls/` — `CodeEditorControl`, `CodeEditorButtonControl extends Button` (recently refactored).
+- `htmlEditorControls/` — `HtmlEditorControl`, `DropdownControl extends HtmlEditorControl`. ~20 subclasses each render an internal `<button>` with `this.buttonClasses` and call methods like `this.editor.bold()`.
+- `markdownEditorControls/` — `MarkdownEditorControl`. Subclasses render internal `<button>` with `btnClass`.
+- `tableControls/` — `TableControl`. Subclasses render internal `<button class="no-btn icon-btn">` and call methods on `this.table`.
+- `paginationControls/` — `PaginationControl`, `PaginationButtonControl extends Button`.
+
+Problems with the current architecture:
+1. **Duplication of base logic** — Every control directory reimplements editor/host discovery, button click wiring, hidden-state propagation, and group detection.
+2. **Duplication of behavior** — `Bold` only exists for HtmlEditor even though MarkdownEditor needs the exact same control. `WordWrap`/`FindReplace` exist only for CodeEditor even though HtmlEditor in code-mode could use them. `CopyCode` could work for any host that exposes a `copyToClipboard` method.
+3. **Tight coupling** — Each control hardcodes its host tag (`K-CODE-EDITOR`, `K-HTML-EDITOR`, etc.), making cross-host reuse impossible.
+4. **Many `static styles` duplications** — Recently cleaned up, but the underlying base-class fragmentation invites the duplication to creep back.
+
+## Aceptance Criteria
+1. **Controllable host pattern**: Any component intended to host controls (CodeEditor, HtmlEditor, MarkdownEditor, Table, Pagination, and any future component) automatically sets a `controlled` attribute on itself in `connectedCallback`. Consumers do **not** need to add this attribute manually.
+2. **Single merged controls directory**: All controls live in `src/components/controls/`. The per-host directories (`codeEditorControls/`, `htmlEditorControls/`, `markdownEditorControls/`, `tableControls/`, `paginationControls/`) are removed.
+3. **Three base classes**:
+   - `Control` — base for any control (replaces all per-host base controls). Provides `closest('[controlled]')` host discovery, hidden-state handling, and `control_visibility_change` event dispatch.
+   - `ButtonControl extends Control` (and extends `Button` semantics) — for clickable controls. Host element IS the button.
+   - `ControlMenu extends Control` — for dropdown-style controls (replaces `DropdownControl`).
+4. **Auto-disable when host doesn't support the action**: Each control declares which method(s) it calls on its host. If `closest('[controlled]')` returns a host that does not implement those methods, the control disables itself (sets `disabled` and shows in disabled state). Example: dropping `<k-control-bold>` inside `<k-table>` shows a disabled bold button rather than throwing.
+5. **Cross-host reusability via shared controls**: Controls that have the same semantics across hosts are unified into one component. Examples (non-exhaustive):
+   - `<kc-bold>` works in HtmlEditor and MarkdownEditor
+   - `<kc-italic>`, `<kc-underline>`, `<kc-strikethrough>` — same as above
+   - `<kc-undo>`, `<kc-redo>` — work in CodeEditor, HtmlEditor, MarkdownEditor
+   - `<kc-copy>` — works in CodeEditor, HtmlEditor, MarkdownEditor
+   - `<kc-word-wrap>` — works in CodeEditor and HtmlEditor (code mode)
+   - `<kc-find-replace>` — works in CodeEditor and HtmlEditor (code mode)
+   - `<kc-fullscreen>` — works in any host that supports a fullscreen toggle
+6. **Tag naming**: All controls use the prefix `kc-*` ("kempo control"). This fully replaces the old `k-cec-*`, `k-hec-*`, `k-mec-*`, `k-tc-*`, `k-pg-*` prefixes. The project is in beta — no backward-compatibility aliases are required; old tags are simply removed.
+7. **Preconfigured control set helper**: Hosts ship with a small set of named preset configurations (e.g. `controls="full"`, `controls="minimal"`). These presets are defined in code as Lit tagged-template-literal HTML fragments (e.g. `` html`<kc-bold></kc-bold><kc-italic></kc-italic>...` ``). A shared helper parses the template, discovers which `<kc-*>` tags it references, and dynamically imports the matching modules from `src/components/controls/` before rendering. This replaces the current per-editor `loadControls()` duplication.
+8. **Mode-aware visibility preserved**: Controls that only make sense in a specific host mode (e.g., text-formatting controls in HtmlEditor visual mode, code-only controls in code mode) hide themselves automatically based on the host's mode events.
+9. **No regressions**: Existing demo pages (`docs-src/components/code-editor.page.html`, `html-editor.page.html`, `markdown-editor.page.html`, `table.page.html`, `pagination.page.html`) work identically after the refactor — visually and functionally.
+10. **Documentation updated**: `docs-src/` pages and `llms.txt` are updated to reflect the new tag names and the unified architecture.
+11. **All tests pass**: 0 test failures across the suite.
+
+### In-Scope
+- `src/components/controls/` (new merged directory)
+- `src/components/CodeEditor.js`, `HtmlEditor.js`, `MarkdownEditor.js`, `Table.js`, `Pagination.js` — add auto-set `controlled` attribute and ensure they expose the methods controls need to invoke
+- `src/components/Button.js`, `ControlGroup.js` — reference, may need minor adjustments
+- All files in `codeEditorControls/`, `htmlEditorControls/`, `markdownEditorControls/`, `tableControls/`, `paginationControls/` — to be migrated and removed
+- `docs-src/components/*.page.html` — update tag names
+- `llms.txt`
+- Tests covering controls
+
+### Out of Scope
+- Changes to non-control components (Dropdown, Icon, etc.) beyond what's required for the new bases
+- Changes to highlight-js or `<pre>` code display
+- Adding net-new controls (only consolidate existing behavior)
+- Visual redesign — the post-refactor toolbars should look the same as before
+
+## Task Details
+{To be filled in during task-prepare. Will need to define:
+- Exact API for `Control`, `ButtonControl`, `ControlMenu` base classes
+- Method-existence check mechanism (declared on the control class via a static property listing required methods? duck-typed at click time? something else?)
+- Migration order — which host's controls to migrate first
+- Implementation details for the control-loading helper:
+  - Function signature (e.g. `loadControlsFromTemplate(htmlResult)` returning a Promise)
+  - How to extract tag names from a Lit `TemplateResult` (walk the `strings` array with a regex for `<kc-[a-z-]+`?)
+  - How tag → module path mapping works (kebab-case → PascalCase filename in `src/components/controls/`)
+  - Whether preset configurations are also stored as Lit templates or as plain strings parsed by the same helper
+- How `ControlGroup` interacts with the new bases (should remain unchanged)
+- Confirm full removal of old prefixed tags (no aliases) and that all docs/tests reference only the new tags}
+
+## Testing / Validation Plan
+{To be filled in during task-prepare. Should cover:
+- Each acceptance criterion individually
+- Visual regression for each affected demo page (toolbar appearance unchanged)
+- Functional regression for each editor's controls (bold still bolds, undo still undoes, etc.)
+- Cross-host reuse: e.g. drop a `<k-control-bold>` into MarkdownEditor and verify it works; drop one into Table and verify it shows as disabled
+- Group detection still works (`<k-control-group>` still collapses borders correctly)
+- All existing unit tests pass}
+
+### Testing / Validation Results
+
+#### LLM Validation Results
+
+#### User Validation Results

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

@@ -294,46 +294,4 @@ export default {
 		cleanup(container);
 		pass();
 	},
-
-	/*
-		Control Module Loading
-	*/
-	'should only load modules defined in the full control set': async ({pass, fail}) => {
-		const savedSet = CodeEditor.loadedModules;
-		CodeEditor.loadedModules = new Set();
-		const { container, editor } = await createEditor('controls="full"');
-		const loaded = new Set(CodeEditor.loadedModules);
-		CodeEditor.loadedModules = savedSet;
-		cleanup(container);
-		const expected = new Set(CodeEditor.controlModules.full);
-		const extra = [...loaded].filter(m => !expected.has(m));
-		const missing = [...expected].filter(m => !loaded.has(m));
-		if(extra.length || missing.length)
-			return fail(`loadedModules mismatch. Extra: [${extra}], Missing: [${missing}]`);
-		pass('Only full preset modules were loaded for CodeEditor');
-	},
-
-	'should not load any modules when controls is not set': async ({pass, fail}) => {
-		const savedSet = CodeEditor.loadedModules;
-		CodeEditor.loadedModules = new Set();
-		const { container, editor } = await createEditor();
-		const loaded = new Set(CodeEditor.loadedModules);
-		CodeEditor.loadedModules = savedSet;
-		cleanup(container);
-		if(loaded.size !== 0)
-			return fail(`Expected no modules loaded, but got: [${[...loaded]}]`);
-		pass('No modules loaded when controls is not set for CodeEditor');
-	},
-
-	'should not load any modules for an unknown controls preset': async ({pass, fail}) => {
-		const savedSet = CodeEditor.loadedModules;
-		CodeEditor.loadedModules = new Set();
-		const { container, editor } = await createEditor('controls="not_a_real_preset"');
-		const loaded = new Set(CodeEditor.loadedModules);
-		CodeEditor.loadedModules = savedSet;
-		cleanup(container);
-		if(loaded.size !== 0)
-			return fail(`Expected no modules loaded for unknown preset, but got: [${[...loaded]}]`);
-		pass('No modules loaded for unknown controls preset in CodeEditor');
-	}
 };

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

@@ -583,92 +583,4 @@ export default {
 		cleanup(container);
 		pass('Proxy methods return this for chaining');
 	},
-
-	/*
-		Control Module Loading
-	*/
-	'should only load modules defined in the minimal control set': async ({pass, fail}) => {
-		const savedSet = HtmlEditor.loadedModules;
-		HtmlEditor.loadedModules = new Set();
-		const container = document.createElement('div');
-		container.innerHTML = '<k-html-editor controls="minimal"></k-html-editor>';
-		document.body.appendChild(container);
-		const editor = container.querySelector('k-html-editor');
-		await new Promise(r => editor.addEventListener('ready', r, { once: true }));
-		const loaded = new Set(HtmlEditor.loadedModules);
-		HtmlEditor.loadedModules = savedSet;
-		cleanup(container);
-		const expected = new Set(HtmlEditor.controlModules.minimal);
-		const extra = [...loaded].filter(m => !expected.has(m));
-		const missing = [...expected].filter(m => !loaded.has(m));
-		if(extra.length || missing.length)
-			return fail(`loadedModules mismatch. Extra: [${extra}], Missing: [${missing}]`);
-		pass('Only minimal preset modules were loaded for HtmlEditor');
-	},
-
-	'should only load modules defined in the normal control set': async ({pass, fail}) => {
-		const savedSet = HtmlEditor.loadedModules;
-		HtmlEditor.loadedModules = new Set();
-		const container = document.createElement('div');
-		container.innerHTML = '<k-html-editor controls="normal"></k-html-editor>';
-		document.body.appendChild(container);
-		const editor = container.querySelector('k-html-editor');
-		await new Promise(r => editor.addEventListener('ready', r, { once: true }));
-		const loaded = new Set(HtmlEditor.loadedModules);
-		HtmlEditor.loadedModules = savedSet;
-		cleanup(container);
-		const expected = new Set(HtmlEditor.controlModules.normal);
-		const extra = [...loaded].filter(m => !expected.has(m));
-		const missing = [...expected].filter(m => !loaded.has(m));
-		if(extra.length || missing.length)
-			return fail(`loadedModules mismatch. Extra: [${extra}], Missing: [${missing}]`);
-		pass('Only normal preset modules were loaded for HtmlEditor');
-	},
-
-	'should only load modules defined in the full control set': async ({pass, fail}) => {
-		const savedSet = HtmlEditor.loadedModules;
-		HtmlEditor.loadedModules = new Set();
-		const container = document.createElement('div');
-		container.innerHTML = '<k-html-editor controls="full"></k-html-editor>';
-		document.body.appendChild(container);
-		const editor = container.querySelector('k-html-editor');
-		await new Promise(r => editor.addEventListener('ready', r, { once: true }));
-		const loaded = new Set(HtmlEditor.loadedModules);
-		HtmlEditor.loadedModules = savedSet;
-		cleanup(container);
-		const expected = new Set(HtmlEditor.controlModules.full);
-		const extra = [...loaded].filter(m => !expected.has(m));
-		const missing = [...expected].filter(m => !loaded.has(m));
-		if(extra.length || missing.length)
-			return fail(`loadedModules mismatch. Extra: [${extra}], Missing: [${missing}]`);
-		pass('Only full preset modules were loaded for HtmlEditor');
-	},
-
-	'should not load any modules when controls is not set': async ({pass, fail}) => {
-		const savedSet = HtmlEditor.loadedModules;
-		HtmlEditor.loadedModules = new Set();
-		const { container, editor } = await createEditor();
-		const loaded = new Set(HtmlEditor.loadedModules);
-		HtmlEditor.loadedModules = savedSet;
-		cleanup(container);
-		if(loaded.size !== 0)
-			return fail(`Expected no modules loaded, but got: [${[...loaded]}]`);
-		pass('No modules loaded when controls is not set for HtmlEditor');
-	},
-
-	'should not load any modules for an unknown controls preset': async ({pass, fail}) => {
-		const savedSet = HtmlEditor.loadedModules;
-		HtmlEditor.loadedModules = new Set();
-		const container = document.createElement('div');
-		container.innerHTML = '<k-html-editor controls="not_a_real_preset"></k-html-editor>';
-		document.body.appendChild(container);
-		const editor = container.querySelector('k-html-editor');
-		await new Promise(r => editor.addEventListener('ready', r, { once: true }));
-		const loaded = new Set(HtmlEditor.loadedModules);
-		HtmlEditor.loadedModules = savedSet;
-		cleanup(container);
-		if(loaded.size !== 0)
-			return fail(`Expected no modules loaded for unknown preset, but got: [${[...loaded]}]`);
-		pass('No modules loaded for unknown controls preset in HtmlEditor');
-	}
 };

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

@@ -459,76 +459,4 @@ export default {
 		cleanup(container);
 		pass('Component has shadow DOM for accessibility');
 	},
-
-	/*
-		Control Module Loading
-	*/
-	'should only load modules defined in the minimal control set': async ({pass, fail}) => {
-		const savedSet = MarkdownEditor.loadedModules;
-		MarkdownEditor.loadedModules = new Set();
-		const { container, el } = await createMarkdownEditor({ controls: 'minimal' });
-		const loaded = new Set(MarkdownEditor.loadedModules);
-		MarkdownEditor.loadedModules = savedSet;
-		cleanup(container);
-		const expected = new Set(MarkdownEditor.controlModules.minimal);
-		const extra = [...loaded].filter(m => !expected.has(m));
-		const missing = [...expected].filter(m => !loaded.has(m));
-		if(extra.length || missing.length)
-			return fail(`loadedModules mismatch. Extra: [${extra}], Missing: [${missing}]`);
-		pass('Only minimal preset modules were loaded for MarkdownEditor');
-	},
-
-	'should only load modules defined in the normal control set': async ({pass, fail}) => {
-		const savedSet = MarkdownEditor.loadedModules;
-		MarkdownEditor.loadedModules = new Set();
-		const { container, el } = await createMarkdownEditor({ controls: 'normal' });
-		const loaded = new Set(MarkdownEditor.loadedModules);
-		MarkdownEditor.loadedModules = savedSet;
-		cleanup(container);
-		const expected = new Set(MarkdownEditor.controlModules.normal);
-		const extra = [...loaded].filter(m => !expected.has(m));
-		const missing = [...expected].filter(m => !loaded.has(m));
-		if(extra.length || missing.length)
-			return fail(`loadedModules mismatch. Extra: [${extra}], Missing: [${missing}]`);
-		pass('Only normal preset modules were loaded for MarkdownEditor');
-	},
-
-	'should only load modules defined in the full control set': async ({pass, fail}) => {
-		const savedSet = MarkdownEditor.loadedModules;
-		MarkdownEditor.loadedModules = new Set();
-		const { container, el } = await createMarkdownEditor({ controls: 'full' });
-		const loaded = new Set(MarkdownEditor.loadedModules);
-		MarkdownEditor.loadedModules = savedSet;
-		cleanup(container);
-		const expected = new Set(MarkdownEditor.controlModules.full);
-		const extra = [...loaded].filter(m => !expected.has(m));
-		const missing = [...expected].filter(m => !loaded.has(m));
-		if(extra.length || missing.length)
-			return fail(`loadedModules mismatch. Extra: [${extra}], Missing: [${missing}]`);
-		pass('Only full preset modules were loaded for MarkdownEditor');
-	},
-
-	'should not load any modules when controls is not set': async ({pass, fail}) => {
-		const savedSet = MarkdownEditor.loadedModules;
-		MarkdownEditor.loadedModules = new Set();
-		const { container, el } = await createMarkdownEditor();
-		const loaded = new Set(MarkdownEditor.loadedModules);
-		MarkdownEditor.loadedModules = savedSet;
-		cleanup(container);
-		if(loaded.size !== 0)
-			return fail(`Expected no modules loaded, but got: [${[...loaded]}]`);
-		pass('No modules loaded when controls is not set for MarkdownEditor');
-	},
-
-	'should not load any modules for an unknown controls preset': async ({pass, fail}) => {
-		const savedSet = MarkdownEditor.loadedModules;
-		MarkdownEditor.loadedModules = new Set();
-		const { container, el } = await createMarkdownEditor({ controls: 'not_a_real_preset' });
-		const loaded = new Set(MarkdownEditor.loadedModules);
-		MarkdownEditor.loadedModules = savedSet;
-		cleanup(container);
-		if(loaded.size !== 0)
-			return fail(`Expected no modules loaded for unknown preset, but got: [${[...loaded]}]`);
-		pass('No modules loaded for unknown controls preset in MarkdownEditor');
-	}
 };

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

@@ -351,11 +351,11 @@ export default {
 		const { container, el } = await createPagination({ 'total-items': 50, controls: 'simple' });
 		await el.updateComplete;
 		const sr = el.shadowRoot;
-		const hasPrev = !!sr.querySelector('k-pg-prev');
-		const hasInfo = !!sr.querySelector('k-pg-page-info');
-		const hasNext = !!sr.querySelector('k-pg-next');
-		const hasFirst = !!sr.querySelector('k-pg-first');
-		const hasLast = !!sr.querySelector('k-pg-last');
+		const hasPrev = !!sr.querySelector('kc-pg-prev');
+		const hasInfo = !!sr.querySelector('kc-pg-page-info');
+		const hasNext = !!sr.querySelector('kc-pg-next');
+		const hasFirst = !!sr.querySelector('kc-pg-first');
+		const hasLast = !!sr.querySelector('kc-pg-last');
 		cleanup(container);
 		if(!hasPrev || !hasInfo || !hasNext) return fail('simple set missing required controls');
 		if(hasFirst || hasLast) return fail('simple set should not include first/last controls');
@@ -366,13 +366,13 @@ export default {
 		const { container, el } = await createPagination({ 'total-items': 50, controls: 'full' });
 		await el.updateComplete;
 		const sr = el.shadowRoot;
-		const hasFirst = !!sr.querySelector('k-pg-first');
-		const hasPrev = !!sr.querySelector('k-pg-prev');
-		const hasGoto = !!sr.querySelector('k-pg-goto-page');
-		const hasNext = !!sr.querySelector('k-pg-next');
-		const hasLast = !!sr.querySelector('k-pg-last');
-		const hasIpp = !!sr.querySelector('k-pg-items-per-page');
-		const hasPageInfo = !!sr.querySelector('k-pg-page-info');
+		const hasFirst = !!sr.querySelector('kc-pg-first');
+		const hasPrev = !!sr.querySelector('kc-pg-prev');
+		const hasGoto = !!sr.querySelector('kc-pg-goto-page');
+		const hasNext = !!sr.querySelector('kc-pg-next');
+		const hasLast = !!sr.querySelector('kc-pg-last');
+		const hasIpp = !!sr.querySelector('kc-pg-items-per-page');
+		const hasPageInfo = !!sr.querySelector('kc-pg-page-info');
 		cleanup(container);
 		if(!hasFirst || !hasPrev || !hasGoto || !hasNext || !hasLast || !hasIpp) return fail('full set missing required controls');
 		if(hasPageInfo) return fail('full set should use goto-page instead of page-info');
@@ -395,84 +395,6 @@ export default {
 		cleanup(container);
 		pass('page-change detail contains full pagination state');
 	},
-
-	/*
-		Control Module Loading
-	*/
-	'should only load modules defined in the simple control set': async ({pass, fail}) => {
-		const savedSet = Pagination.loadedModules;
-		Pagination.loadedModules = new Set();
-		const { container, el } = await createPagination({ controls: 'simple', 'total-items': 100 });
-		const loaded = new Set(Pagination.loadedModules);
-		Pagination.loadedModules = savedSet;
-		cleanup(container);
-		const expected = new Set(Pagination.controlModules.simple);
-		const extra = [...loaded].filter(m => !expected.has(m));
-		const missing = [...expected].filter(m => !loaded.has(m));
-		if(extra.length || missing.length)
-			return fail(`loadedModules mismatch. Extra: [${extra}], Missing: [${missing}]`);
-		pass('Only simple preset modules were loaded');
-	},
-
-	'should only load modules defined in the full control set': async ({pass, fail}) => {
-		const savedSet = Pagination.loadedModules;
-		Pagination.loadedModules = new Set();
-		const { container, el } = await createPagination({ controls: 'full', 'total-items': 100 });
-		const loaded = new Set(Pagination.loadedModules);
-		Pagination.loadedModules = savedSet;
-		cleanup(container);
-		const expected = new Set(Pagination.controlModules.full);
-		const extra = [...loaded].filter(m => !expected.has(m));
-		const missing = [...expected].filter(m => !loaded.has(m));
-		if(extra.length || missing.length)
-			return fail(`loadedModules mismatch. Extra: [${extra}], Missing: [${missing}]`);
-		pass('Only full preset modules were loaded');
-	},
-
-	'should not load any modules when controls is not set': async ({pass, fail}) => {
-		const savedSet = Pagination.loadedModules;
-		Pagination.loadedModules = new Set();
-		const { container, el } = await createPagination({ 'total-items': 100 });
-		const loaded = new Set(Pagination.loadedModules);
-		Pagination.loadedModules = savedSet;
-		cleanup(container);
-		if(loaded.size !== 0)
-			return fail(`Expected no modules loaded, but got: [${[...loaded]}]`);
-		pass('No modules loaded when controls is not set');
-	},
-
-	'should not load any modules for an unknown controls preset': async ({pass, fail}) => {
-		const savedSet = Pagination.loadedModules;
-		Pagination.loadedModules = new Set();
-		const { container, el } = await createPagination({ controls: 'not_a_real_preset', 'total-items': 100 });
-		const loaded = new Set(Pagination.loadedModules);
-		Pagination.loadedModules = savedSet;
-		cleanup(container);
-		if(loaded.size !== 0)
-			return fail(`Expected no modules loaded for unknown preset, but got: [${[...loaded]}]`);
-		pass('No modules loaded for unknown controls preset');
-	},
-
-	'should not reload already-loaded modules when controls changes': async ({pass, fail}) => {
-		const savedSet = Pagination.loadedModules;
-		Pagination.loadedModules = new Set();
-		const { container, el } = await createPagination({ controls: 'simple', 'total-items': 100 });
-		const afterSimple = new Set(Pagination.loadedModules);
-		el.controls = 'full';
-		await el.updateComplete;
-		const afterFull = new Set(Pagination.loadedModules);
-		Pagination.loadedModules = savedSet;
-		cleanup(container);
-		const fullModules = new Set(Pagination.controlModules.full);
-		const missing = [...fullModules].filter(m => !afterFull.has(m));
-		const simpleModulesInFull = Pagination.controlModules.simple.filter(m => fullModules.has(m));
-		const reloaded = simpleModulesInFull.filter(m => !afterSimple.has(m));
-		if(missing.length)
-			return fail(`After switching to full, missing modules: [${missing}]`);
-		if(reloaded.length)
-			return fail(`Modules were not in loadedModules after simple load: [${reloaded}]`);
-		pass('Switching control sets only loads newly-needed modules');
-	}
 };
 
 

package/tests/components/{htmlEditorControls → controls}/Align.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import AlignLeft from '../../../src/components/htmlEditorControls/AlignLeft.js';
-import AlignCenter from '../../../src/components/htmlEditorControls/AlignCenter.js';
-import AlignRight from '../../../src/components/htmlEditorControls/AlignRight.js';
-import AlignJustify from '../../../src/components/htmlEditorControls/AlignJustify.js';
+import AlignLeft from '../../../src/components/controls/AlignLeft.js';
+import AlignCenter from '../../../src/components/controls/AlignCenter.js';
+import AlignRight from '../../../src/components/controls/AlignRight.js';
+import AlignJustify from '../../../src/components/controls/AlignJustify.js';
 
 const createEditorWithControls = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-html-editor>
-			<k-hec-align-left slot="toolbar-top-left"></k-hec-align-left>
-			<k-hec-align-center slot="toolbar-top-left"></k-hec-align-center>
-			<k-hec-align-right slot="toolbar-top-left"></k-hec-align-right>
-			<k-hec-align-justify slot="toolbar-top-left"></k-hec-align-justify>
+			<kc-align-left slot="toolbar-top-left"></kc-align-left>
+			<kc-align-center slot="toolbar-top-left"></kc-align-center>
+			<kc-align-right slot="toolbar-top-left"></kc-align-right>
+			<kc-align-justify slot="toolbar-top-left"></kc-align-justify>
 		</k-html-editor>
 	`;
 	document.body.appendChild(container);
@@ -20,10 +20,10 @@ const createEditorWithControls = async () => {
 	return {
 		container,
 		editor,
-		left: container.querySelector('k-hec-align-left'),
-		center: container.querySelector('k-hec-align-center'),
-		right: container.querySelector('k-hec-align-right'),
-		justify: container.querySelector('k-hec-align-justify')
+		left: container.querySelector('kc-align-left'),
+		center: container.querySelector('kc-align-center'),
+		right: container.querySelector('kc-align-right'),
+		justify: container.querySelector('kc-align-justify')
 	};
 };
 
@@ -62,7 +62,7 @@ export default {
 		await left.updateComplete;
 		let called = false;
 		editor.alignLeft = () => { called = true; };
-		left.shadowRoot.querySelector('button').click();
+		left.click();
 		if(!called){
 			cleanup(container);
 			return fail('Click should call editor.alignLeft()');
@@ -114,7 +114,7 @@ export default {
 		await center.updateComplete;
 		let called = false;
 		editor.alignCenter = () => { called = true; };
-		center.shadowRoot.querySelector('button').click();
+		center.click();
 		if(!called){
 			cleanup(container);
 			return fail('Click should call editor.alignCenter()');
@@ -153,7 +153,7 @@ export default {
 		await right.updateComplete;
 		let called = false;
 		editor.alignRight = () => { called = true; };
-		right.shadowRoot.querySelector('button').click();
+		right.click();
 		if(!called){
 			cleanup(container);
 			return fail('Click should call editor.alignRight()');
@@ -192,7 +192,7 @@ export default {
 		await justify.updateComplete;
 		let called = false;
 		editor.alignJustify = () => { called = true; };
-		justify.shadowRoot.querySelector('button').click();
+		justify.click();
 		if(!called){
 			cleanup(container);
 			return fail('Click should call editor.alignJustify()');