kempo-ui 0.4.19 → 0.4.21

package/src/components/HtmlEditor.js

@@ -4,6 +4,7 @@ import formatCode from '../utils/formatCode.js';
 import debounce from '../utils/debounce.js';
 import { getCalculatedTheme, subscribeToTheme } from '../utils/theme.js';
 import Dialog from './Dialog.js';
+import Control from './controls/Control.js';
 
 /*
 	Default CDN URLs
@@ -71,6 +72,7 @@ export default class HtmlEditor extends ShadowComponent {
 	*/
 	connectedCallback() {
 		super.connectedCallback();
+		if(!this.hasAttribute('controlled')) this.setAttribute('controlled', '');
 		if (this.hasAttribute('value')) {
 			this.value = this.getAttribute('value');
 		}
@@ -180,16 +182,9 @@ export default class HtmlEditor extends ShadowComponent {
 		Module Loading
 	*/
 	loadControls() {
-		const modules = this.constructor.controlModules[this.controls];
-		if(!modules?.length) return;
-		const loaded = this.constructor.loadedModules;
-		const hecBase = new URL('./htmlEditorControls/', import.meta.url).href;
-		const cecBase = new URL('./codeEditorControls/', import.meta.url).href;
-		modules.filter(m => !loaded.has(m)).forEach(m => {
-			loaded.add(m);
-			const [dir, file] = m.split('/');
-			import(`${dir === 'cec' ? cecBase : hecBase}${file}.js`);
-		});
+		const set = this.constructor.controlSets[this.controls];
+		if(!set) return;
+		Control.load(Object.values(set));
 	}
 
 	async loadNodeModules() {
@@ -619,6 +614,16 @@ export default class HtmlEditor extends ShadowComponent {
 		return this;
 	}
 
+	/* Aliases matching the unified controls API */
+	bulletList() { return this.unorderedList(); }
+	numberList() { return this.orderedList(); }
+	toggleWordWrap() { return this.setWordWrap(!this.wordWrap); }
+	toggleMinimap() { return this.setMinimap(!this.minimapEnabled); }
+	formatCode() {
+		this.monacoEditor?.getAction('editor.action.formatDocument')?.run();
+		return this;
+	}
+
 	/*
 		Public Methods - Text Alignment
 	*/
@@ -1184,10 +1189,9 @@ export default class HtmlEditor extends ShadowComponent {
 		}
 		:host([fullscreen]) {
 			position: fixed;
-			top: 0;
-			left: 0;
-			width: 100vw !important;
-			height: 100vh !important;
+			inset: 0;
+			width: auto;
+			height: auto;
 			z-index: 10000;
 		}
 		:host([disabled]) {
@@ -1326,40 +1330,18 @@ export default class HtmlEditor extends ShadowComponent {
 	/*
 		Static Properties
 	*/
-	static loadedModules = new Set();
-	static controlModules = {
-		minimal: [
-			'hec/Bold', 'hec/Italic', 'hec/Underline', 'hec/BulletList', 'hec/NumberList', 'hec/ControlGroup'
-		],
-		normal: [
-			'hec/Bold', 'hec/Italic', 'hec/Underline', 'hec/Strikethrough', 'hec/InlineCode', 'hec/DropdownControl',
-			'hec/FormatBlock', 'hec/CodeBlock', 'hec/BulletList', 'hec/NumberList', 'hec/AlignLeft',
-			'hec/AlignCenter', 'hec/AlignRight', 'hec/CreateLink', 'hec/Mode', 'hec/WordCount', 'hec/ControlGroup',
-			'cec/FormatCode'
-		],
-		full: [
-			'hec/Bold', 'hec/Italic', 'hec/Underline', 'hec/Strikethrough', 'hec/InlineCode', 'hec/DropdownControl',
-			'hec/FormatBlock', 'hec/CodeBlock', 'hec/BulletList', 'hec/NumberList', 'hec/AlignLeft',
-			'hec/AlignCenter', 'hec/AlignRight', 'hec/AlignJustify', 'hec/TextColor', 'hec/TextBackgroundColor',
-			'hec/ClearFormatting', 'hec/CreateLink', 'hec/InsertTable', 'hec/Mode', 'hec/WordCount',
-			'hec/CharacterCount', 'hec/ControlGroup',
-			'cec/Undo', 'cec/Redo', 'cec/FormatCode', 'cec/CopyCode', 'cec/FindReplace',
-			'cec/WordWrap', 'cec/Minimap', 'cec/FoldAll', 'cec/FontSize', 'cec/EditorTheme', 'cec/Fullscreen', 'cec/ControlGroup'
-		]
-	};
-
 	static controlSets = {
 		minimal: {
 			topLeft: html`
-				<k-hec-group>
-					<k-hec-bold></k-hec-bold>
-					<k-hec-italic></k-hec-italic>
-					<k-hec-underline></k-hec-underline>
-				</k-hec-group>
-				<k-hec-group>
-					<k-hec-bullet-list></k-hec-bullet-list>
-					<k-hec-number-list></k-hec-number-list>
-				</k-hec-group>
+				<k-control-group>
+					<kc-bold></kc-bold>
+					<kc-italic></kc-italic>
+					<kc-underline></kc-underline>
+				</k-control-group>
+				<k-control-group>
+					<kc-bullet-list></kc-bullet-list>
+					<kc-number-list></kc-number-list>
+				</k-control-group>
 			`,
 			topRight: null,
 			bottomLeft: null,
@@ -1367,101 +1349,101 @@ export default class HtmlEditor extends ShadowComponent {
 		},
 		normal: {
 			topLeft: html`
-				<k-hec-group>
-					<k-hec-bold></k-hec-bold>
-					<k-hec-italic></k-hec-italic>
-					<k-hec-underline></k-hec-underline>
-					<k-hec-strikethrough></k-hec-strikethrough>
-				</k-hec-group>
-				<k-hec-inline-code></k-hec-inline-code>
-				<k-hec-dropdown>
+				<k-control-group>
+					<kc-bold></kc-bold>
+					<kc-italic></kc-italic>
+					<kc-underline></kc-underline>
+					<kc-strikethrough></kc-strikethrough>
+				</k-control-group>
+				<kc-inline-code></kc-inline-code>
+				<kc-menu>
 					<k-icon slot="icon" name="format_paragraph"></k-icon>
 					<span slot="label">Text Style</span>
-					<k-hec-format-block tag="p">Paragraph</k-hec-format-block>
-					<k-hec-format-block tag="h1">Heading 1</k-hec-format-block>
-					<k-hec-format-block tag="h2">Heading 2</k-hec-format-block>
-					<k-hec-format-block tag="h3">Heading 3</k-hec-format-block>
-					<k-hec-format-block tag="blockquote">Blockquote</k-hec-format-block>
-					<k-hec-code-block></k-hec-code-block>
-				</k-hec-dropdown>
-				<k-hec-group>
-					<k-hec-bullet-list></k-hec-bullet-list>
-					<k-hec-number-list></k-hec-number-list>
-				</k-hec-group>
+					<kc-format-block tag="p">Paragraph</kc-format-block>
+					<kc-format-block tag="h1">Heading 1</kc-format-block>
+					<kc-format-block tag="h2">Heading 2</kc-format-block>
+					<kc-format-block tag="h3">Heading 3</kc-format-block>
+					<kc-format-block tag="blockquote">Blockquote</kc-format-block>
+					<kc-code-block></kc-code-block>
+				</kc-menu>
+				<k-control-group>
+					<kc-bullet-list></kc-bullet-list>
+					<kc-number-list></kc-number-list>
+				</k-control-group>
 			`,
 			topRight: html`
-				<k-hec-group>
-					<k-hec-align-left></k-hec-align-left>
-					<k-hec-align-center></k-hec-align-center>
-					<k-hec-align-right></k-hec-align-right>
-				</k-hec-group>
-				<k-hec-create-link></k-hec-create-link>
-				<k-cec-format-code></k-cec-format-code>
-				<k-hec-mode></k-hec-mode>
+				<k-control-group>
+					<kc-align-left></kc-align-left>
+					<kc-align-center></kc-align-center>
+					<kc-align-right></kc-align-right>
+				</k-control-group>
+				<kc-create-link></kc-create-link>
+				<kc-format-code></kc-format-code>
+				<kc-mode></kc-mode>
 			`,
-			bottomLeft: html`<k-hec-word-count></k-hec-word-count>`,
+			bottomLeft: html`<kc-word-count></kc-word-count>`,
 			bottomRight: null,
 		},
 		full: {
 			topLeft: html`
-				<k-hec-group>
-					<k-hec-bold></k-hec-bold>
-					<k-hec-italic></k-hec-italic>
-					<k-hec-underline></k-hec-underline>
-					<k-hec-strikethrough></k-hec-strikethrough>
-				</k-hec-group>
-				<k-hec-inline-code></k-hec-inline-code>
-				<k-hec-dropdown>
+				<k-control-group>
+					<kc-bold></kc-bold>
+					<kc-italic></kc-italic>
+					<kc-underline></kc-underline>
+					<kc-strikethrough></kc-strikethrough>
+				</k-control-group>
+				<kc-inline-code></kc-inline-code>
+				<kc-menu>
 					<k-icon slot="icon" name="format_paragraph"></k-icon>
 					<span slot="label">Text Style</span>
-					<k-hec-format-block tag="p">Paragraph</k-hec-format-block>
-					<k-hec-format-block tag="h1">Heading 1</k-hec-format-block>
-					<k-hec-format-block tag="h2">Heading 2</k-hec-format-block>
-					<k-hec-format-block tag="h3">Heading 3</k-hec-format-block>
-					<k-hec-format-block tag="blockquote">Blockquote</k-hec-format-block>
-					<k-hec-code-block></k-hec-code-block>
-				</k-hec-dropdown>
-				<k-hec-group>
-					<k-hec-bullet-list></k-hec-bullet-list>
-					<k-hec-number-list></k-hec-number-list>
-				</k-hec-group>
-				<k-cec-group>
-					<k-cec-undo></k-cec-undo>
-					<k-cec-redo></k-cec-redo>
-				</k-cec-group>
-				<k-cec-group>
-					<k-cec-format-code></k-cec-format-code>
-					<k-cec-copy-code></k-cec-copy-code>
-					<k-cec-find-replace></k-cec-find-replace>
-				</k-cec-group>
-				<k-cec-group>
-					<k-cec-word-wrap></k-cec-word-wrap>
-					<k-cec-minimap></k-cec-minimap>
-					<k-cec-fold-all></k-cec-fold-all>
-				</k-cec-group>
-				<k-cec-font-size></k-cec-font-size>
+					<kc-format-block tag="p">Paragraph</kc-format-block>
+					<kc-format-block tag="h1">Heading 1</kc-format-block>
+					<kc-format-block tag="h2">Heading 2</kc-format-block>
+					<kc-format-block tag="h3">Heading 3</kc-format-block>
+					<kc-format-block tag="blockquote">Blockquote</kc-format-block>
+					<kc-code-block></kc-code-block>
+				</kc-menu>
+				<k-control-group>
+					<kc-bullet-list></kc-bullet-list>
+					<kc-number-list></kc-number-list>
+				</k-control-group>
+				<k-control-group>
+					<kc-undo></kc-undo>
+					<kc-redo></kc-redo>
+				</k-control-group>
+				<k-control-group>
+					<kc-format-code></kc-format-code>
+					<kc-copy-code></kc-copy-code>
+					<kc-find-replace></kc-find-replace>
+				</k-control-group>
+				<k-control-group>
+					<kc-word-wrap></kc-word-wrap>
+					<kc-minimap></kc-minimap>
+					<kc-fold-all></kc-fold-all>
+				</k-control-group>
+				<kc-font-size></kc-font-size>
 			`,
 			topRight: html`
-				<k-hec-group>
-					<k-hec-align-left></k-hec-align-left>
-					<k-hec-align-center></k-hec-align-center>
-					<k-hec-align-right></k-hec-align-right>
-					<k-hec-align-justify></k-hec-align-justify>
-				</k-hec-group>
-				<k-hec-create-link></k-hec-create-link>
-				<k-hec-group>
-					<k-hec-text-color></k-hec-text-color>
-					<k-hec-text-background-color></k-hec-text-background-color>
-				</k-hec-group>
-				<k-hec-clear-formatting></k-hec-clear-formatting>
-				<k-hec-insert-table></k-hec-insert-table>
-				<k-cec-editor-theme></k-cec-editor-theme>
-				<k-hec-mode></k-hec-mode>
-				<k-cec-fullscreen></k-cec-fullscreen>
+				<k-control-group>
+					<kc-align-left></kc-align-left>
+					<kc-align-center></kc-align-center>
+					<kc-align-right></kc-align-right>
+					<kc-align-justify></kc-align-justify>
+				</k-control-group>
+				<kc-create-link></kc-create-link>
+				<k-control-group>
+					<kc-text-color></kc-text-color>
+					<kc-text-background-color></kc-text-background-color>
+				</k-control-group>
+				<kc-clear-formatting></kc-clear-formatting>
+				<kc-insert-table></kc-insert-table>
+				<kc-editor-theme></kc-editor-theme>
+				<kc-mode></kc-mode>
+				<kc-fullscreen></kc-fullscreen>
 			`,
 			bottomLeft: html`
-				<k-hec-word-count></k-hec-word-count>
-				<k-hec-character-count></k-hec-character-count>
+				<kc-word-count></kc-word-count>
+				<kc-character-count></kc-character-count>
 			`,
 			bottomRight: null,
 		},

package/src/components/MarkdownEditor.js

@@ -3,6 +3,7 @@ import ShadowComponent from './ShadowComponent.js';
 import renderMarkdown from '../utils/renderMarkdown.js';
 import sanitizeHtml, { STRIP_COMPLETELY } from '../utils/sanitizeHtml.js';
 import debounce from '../utils/debounce.js';
+import Control from './controls/Control.js';
 import './Resize.js';
 import './Tabs.js';
 
@@ -93,15 +94,14 @@ export default class MarkdownEditor extends ShadowComponent {
     Lifecycle
   */
   loadControls() {
-    const modules = this.constructor.controlModules[this.controls];
-    if(!modules?.length) return;
-    const loaded = this.constructor.loadedModules;
-    const base = new URL('./markdownEditorControls/', import.meta.url).href;
-    modules.filter(m => !loaded.has(m)).forEach(m => { loaded.add(m); import(`${base}${m}.js`); });
+    const set = this.constructor.controlSets[this.controls];
+    if(!set) return;
+    Control.load(Object.values(set));
   }
 
   connectedCallback() {
     super.connectedCallback();
+    if(!this.hasAttribute('controlled')) this.setAttribute('controlled', '');
     if(this.hasAttribute('value')){
       this[defaultValue] = this.getAttribute('value');
     }
@@ -303,6 +303,71 @@ export default class MarkdownEditor extends ShadowComponent {
     });
   }
 
+  /*
+    Unified Formatting API — implemented as text-manipulation wrappers
+    over the helpers above so controls (kc-bold, kc-italic, etc.) can
+    target this host the same way they target HtmlEditor.
+  */
+  bold() { this.wrapSelection('**', '**', 'bold text'); return this; }
+  italic() { this.wrapSelection('_', '_', 'italic text'); return this; }
+  strikethrough() { this.wrapSelection('~~', '~~', 'strikethrough'); return this; }
+  inlineCode() {
+    const sel = this.getSelection();
+    if(sel.text.includes('\n')) this.wrapSelection('```\n', '\n```', 'code');
+    else this.wrapSelection('`', '`', 'code');
+    return this;
+  }
+  quote() { this.insertLinePrefix('> '); return this; }
+  bulletList() { this.insertLinePrefix('- '); return this; }
+  numberList() {
+    const ta = this.textarea;
+    if(!ta) return this;
+    if(this.mode !== 'write') this.mode = 'write';
+    this.updateComplete.then(() => {
+      ta.focus();
+      const { selectionStart: start, selectionEnd: end, value } = ta;
+      const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+      const lineEndIdx = value.indexOf('\n', end);
+      const lineEnd = lineEndIdx === -1 ? value.length : lineEndIdx;
+      const block = value.substring(lineStart, lineEnd);
+      const lines = block.split('\n');
+      const numbered = /^\d+\. /;
+      const nonEmpty = lines.filter(l => l.length > 0);
+      const allNumbered = nonEmpty.length > 0 && nonEmpty.every(l => numbered.test(l));
+      let processed;
+      if(allNumbered){
+        processed = lines.map(l => l.replace(numbered, ''));
+      } else {
+        let n = 1;
+        processed = lines.map(l => {
+          if(!l) return l;
+          const stripped = l.replace(numbered, '');
+          return `${n++}. ${stripped}`;
+        });
+      }
+      const nextBlock = processed.join('\n');
+      const next = value.substring(0, lineStart) + nextBlock + value.substring(lineEnd);
+      ta.value = next;
+      ta.selectionStart = lineStart;
+      ta.selectionEnd = lineStart + nextBlock.length;
+      this.value = next;
+      ta.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    return this;
+  }
+  formatBlock(tag) {
+    const t = (tag || '').toLowerCase();
+    if(/^h[1-6]$/.test(t)){
+      const lvl = parseInt(t.slice(1), 10);
+      this.insertLinePrefix('#'.repeat(lvl) + ' ', /^#{1,6} /);
+    } else if(t === 'blockquote'){
+      this.quote();
+    } else if(t === 'pre'){
+      this.wrapSelection('```\n', '\n```', 'code');
+    }
+    return this;
+  }
+
   /*
     Protected Members
   */
@@ -375,7 +440,7 @@ export default class MarkdownEditor extends ShadowComponent {
     const newMode = e.detail?.tab;
     if(!newMode || newMode === this.mode) return;
     this.mode = newMode;
-    this.dispatchEvent(new CustomEvent('mode-change', {
+    this.dispatchEvent(new CustomEvent('mode-changed', {
       detail: { mode: newMode },
       bubbles: true
     }));
@@ -520,74 +585,67 @@ export default class MarkdownEditor extends ShadowComponent {
     be imported eagerly. Lit creates the elements as plain HTMLElements
     until their definitions arrive, then the browser upgrades them in place.
   */
-  static loadedModules = new Set();
-  static controlModules = {
-    minimal: ['Menu', 'FormatBlock', 'Bold', 'Italic', 'BulletList', 'NumberedList'],
-    normal: ['Menu', 'FormatBlock', 'Bold', 'Italic', 'Quote', 'Code', 'Link', 'BulletList', 'NumberedList'],
-    full: ['Menu', 'FormatBlock', 'Bold', 'Italic', 'Strikethrough', 'Quote', 'Code', 'Link', 'Image', 'Table', 'BulletList', 'NumberedList', 'SpeechToText']
-  };
-
   static controlSets = {
     '': { top: null, bottom: null },
     none: { top: null, bottom: null },
     minimal: {
       top: html`
-        <k-md-menu label="Heading">
-          <k-icon slot="trigger" name="text_fields"></k-icon>
-          <k-md-format-block tag="h1"></k-md-format-block>
-          <k-md-format-block tag="h3"></k-md-format-block>
-          <k-md-format-block tag="h5"></k-md-format-block>
-        </k-md-menu>
-        <k-md-bold></k-md-bold>
-        <k-md-italic></k-md-italic>
-        <k-md-bullet-list></k-md-bullet-list>
-        <k-md-numbered-list></k-md-numbered-list>
+        <kc-menu>
+          <k-icon slot="icon" name="text_fields"></k-icon>
+          <kc-format-block tag="h1"></kc-format-block>
+          <kc-format-block tag="h3"></kc-format-block>
+          <kc-format-block tag="h5"></kc-format-block>
+        </kc-menu>
+        <kc-bold></kc-bold>
+        <kc-italic></kc-italic>
+        <kc-bullet-list></kc-bullet-list>
+        <kc-number-list></kc-number-list>
       `,
       bottom: null
     },
     normal: {
       top: html`
-        <k-md-menu label="Heading">
-          <k-icon slot="trigger" name="text_fields"></k-icon>
-          <k-md-format-block tag="h1"></k-md-format-block>
-          <k-md-format-block tag="h2"></k-md-format-block>
-          <k-md-format-block tag="h3"></k-md-format-block>
-          <k-md-format-block tag="h4"></k-md-format-block>
-          <k-md-format-block tag="h5"></k-md-format-block>
-          <k-md-format-block tag="h6"></k-md-format-block>
-        </k-md-menu>
-        <k-md-bold></k-md-bold>
-        <k-md-italic></k-md-italic>
-        <k-md-quote></k-md-quote>
-        <k-md-code></k-md-code>
-        <k-md-link></k-md-link>
-        <k-md-bullet-list></k-md-bullet-list>
-        <k-md-numbered-list></k-md-numbered-list>
+        <kc-menu>
+          <k-icon slot="icon" name="text_fields"></k-icon>
+          <kc-format-block tag="h1"></kc-format-block>
+          <kc-format-block tag="h2"></kc-format-block>
+          <kc-format-block tag="h3"></kc-format-block>
+          <kc-format-block tag="h4"></kc-format-block>
+          <kc-format-block tag="h5"></kc-format-block>
+          <kc-format-block tag="h6"></kc-format-block>
+        </kc-menu>
+        <kc-bold></kc-bold>
+        <kc-italic></kc-italic>
+        <kc-quote></kc-quote>
+        <kc-inline-code></kc-inline-code>
+        <kc-md-link></kc-md-link>
+        <kc-bullet-list></kc-bullet-list>
+        <kc-number-list></kc-number-list>
       `,
       bottom: null
     },
     full: {
       top: html`
-        <k-md-menu label="Heading">
-          <k-icon slot="trigger" name="text_fields"></k-icon>
-          <k-md-format-block tag="h1"></k-md-format-block>
-          <k-md-format-block tag="h2"></k-md-format-block>
-          <k-md-format-block tag="h3"></k-md-format-block>
-          <k-md-format-block tag="h4"></k-md-format-block>
-          <k-md-format-block tag="h5"></k-md-format-block>
-          <k-md-format-block tag="h6"></k-md-format-block>
-        </k-md-menu>
-        <k-md-bold></k-md-bold>
-        <k-md-italic></k-md-italic>
-        <k-md-strikethrough></k-md-strikethrough>
-        <k-md-quote></k-md-quote>
-        <k-md-code></k-md-code>
-        <k-md-link></k-md-link>
-        <k-md-image></k-md-image>
-        <k-md-table></k-md-table>
-        <k-md-bullet-list></k-md-bullet-list>
-        <k-md-numbered-list></k-md-numbered-list>
-        <k-md-speech-to-text></k-md-speech-to-text>
+        <kc-menu>
+          <k-icon slot="icon" name="text_fields"></k-icon>
+          <kc-format-block tag="h1"></kc-format-block>
+          <kc-format-block tag="h2"></kc-format-block>
+          <kc-format-block tag="h3"></kc-format-block>
+          <kc-format-block tag="h4"></kc-format-block>
+          <kc-format-block tag="h5"></kc-format-block>
+          <kc-format-block tag="h6"></kc-format-block>
+        </kc-menu>
+        <kc-bold></kc-bold>
+        <kc-italic></kc-italic>
+        <kc-strikethrough></kc-strikethrough>
+        <kc-quote></kc-quote>
+        <kc-inline-code></kc-inline-code>
+        <kc-md-link></kc-md-link>
+        <kc-md-image></kc-md-image>
+        <kc-md-table></kc-md-table>
+        <kc-bullet-list></kc-bullet-list>
+        <kc-number-list></kc-number-list>
+        <kc-md-speech-to-text></kc-md-speech-to-text>
       `,
       bottom: null
     }

package/src/components/Pagination.js

@@ -2,6 +2,7 @@ import { html, css, nothing } from '../lit-all.min.js';
 import ShadowComponent from './ShadowComponent.js';
 import { bound, closest } from '../utils/number.js';
 import { commaSeparatedArray } from '../utils/propConverters.js';
+import Control from './controls/Control.js';
 
 export default class Pagination extends ShadowComponent {
 	/*
@@ -37,15 +38,15 @@ export default class Pagination extends ShadowComponent {
 	/*
 		Lifecycle
 	*/
+	connectedCallback() {
+		super.connectedCallback();
+		if(!this.hasAttribute('controlled')) this.setAttribute('controlled', '');
+	}
+
 	loadControls() {
-		const modules = this.constructor.controlModules[this.controls];
-		if (!modules?.length) return;
-		const loaded = this.constructor.loadedModules;
-		const base = new URL('./paginationControls/', import.meta.url).href;
-		modules.filter(m => !loaded.has(m)).forEach(m => {
-			loaded.add(m);
-			import(`${base}${m}.js`);
-		});
+		const set = this.constructor.controlSets[this.controls];
+		if(!set) return;
+		Control.load(Object.values(set));
 	}
 
 	willUpdate(changedProperties) {
@@ -174,32 +175,26 @@ export default class Pagination extends ShadowComponent {
     }
   `;
 
-	static loadedModules = new Set();
-	static controlModules = {
-		simple: ['PrevPage', 'NextPage', 'PageInfo'],
-		full: ['FirstPage', 'PrevPage', 'GotoPage', 'NextPage', 'LastPage', 'ItemsPerPage']
-	};
-
 	static controlSets = {
 		'': { left: null, right: null },
 		none: { left: null, right: null },
 		simple: {
 			left: html`
-        <k-pg-prev></k-pg-prev>
-        <k-pg-page-info></k-pg-page-info>
-        <k-pg-next></k-pg-next>
+        <kc-pg-prev></kc-pg-prev>
+        <kc-pg-page-info></kc-pg-page-info>
+        <kc-pg-next></kc-pg-next>
       `,
 			right: null
 		},
 		full: {
 			left: html`
-        <k-pg-first></k-pg-first>
-        <k-pg-prev></k-pg-prev>
-        <k-pg-goto-page></k-pg-goto-page>
-        <k-pg-next></k-pg-next>
-        <k-pg-last></k-pg-last>
+        <kc-pg-first></kc-pg-first>
+        <kc-pg-prev></kc-pg-prev>
+        <kc-pg-goto-page></kc-pg-goto-page>
+        <kc-pg-next></kc-pg-next>
+        <kc-pg-last></kc-pg-last>
       `,
-			right: html`<k-pg-items-per-page></k-pg-items-per-page>`
+			right: html`<kc-pg-items-per-page></kc-pg-items-per-page>`
 		}
 	};
 }

package/src/components/Table.js

@@ -74,6 +74,11 @@ export default class Table extends ShadowComponent {
 
   /* Lifecycle Callbacks */
 
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('controlled')) this.setAttribute('controlled', '');
+  }
+
   firstUpdated() {
     this.setData({
       records: this.records,

package/src/components/controls/AlignCenter.js

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