add arrow key movement

Author: JesmoDev

src/packages/core/components/split-panel/split-panel.element.ts

@@ -222,6 +222,24 @@ export class UmbSplitPanelElement extends LitElement {
 		this.#connect();
 	}
 
+	#onKeydown(event: KeyboardEvent) {
+		if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+			const { width } = this.mainElement.getBoundingClientRect();
+			const divider = this.dividerElement.getBoundingClientRect();
+
+			const dividerPos = divider.left - this.mainElement.getBoundingClientRect().left;
+			const percentageFromWidth = (dividerPos / width) * 100;
+
+			const multiplier = event.shiftKey ? 10 : 1;
+			const step = 1 * multiplier * (event.key === 'ArrowLeft' ? -1 : 1);
+
+			const newPercent = percentageFromWidth + step;
+			const toPixels = (newPercent / 100) * this.mainElement.getBoundingClientRect().width;
+
+			this.#setPosition(toPixels);
+		}
+	}
+
 	render() {
 		return html`
 			<div id="main">
@@ -230,7 +248,7 @@ export class UmbSplitPanelElement extends LitElement {
 					@slotchange=${this.#onSlotChanged}
 					style="width: ${this._hasStartPanel ? '100%' : '0'}"></slot>
 				<div id="divider">
-					<div id="divider-touch-area" tabindex="0"></div>
+					<div id="divider-touch-area" tabindex="0" @keydown=${this.#onKeydown}></div>
 				</div>
 				<slot name="end" @slotchange=${this.#onSlotChanged} style="width: ${this._hasEndPanel ? '100%' : '0'}"></slot>
 			</div>