@oscarpalmer/oui 0.15.0 → 0.16.0

package/dist/css/button.css

@@ -67,9 +67,6 @@
 :where(.oui-button-tiny) {
   --oui-foreground-percentage: 12.5%;
   font-size: 0.75em;
-  font-weight: bold;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
 }
 :where(.oui-button:focus-visible) {
   --oui-outline-percentage: 75%;

package/dist/css/splitter.css

@@ -0,0 +1,78 @@
+
+:where(oui-splitter) {
+  display: flex;
+  flex-flow: row nowrap;
+  flex: 1;
+}
+:where(oui-splitter > :first-child) {
+  flex: var(--oui-splitter-size, 0.5);
+}
+:where(oui-splitter > :last-child) {
+  flex: calc(1 - var(--oui-splitter-size, 0.5));
+}
+
+:where([oui-splitter-separator]) {
+  width: 0.25rem;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 0.25rem;
+  position: relative;
+  transition: background 0.125s ease-in-out;
+}
+
+:where([oui-splitter-separator]:has([oui-splitter-handle]:focus)),
+:where([oui-splitter-separator]:has([oui-splitter-handle]:hover)),
+:where([oui-splitter-separator][oui-splitter-active]) {
+  background-color: rgba(0, 0, 255, 0.1);
+}
+
+:where([oui-splitter-handle]) {
+  width: 2rem;
+  height: 4rem;
+  padding: 0.875rem;
+  position: absolute;
+  inset: 50% auto auto 50%;
+  transform: translate3d(-50%, -50%, 0);
+  cursor: ew-resize;
+}
+:where([oui-splitter-handle]):focus {
+  outline: none;
+}
+:where([oui-splitter-handle])::after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  display: block;
+  background-color: rgba(0, 0, 0, 0.25);
+  outline: 0.25rem solid transparent;
+  outline-offset: 0.25rem;
+  border-radius: 0.25rem;
+  transition: background 0.125s ease-in-out, outline 0.125s ease-in-out;
+}
+
+:where([oui-splitter-handle]:focus)::after,
+:where([oui-splitter-handle]:hover)::after,
+:where([oui-splitter-handle][oui-splitter-active])::after {
+  background-color: rgba(0, 0, 255, 0.25);
+}
+
+:where([oui-splitter-handle]:focus-visible)::after {
+  outline-color: rgba(0, 0, 255, 0.25);
+}
+
+:where(oui-splitter[type=horizontal i],
+oui-splitter[oui-splitter-horizontal]) {
+  flex-flow: column nowrap;
+}
+:where(oui-splitter[type=horizontal i] [oui-splitter-separator],
+oui-splitter[oui-splitter-horizontal] [oui-splitter-separator]) {
+  width: 100%;
+  height: 0.25rem;
+}
+:where(oui-splitter[type=horizontal i] [oui-splitter-handle],
+oui-splitter[oui-splitter-horizontal] [oui-splitter-handle]) {
+  width: 4rem;
+  height: 2rem;
+  cursor: ns-resize;
+}
+
+

package/dist/js/floatable.cjs

@@ -128,7 +128,7 @@ function stop(floatable) {
   floatable.deactivate = void 0;
   floatable.frame = void 0;
 }
-const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 4;
+const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 2;
 exports.Floatable = Floatable;
 exports.activate = activate;
 exports.deactivate = deactivate;

package/dist/js/floatable.js

@@ -126,7 +126,7 @@ function stop(floatable) {
   floatable.deactivate = void 0;
   floatable.frame = void 0;
 }
-const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 4;
+const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 2;
 export {
   Floatable,
   activate,

package/dist/js/popover.cjs

@@ -95,7 +95,7 @@ function closeAbove(element) {
       floatable.deactivate(floatable$1, active, order);
     }
   }
-  order[index2].content.focus();
+  focus(order[index2].content);
 }
 function focus(content) {
   let target = focusable.getFocusable(content)[0];

package/dist/js/popover.js

@@ -93,7 +93,7 @@ function closeAbove(element) {
       deactivate(floatable, active, order);
     }
   }
-  order[index2].content.focus();
+  focus(order[index2].content);
 }
 function focus(content) {
   let target = getFocusable(content)[0];

package/dist/js/splitter.cjs

@@ -0,0 +1,211 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const number = require("@oscarpalmer/atoms/number");
+const event = require("@oscarpalmer/toretto/event");
+const find = require("@oscarpalmer/toretto/find");
+class OuiSplitterElement extends HTMLElement {
+  #splitter;
+  constructor() {
+    super();
+    const panels = [...this.children].filter(
+      (child) => child instanceof HTMLElement
+    );
+    if (panels.length !== 2) {
+      throw new Error("oui-splitter must have exactly two panels.");
+    }
+    this.#splitter = new Splitter(this, panels);
+  }
+  connectedCallback() {
+    if (this.#splitter.types.auto) {
+      observer.observe(this);
+    }
+  }
+  disconnectedCallback() {
+    if (this.#splitter.types.auto) {
+      observer.unobserve(this);
+    }
+  }
+}
+class Splitter {
+  constructor(element, panels) {
+    this.element = element;
+    this.panels = panels;
+    this.handle = createHandle();
+    this.rectangle = element.getBoundingClientRect();
+    this.separator = createSeparator();
+    this.separator.append(this.handle);
+    panels[0].insertAdjacentElement("afterend", this.separator);
+    mapped.set(element, this);
+    mapped.set(this.handle, this);
+    setSize(this, this.flex.value);
+    this.types = getTypes(this);
+    if (this.types.horizontal) {
+      this.element.setAttribute("oui-splitter-horizontal", "");
+    }
+  }
+  flex = {
+    previous: 0.5,
+    value: 0.5
+  };
+  handle;
+  rectangle;
+  separator;
+  types;
+}
+function createHandle() {
+  const handle = document.createElement("span");
+  handle.tabIndex = 0;
+  handle.setAttribute("aria-label", "Resize panels");
+  handle.setAttribute("oui-splitter-handle", "");
+  return handle;
+}
+function createSeparator() {
+  const separator = document.createElement("div");
+  separator.setAttribute("oui-splitter-separator", "");
+  return separator;
+}
+function getFlex(splitter2, value) {
+  const { height, left, top, width } = splitter2.rectangle;
+  const offset = value - (splitter2.types.horizontal ? top : left);
+  const fraction = offset / (splitter2.types.horizontal ? height : width);
+  return number.clamp(fraction, 0.1, 0.9);
+}
+function getTypes(splitter2, width, height) {
+  const type = splitter2.element.getAttribute("type")?.trim() ?? "";
+  if (type === "horizontal") {
+    return {
+      auto: false,
+      horizontal: true
+    };
+  }
+  if (type === "auto") {
+    return {
+      auto: true,
+      horizontal: (height ?? splitter2.rectangle.height) > (width ?? splitter2.rectangle.width)
+    };
+  }
+  return {
+    auto: false,
+    horizontal: false
+  };
+}
+function onEnd(reset) {
+  if (splitter != null) {
+    splitter.handle.removeAttribute("oui-splitter-active");
+    splitter.separator.removeAttribute("oui-splitter-active");
+    if (reset) {
+      setSize(splitter, splitter.flex.previous);
+    } else {
+      splitter.flex.previous = splitter.flex.value;
+    }
+  }
+  splitter = void 0;
+}
+function onKeydown(event2) {
+  switch (true) {
+    case allKeys.has(event2.key):
+      onNavigate(event2);
+      break;
+    case event2.key === "Escape":
+      onEnd(true);
+      break;
+  }
+}
+function onMousedown(event2) {
+  splitter = mapped.get(
+    find.findAncestor(
+      event2.target,
+      "[oui-splitter-handle]"
+    )
+  );
+  if (splitter == null) {
+    return;
+  }
+  splitter.handle.setAttribute("oui-splitter-active", "");
+  splitter.separator.setAttribute("oui-splitter-active", "");
+  splitter.rectangle = splitter.element.getBoundingClientRect();
+}
+function onMousemove(event$1) {
+  if (splitter == null) {
+    return;
+  }
+  const position = event.getPosition(event$1);
+  if (position != null) {
+    splitter.flex.value = getFlex(
+      splitter,
+      splitter.types.horizontal ? position.y : position.x
+    );
+    setSize(splitter, splitter.flex.value);
+  }
+}
+function onMouseup() {
+  if (splitter != null) {
+    onEnd(false);
+  }
+}
+function onNavigate(event2) {
+  const splitter2 = mapped.get(
+    find.findAncestor(
+      event2.target,
+      "[oui-splitter-handle]"
+    )
+  );
+  if (splitter2 == null) {
+    return;
+  }
+  if (absoluteKeys.has(event2.key)) {
+    setSize(splitter2, event2.key === "End" ? 0.9 : 0.1, true);
+    return;
+  }
+  if (splitter2.types.horizontal && !horizontalKeys.has(event2.key) || !splitter2.types.horizontal && !verticalKeys.has(event2.key)) {
+    return;
+  }
+  const modifier = negativeKeys.has(event2.key) ? -1 : 1;
+  setSize(splitter2, splitter2.flex.value + modifier * 0.05, true);
+}
+function onObservation(entries) {
+  if (frame != null) {
+    cancelAnimationFrame(frame);
+  }
+  frame = requestAnimationFrame(() => {
+    for (const entry of entries) {
+      const splitter2 = mapped.get(entry.target);
+      if (splitter2 == null) {
+        return;
+      }
+      splitter2.types = getTypes(
+        splitter2,
+        entry.contentRect.width,
+        entry.contentRect.height
+      );
+      if (splitter2.types.horizontal) {
+        splitter2.element.setAttribute("oui-splitter-horizontal", "");
+      } else {
+        splitter2.element.removeAttribute("oui-splitter-horizontal");
+      }
+    }
+    frame = void 0;
+  });
+}
+function setSize(splitter2, size, previous) {
+  splitter2.flex.value = size;
+  if (previous) {
+    splitter2.flex.previous = size;
+  }
+  splitter2.element.style.setProperty("--oui-splitter-size", `${size}`);
+}
+const absoluteKeys = /* @__PURE__ */ new Set(["End", "Home"]);
+const horizontalKeys = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);
+const mapped = /* @__PURE__ */ new WeakMap();
+const observer = new ResizeObserver(onObservation);
+const negativeKeys = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
+const verticalKeys = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight"]);
+const allKeys = /* @__PURE__ */ new Set([...absoluteKeys, ...horizontalKeys, ...verticalKeys]);
+let frame;
+let splitter;
+customElements.define("oui-splitter", OuiSplitterElement);
+event.on(document, "keydown", onKeydown);
+event.on(document, "mousedown", onMousedown);
+event.on(document, "mousemove", onMousemove);
+event.on(document, "mouseup", onMouseup);
+exports.OuiSplitterElement = OuiSplitterElement;

package/dist/js/splitter.js

@@ -0,0 +1,211 @@
+import { clamp } from "@oscarpalmer/atoms/number";
+import { on, getPosition } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+class OuiSplitterElement extends HTMLElement {
+  #splitter;
+  constructor() {
+    super();
+    const panels = [...this.children].filter(
+      (child) => child instanceof HTMLElement
+    );
+    if (panels.length !== 2) {
+      throw new Error("oui-splitter must have exactly two panels.");
+    }
+    this.#splitter = new Splitter(this, panels);
+  }
+  connectedCallback() {
+    if (this.#splitter.types.auto) {
+      observer.observe(this);
+    }
+  }
+  disconnectedCallback() {
+    if (this.#splitter.types.auto) {
+      observer.unobserve(this);
+    }
+  }
+}
+class Splitter {
+  constructor(element, panels) {
+    this.element = element;
+    this.panels = panels;
+    this.handle = createHandle();
+    this.rectangle = element.getBoundingClientRect();
+    this.separator = createSeparator();
+    this.separator.append(this.handle);
+    panels[0].insertAdjacentElement("afterend", this.separator);
+    mapped.set(element, this);
+    mapped.set(this.handle, this);
+    setSize(this, this.flex.value);
+    this.types = getTypes(this);
+    if (this.types.horizontal) {
+      this.element.setAttribute("oui-splitter-horizontal", "");
+    }
+  }
+  flex = {
+    previous: 0.5,
+    value: 0.5
+  };
+  handle;
+  rectangle;
+  separator;
+  types;
+}
+function createHandle() {
+  const handle = document.createElement("span");
+  handle.tabIndex = 0;
+  handle.setAttribute("aria-label", "Resize panels");
+  handle.setAttribute("oui-splitter-handle", "");
+  return handle;
+}
+function createSeparator() {
+  const separator = document.createElement("div");
+  separator.setAttribute("oui-splitter-separator", "");
+  return separator;
+}
+function getFlex(splitter2, value) {
+  const { height, left, top, width } = splitter2.rectangle;
+  const offset = value - (splitter2.types.horizontal ? top : left);
+  const fraction = offset / (splitter2.types.horizontal ? height : width);
+  return clamp(fraction, 0.1, 0.9);
+}
+function getTypes(splitter2, width, height) {
+  const type = splitter2.element.getAttribute("type")?.trim() ?? "";
+  if (type === "horizontal") {
+    return {
+      auto: false,
+      horizontal: true
+    };
+  }
+  if (type === "auto") {
+    return {
+      auto: true,
+      horizontal: (height ?? splitter2.rectangle.height) > (width ?? splitter2.rectangle.width)
+    };
+  }
+  return {
+    auto: false,
+    horizontal: false
+  };
+}
+function onEnd(reset) {
+  if (splitter != null) {
+    splitter.handle.removeAttribute("oui-splitter-active");
+    splitter.separator.removeAttribute("oui-splitter-active");
+    if (reset) {
+      setSize(splitter, splitter.flex.previous);
+    } else {
+      splitter.flex.previous = splitter.flex.value;
+    }
+  }
+  splitter = void 0;
+}
+function onKeydown(event) {
+  switch (true) {
+    case allKeys.has(event.key):
+      onNavigate(event);
+      break;
+    case event.key === "Escape":
+      onEnd(true);
+      break;
+  }
+}
+function onMousedown(event) {
+  splitter = mapped.get(
+    findAncestor(
+      event.target,
+      "[oui-splitter-handle]"
+    )
+  );
+  if (splitter == null) {
+    return;
+  }
+  splitter.handle.setAttribute("oui-splitter-active", "");
+  splitter.separator.setAttribute("oui-splitter-active", "");
+  splitter.rectangle = splitter.element.getBoundingClientRect();
+}
+function onMousemove(event) {
+  if (splitter == null) {
+    return;
+  }
+  const position = getPosition(event);
+  if (position != null) {
+    splitter.flex.value = getFlex(
+      splitter,
+      splitter.types.horizontal ? position.y : position.x
+    );
+    setSize(splitter, splitter.flex.value);
+  }
+}
+function onMouseup() {
+  if (splitter != null) {
+    onEnd(false);
+  }
+}
+function onNavigate(event) {
+  const splitter2 = mapped.get(
+    findAncestor(
+      event.target,
+      "[oui-splitter-handle]"
+    )
+  );
+  if (splitter2 == null) {
+    return;
+  }
+  if (absoluteKeys.has(event.key)) {
+    setSize(splitter2, event.key === "End" ? 0.9 : 0.1, true);
+    return;
+  }
+  if (splitter2.types.horizontal && !horizontalKeys.has(event.key) || !splitter2.types.horizontal && !verticalKeys.has(event.key)) {
+    return;
+  }
+  const modifier = negativeKeys.has(event.key) ? -1 : 1;
+  setSize(splitter2, splitter2.flex.value + modifier * 0.05, true);
+}
+function onObservation(entries) {
+  if (frame != null) {
+    cancelAnimationFrame(frame);
+  }
+  frame = requestAnimationFrame(() => {
+    for (const entry of entries) {
+      const splitter2 = mapped.get(entry.target);
+      if (splitter2 == null) {
+        return;
+      }
+      splitter2.types = getTypes(
+        splitter2,
+        entry.contentRect.width,
+        entry.contentRect.height
+      );
+      if (splitter2.types.horizontal) {
+        splitter2.element.setAttribute("oui-splitter-horizontal", "");
+      } else {
+        splitter2.element.removeAttribute("oui-splitter-horizontal");
+      }
+    }
+    frame = void 0;
+  });
+}
+function setSize(splitter2, size, previous) {
+  splitter2.flex.value = size;
+  if (previous) {
+    splitter2.flex.previous = size;
+  }
+  splitter2.element.style.setProperty("--oui-splitter-size", `${size}`);
+}
+const absoluteKeys = /* @__PURE__ */ new Set(["End", "Home"]);
+const horizontalKeys = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);
+const mapped = /* @__PURE__ */ new WeakMap();
+const observer = new ResizeObserver(onObservation);
+const negativeKeys = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
+const verticalKeys = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight"]);
+const allKeys = /* @__PURE__ */ new Set([...absoluteKeys, ...horizontalKeys, ...verticalKeys]);
+let frame;
+let splitter;
+customElements.define("oui-splitter", OuiSplitterElement);
+on(document, "keydown", onKeydown);
+on(document, "mousedown", onMousedown);
+on(document, "mousemove", onMousemove);
+on(document, "mouseup", onMouseup);
+export {
+  OuiSplitterElement
+};

package/package.json

@@ -49,6 +49,26 @@
 				"default": "./dist/js/focus-trap/standalone.cjs"
 			}
 		},
+		"./popover": {
+			"import": {
+				"types": "./types/popover.d.ts",
+				"default": "./dist/js/popover.js"
+			},
+			"require": {
+				"types": "./types/popover.d.cts",
+				"default": "./dist/js/popover.cjs"
+			}
+		},
+		"./splitter": {
+			"import": {
+				"types": "./types/splitter.d.ts",
+				"default": "./dist/js/splitter.js"
+			},
+			"require": {
+				"types": "./types/splitter.d.cts",
+				"default": "./dist/js/splitter.cjs"
+			}
+		},
 		"./tooltip": {
 			"import": {
 				"types": "./types/tooltip.d.ts",
@@ -94,5 +114,5 @@
 	},
 	"type": "module",
 	"types": "types/index.d.cts",
-	"version": "0.15.0"
+	"version": "0.16.0"
 }

package/src/css/button.scss

@@ -58,9 +58,6 @@
 		--oui-foreground-percentage: 12.5%;
 
 		font-size: 0.75em;
-		font-weight: bold;
-		letter-spacing: 0.1em;
-		text-transform: uppercase;
 	}
 
 	:where(&:focus-visible) {

package/src/css/splitter.scss

@@ -0,0 +1,87 @@
+@use 'mixins.scss' as mixins;
+
+oui-splitter {
+	:where(&) {
+		display: flex;
+		flex-flow: row nowrap;
+		flex: 1;
+	}
+
+	:where(& > :first-child) {
+		flex: var(--oui-splitter-size, .5);
+	}
+
+	:where(& > :last-child) {
+		flex: calc(1 - var(--oui-splitter-size, .5));
+	}
+}
+
+:where([oui-splitter-separator]) {
+	width: .25rem;
+	background-color: rgba(0, 0, 0, 0.1);
+	border-radius: .25rem;
+	position: relative;
+	transition: background .125s ease-in-out;
+}
+
+:where([oui-splitter-separator]:has([oui-splitter-handle]:focus)),
+:where([oui-splitter-separator]:has([oui-splitter-handle]:hover)),
+:where([oui-splitter-separator][oui-splitter-active]) {
+	background-color: rgba(0, 0, 255, .1);
+}
+
+:where([oui-splitter-handle]) {
+	width: 2rem;
+	height: 4rem;
+	padding: .875rem;
+	position: absolute;
+	inset: 50% auto auto 50%;
+	transform: translate3d(-50%, -50%, 0);
+	cursor: ew-resize;
+
+	&:focus {
+		outline: none;
+	}
+
+	&::after {
+		content: '';
+		width: 100%;
+		height: 100%;
+		display: block;
+		background-color: rgba(0, 0, 0, 0.25);
+		outline: .25rem solid transparent;
+		outline-offset: .25rem;
+		border-radius: .25rem;
+		transition: background .125s ease-in-out, outline .125s ease-in-out;
+	}
+}
+
+:where([oui-splitter-handle]:focus),
+:where([oui-splitter-handle]:hover),
+:where([oui-splitter-handle][oui-splitter-active]) {
+	&::after {
+		background-color: rgba(0, 0, 255, .25);
+	}
+}
+
+:where([oui-splitter-handle]:focus-visible)::after {
+	outline-color: rgba(0, 0, 255, .25);
+}
+
+oui-splitter[type='horizontal' i],
+oui-splitter[oui-splitter-horizontal] {
+	:where(&) {
+		flex-flow: column nowrap;
+	}
+
+	:where(& [oui-splitter-separator]) {
+		width: 100%;
+		height: .25rem;
+	}
+
+	:where(& [oui-splitter-handle]) {
+		width: 4rem;
+		height: 2rem;
+		cursor: ns-resize;
+	}
+}

package/src/js/floatable.ts

@@ -193,4 +193,4 @@ function stop(floatable: Floatable): void {
 //
 
 const margin =
-	Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 4;
+	Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 2;

package/src/js/popover.ts

@@ -132,7 +132,7 @@ function closeAbove(element: HTMLElement): void {
 		}
 	}
 
-	order[index].content.focus();
+	focus(order[index].content);
 }
 
 function focus(content: HTMLElement): void {

package/src/js/splitter.ts

@@ -0,0 +1,317 @@
+import {clamp} from '@oscarpalmer/atoms/number';
+import {getPosition, on} from '@oscarpalmer/toretto/event';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'oui-splitter': OuiSplitterElement;
+	}
+}
+
+type Flex = {
+	previous: number;
+	value: number;
+};
+
+export class OuiSplitterElement extends HTMLElement {
+	#splitter: Splitter;
+
+	constructor() {
+		super();
+
+		const panels = [...this.children].filter(
+			child => child instanceof HTMLElement,
+		);
+
+		if (panels.length !== 2) {
+			throw new Error('oui-splitter must have exactly two panels.');
+		}
+
+		this.#splitter = new Splitter(this, panels);
+	}
+
+	connectedCallback(): void {
+		if (this.#splitter.types.auto) {
+			observer.observe(this);
+		}
+	}
+
+	disconnectedCallback(): void {
+		if (this.#splitter.types.auto) {
+			observer.unobserve(this);
+		}
+	}
+}
+
+class Splitter {
+	flex: Flex = {
+		previous: 0.5,
+		value: 0.5,
+	};
+
+	handle: HTMLSpanElement;
+
+	rectangle: DOMRect;
+
+	separator: HTMLDivElement;
+
+	types: Types;
+
+	constructor(
+		public element: OuiSplitterElement,
+		public panels: HTMLElement[],
+	) {
+		this.handle = createHandle();
+		this.rectangle = element.getBoundingClientRect();
+		this.separator = createSeparator();
+
+		this.separator.append(this.handle);
+
+		panels[0].insertAdjacentElement('afterend', this.separator);
+
+		mapped.set(element, this);
+		mapped.set(this.handle, this);
+
+		setSize(this, this.flex.value);
+
+		this.types = getTypes(this);
+
+		if (this.types.horizontal) {
+			this.element.setAttribute('oui-splitter-horizontal', '');
+		}
+	}
+}
+
+type Types = {
+	auto: boolean;
+	horizontal: boolean;
+};
+
+//
+
+function createHandle(): HTMLSpanElement {
+	const handle = document.createElement('span');
+
+	handle.tabIndex = 0;
+
+	handle.setAttribute('aria-label', 'Resize panels');
+	handle.setAttribute('oui-splitter-handle', '');
+
+	return handle;
+}
+
+function createSeparator(): HTMLDivElement {
+	const separator = document.createElement('div');
+
+	separator.setAttribute('oui-splitter-separator', '');
+
+	return separator;
+}
+
+function getFlex(splitter: Splitter, value: number): number {
+	const {height, left, top, width} = splitter.rectangle;
+
+	const offset = value - (splitter.types.horizontal ? top : left);
+
+	const fraction = offset / (splitter.types.horizontal ? height : width);
+
+	return clamp(fraction, 0.1, 0.9);
+}
+
+function getTypes(splitter: Splitter, width?: number, height?: number): Types {
+	const type = splitter.element.getAttribute('type')?.trim() ?? '';
+
+	if (type === 'horizontal') {
+		return {
+			auto: false,
+			horizontal: true,
+		};
+	}
+
+	if (type === 'auto') {
+		return {
+			auto: true,
+			horizontal:
+				(height ?? splitter.rectangle.height) >
+				(width ?? splitter.rectangle.width),
+		};
+	}
+
+	return {
+		auto: false,
+		horizontal: false,
+	};
+}
+
+function onEnd(reset: boolean): void {
+	if (splitter != null) {
+		splitter.handle.removeAttribute('oui-splitter-active');
+		splitter.separator.removeAttribute('oui-splitter-active');
+
+		if (reset) {
+			setSize(splitter, splitter.flex.previous);
+		} else {
+			splitter.flex.previous = splitter.flex.value;
+		}
+	}
+
+	splitter = undefined;
+}
+
+function onKeydown(event: KeyboardEvent): void {
+	switch (true) {
+		case allKeys.has(event.key):
+			onNavigate(event);
+			break;
+
+		case event.key === 'Escape':
+			onEnd(true);
+			break;
+
+		default:
+			break;
+	}
+}
+
+function onMousedown(event: Event): void {
+	splitter = mapped.get(
+		findAncestor(
+			event.target as never,
+			'[oui-splitter-handle]',
+		) as HTMLSpanElement,
+	);
+
+	if (splitter == null) {
+		return;
+	}
+
+	splitter.handle.setAttribute('oui-splitter-active', '');
+	splitter.separator.setAttribute('oui-splitter-active', '');
+
+	splitter.rectangle = splitter.element.getBoundingClientRect();
+}
+
+function onMousemove(event: MouseEvent): void {
+	if (splitter == null) {
+		return;
+	}
+
+	const position = getPosition(event);
+
+	if (position != null) {
+		splitter.flex.value = getFlex(
+			splitter,
+			splitter.types.horizontal ? position.y : position.x,
+		);
+
+		setSize(splitter, splitter.flex.value);
+	}
+}
+
+function onMouseup(): void {
+	if (splitter != null) {
+		onEnd(false);
+	}
+}
+
+function onNavigate(event: KeyboardEvent): void {
+	const splitter = mapped.get(
+		findAncestor(
+			event.target as never,
+			'[oui-splitter-handle]',
+		) as HTMLSpanElement,
+	);
+
+	if (splitter == null) {
+		return;
+	}
+
+	if (absoluteKeys.has(event.key)) {
+		setSize(splitter, event.key === 'End' ? 0.9 : 0.1, true);
+
+		return;
+	}
+
+	if (
+		(splitter.types.horizontal && !horizontalKeys.has(event.key)) ||
+		(!splitter.types.horizontal && !verticalKeys.has(event.key))
+	) {
+		return;
+	}
+
+	const modifier = negativeKeys.has(event.key) ? -1 : 1;
+
+	setSize(splitter, splitter.flex.value + modifier * 0.05, true);
+}
+
+function onObservation(entries: ResizeObserverEntry[]): void {
+	if (frame != null) {
+		cancelAnimationFrame(frame);
+	}
+
+	frame = requestAnimationFrame(() => {
+		for (const entry of entries) {
+			const splitter = mapped.get(entry.target as HTMLElement);
+
+			if (splitter == null) {
+				return;
+			}
+
+			splitter.types = getTypes(
+				splitter,
+				entry.contentRect.width,
+				entry.contentRect.height,
+			);
+
+			if (splitter.types.horizontal) {
+				splitter.element.setAttribute('oui-splitter-horizontal', '');
+			} else {
+				splitter.element.removeAttribute('oui-splitter-horizontal');
+			}
+		}
+
+		frame = undefined;
+	});
+}
+
+function setSize(splitter: Splitter, size: number, previous?: boolean): void {
+	splitter.flex.value = size;
+
+	if (previous) {
+		splitter.flex.previous = size;
+	}
+
+	splitter.element.style.setProperty('--oui-splitter-size', `${size}`);
+}
+
+//
+
+const absoluteKeys = new Set(['End', 'Home']);
+
+const horizontalKeys = new Set(['ArrowDown', 'ArrowUp']);
+
+const mapped = new WeakMap<HTMLElement, Splitter>();
+
+const observer = new ResizeObserver(onObservation);
+
+const negativeKeys = new Set(['ArrowLeft', 'ArrowUp']);
+
+const verticalKeys = new Set(['ArrowLeft', 'ArrowRight']);
+
+const allKeys = new Set([...absoluteKeys, ...horizontalKeys, ...verticalKeys]);
+
+let frame: DOMHighResTimeStamp | undefined;
+
+let splitter: Splitter | undefined;
+
+//
+
+customElements.define('oui-splitter', OuiSplitterElement);
+
+on(document, 'keydown', onKeydown);
+
+on(document, 'mousedown', onMousedown);
+
+on(document, 'mousemove', onMousemove);
+
+on(document, 'mouseup', onMouseup);

package/types/splitter.d.cts

@@ -0,0 +1,10 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export declare class OuiSplitterElement extends HTMLElement {
+	#private;
+	constructor();
+	connectedCallback(): void;
+	disconnectedCallback(): void;
+}
+
+export {};

package/types/splitter.d.ts

@@ -0,0 +1,11 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        'oui-splitter': OuiSplitterElement;
+    }
+}
+export declare class OuiSplitterElement extends HTMLElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}