@oscarpalmer/oui 0.16.0 → 0.17.0

package/dist/js/splitter.js

@@ -1,3 +1,5 @@
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { round } from "@oscarpalmer/atoms/math";
 import { clamp } from "@oscarpalmer/atoms/number";
 import { on, getPosition } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
@@ -24,49 +26,59 @@ class OuiSplitterElement extends HTMLElement {
     }
   }
 }
+let index = 0;
 class Splitter {
   constructor(element, panels) {
     this.element = element;
     this.panels = panels;
+    if (isNullableOrWhitespace(element.id)) {
+      element.id = `oui_splitter_${++index}`;
+    }
+    this.values = getValues(element);
     this.handle = createHandle();
     this.rectangle = element.getBoundingClientRect();
-    this.separator = createSeparator();
+    this.separator = createSeparator(this);
     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);
+    setSize(this, this.values.now.current);
     this.types = getTypes(this);
     if (this.types.horizontal) {
       this.element.setAttribute("oui-splitter-horizontal", "");
     }
+    setAriaOrientation(this);
+    setAriaValue(this);
   }
-  flex = {
-    previous: 0.5,
-    value: 0.5
-  };
   handle;
   rectangle;
   separator;
   types;
+  values;
 }
 function createHandle() {
   const handle = document.createElement("span");
-  handle.tabIndex = 0;
-  handle.setAttribute("aria-label", "Resize panels");
+  handle.setAttribute("aria-hidden", "true");
   handle.setAttribute("oui-splitter-handle", "");
   return handle;
 }
-function createSeparator() {
+function createSeparator(splitter2) {
   const separator = document.createElement("div");
+  separator.role = "separator";
+  separator.tabIndex = 0;
+  separator.setAttribute("aria-controls", splitter2.element.id);
+  separator.setAttribute("aria-label", "Resize panels");
   separator.setAttribute("oui-splitter-separator", "");
   return separator;
 }
-function getFlex(splitter2, value) {
+function getContained(min, value, max) {
+  return round(clamp(value, min, max), 6);
+}
+function getSize(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);
+  return getContained(splitter2.values.min, fraction, splitter2.values.max);
 }
 function getTypes(splitter2, width, height) {
   const type = splitter2.element.getAttribute("type")?.trim() ?? "";
@@ -87,14 +99,43 @@ function getTypes(splitter2, width, height) {
     horizontal: false
   };
 }
+function getValue(element, name, defaultValue) {
+  const value = element.getAttribute(name);
+  if (isNullableOrWhitespace(value)) {
+    return defaultValue;
+  }
+  const parsed = Number.parseFloat(value);
+  if (Number.isNaN(parsed)) {
+    return defaultValue;
+  }
+  return parsed < 0 ? defaultValue : parsed > 1 ? parsed / 100 : parsed;
+}
+function getValues(element) {
+  const values = {
+    max: getValue(element, "max", 0.9),
+    min: getValue(element, "min", 0.1),
+    now: {
+      current: 0.5,
+      previous: 0.5
+    }
+  };
+  const value = getContained(
+    values.min,
+    getValue(element, "size", values.now.current),
+    values.max
+  );
+  values.now.current = value;
+  values.now.previous = value;
+  return values;
+}
 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);
+      setSize(splitter, splitter.values.now.previous);
     } else {
-      splitter.flex.previous = splitter.flex.value;
+      splitter.values.now.previous = splitter.values.now.current;
     }
   }
   splitter = void 0;
@@ -129,11 +170,11 @@ function onMousemove(event) {
   }
   const position = getPosition(event);
   if (position != null) {
-    splitter.flex.value = getFlex(
+    splitter.values.now.current = getSize(
       splitter,
       splitter.types.horizontal ? position.y : position.x
     );
-    setSize(splitter, splitter.flex.value);
+    setSize(splitter, splitter.values.now.current);
   }
 }
 function onMouseup() {
@@ -152,14 +193,18 @@ function onNavigate(event) {
     return;
   }
   if (absoluteKeys.has(event.key)) {
-    setSize(splitter2, event.key === "End" ? 0.9 : 0.1, true);
+    setSize(
+      splitter2,
+      event.key === "End" ? splitter2.values.max : splitter2.values.min,
+      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);
+  setSize(splitter2, splitter2.values.now.current + modifier * 0.05, true);
 }
 function onObservation(entries) {
   if (frame != null) {
@@ -181,16 +226,32 @@ function onObservation(entries) {
       } else {
         splitter2.element.removeAttribute("oui-splitter-horizontal");
       }
+      setAriaOrientation(splitter2);
     }
     frame = void 0;
   });
 }
+function setAriaOrientation(splitter2) {
+  splitter2.separator.setAttribute(
+    "aria-orientation",
+    splitter2.types.horizontal ? "horizontal" : "vertical"
+  );
+}
+function setAriaValue(splitter2) {
+  splitter2.separator.setAttribute("aria-valuemax", String(splitter2.values.max));
+  splitter2.separator.setAttribute("aria-valuemin", String(splitter2.values.min));
+  splitter2.separator.setAttribute(
+    "aria-valuenow",
+    String(splitter2.values.now.current)
+  );
+}
 function setSize(splitter2, size, previous) {
-  splitter2.flex.value = size;
+  splitter2.values.now.current = size;
   if (previous) {
-    splitter2.flex.previous = size;
+    splitter2.values.now.previous = size;
   }
   splitter2.element.style.setProperty("--oui-splitter-size", `${size}`);
+  setAriaValue(splitter2);
 }
 const absoluteKeys = /* @__PURE__ */ new Set(["End", "Home"]);
 const horizontalKeys = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);

package/dist/js/tooltip.cjs

@@ -9,7 +9,13 @@ class Tooltip {
   floatable;
   constructor(anchor, content) {
     this.attributes = content.attributes;
-    this.floatable = new floatable.Floatable(anchor, content.element);
+    this.floatable = new floatable.Floatable(
+      anchor,
+      content.element,
+      `${selector}-position`,
+      "vertical",
+      true
+    );
     initialize(this);
   }
   destroy() {

package/dist/js/tooltip.js

@@ -8,7 +8,13 @@ class Tooltip {
   floatable;
   constructor(anchor, content) {
     this.attributes = content.attributes;
-    this.floatable = new Floatable(anchor, content.element);
+    this.floatable = new Floatable(
+      anchor,
+      content.element,
+      `${selector}-position`,
+      "vertical",
+      true
+    );
     initialize(this);
   }
   destroy() {

package/package.json

@@ -12,7 +12,7 @@
 		"@biomejs/biome": "^2.1",
 		"@rollup/plugin-node-resolve": "^16",
 		"@rollup/plugin-typescript": "^12.1",
-		"@types/node": "^24",
+		"@types/node": "^24.1",
 		"@vitest/coverage-istanbul": "^3.2",
 		"autoprefixer": "^10.4",
 		"dts-bundle-generator": "^9.5",
@@ -114,5 +114,5 @@
 	},
 	"type": "module",
 	"types": "types/index.d.cts",
-	"version": "0.16.0"
+	"version": "0.17.0"
 }

package/src/css/popover.scss

@@ -6,4 +6,8 @@
 	padding: 1rem;
 	background-color: var(--oui-absolute);
 	border-radius: 0.5rem;
+
+	&:focus {
+		outline: none;
+	}
 }

package/src/css/splitter.scss

@@ -27,7 +27,7 @@ oui-splitter {
 :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);
+	background-color: color-mix(in oklab, var(--oui-blue-6), transparent 82.5%);
 }
 
 :where([oui-splitter-handle]) {
@@ -60,12 +60,12 @@ oui-splitter {
 :where([oui-splitter-handle]:hover),
 :where([oui-splitter-handle][oui-splitter-active]) {
 	&::after {
-		background-color: rgba(0, 0, 255, .25);
+		background-color: color-mix(in oklab, var(--oui-blue-6), transparent 50%);
 	}
 }
 
 :where([oui-splitter-handle]:focus-visible)::after {
-	outline-color: rgba(0, 0, 255, .25);
+	outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 50%);
 }
 
 oui-splitter[type='horizontal' i],

package/src/js/floatable.ts

@@ -1,12 +1,18 @@
 export class Floatable {
 		activate: number | undefined;
+
 		active = false;
+
 		deactivate: number | undefined;
+
 		frame: DOMHighResTimeStamp | undefined;
 
 		constructor(
 			public anchor: HTMLElement,
 			public content: HTMLElement,
+			readonly attribute: string,
+			readonly position: Position,
+			readonly preferAbove: boolean,
 		) {
 			setStyles(content);
 		}
@@ -21,6 +27,28 @@ export class Floatable {
 		}
 	}
 
+type Position =
+	| 'above'
+	| 'above-end'
+	| 'above-start'
+	| 'below'
+	| 'below-end'
+	| 'below-start'
+	| 'end'
+	| 'end-bottom'
+	| 'end-top'
+	| 'horizontal'
+	| 'horizontal-bottom'
+	| 'horizontal-top'
+	| 'start'
+	| 'start-bottom'
+	| 'start-top'
+	| 'vertical'
+	| 'vertical-end'
+	| 'vertical-start';
+
+//
+
 export function activate(
 	floatable: Floatable,
 	active: Set<Floatable>,
@@ -63,48 +91,78 @@ export function deactivate(
 	}
 }
 
-function getX(
-	anchor: DOMRect,
-	content: DOMRect,
-): {left?: number; right?: number} {
-	if (content.width + 2 * margin >= window.innerWidth) {
-		return {
-			left: margin,
-			right: margin,
-		};
+function getX(anchor: DOMRect, content: DOMRect, position: Position): number {
+	if (position.endsWith('-end')) {
+		const end = anchor.right - content.width;
+
+		return end - margin < 0 ? margin : end;
 	}
 
-	const left = anchor.left + (anchor.width - content.width) / 2;
-	const right = window.innerWidth - margin;
+	if (position.endsWith('-start')) {
+		const start = anchor.left;
 
-	if (left < margin) {
-		return {
-			left: margin,
-		};
+		return start + content.width + margin > window.innerWidth
+			? window.innerWidth - content.width - margin
+			: start;
 	}
 
-	if (left + content.width > right) {
-		return {
-			right: margin,
-		};
+	if (position.startsWith('end')) {
+		return anchor.right + margin;
 	}
 
-	return {
-		left,
-	};
+	if (position.startsWith('start')) {
+		return anchor.left - content.width - margin;
+	}
+
+	if (position.startsWith('horizontal')) {
+		if (anchor.right + content.width + margin <= window.innerWidth) {
+			return anchor.right + margin;
+		}
+
+		return anchor.left - content.width - margin;
+	}
+
+	return anchor.left + (anchor.width - content.width) / 2;
 }
 
-function getY(anchor: DOMRect, content: DOMRect): number {
-	let top = anchor.top - content.height - margin;
+function getY(
+	anchor: DOMRect,
+	content: DOMRect,
+	position: Position,
+	preferAbove: boolean,
+): number {
+	if (position.startsWith('above')) {
+		return anchor.top - content.height - margin;
+	}
+
+	if (position.startsWith('below')) {
+		return anchor.bottom + margin;
+	}
+
+	if (position.endsWith('bottom')) {
+		const bottom = anchor.bottom - content.height;
 
-	if (top - margin >= 0) {
-		return top;
+		return bottom + margin < 0 ? margin : bottom;
 	}
 
-	top = anchor.bottom + margin;
+	if (position.endsWith('top')) {
+		const top = anchor.top;
+
+		return top + content.height + margin > window.innerHeight
+			? window.innerHeight - content.height - margin
+			: top;
+	}
+
+	if (position.startsWith('vertical')) {
+		if (preferAbove && anchor.top - content.height - margin >= 0) {
+			return anchor.top - content.height - margin;
+		}
+
+		if (anchor.bottom + content.height + margin <= document.body.clientHeight) {
+			return anchor.bottom + margin;
+		}
 
-	if (top + content.height + margin <= window.innerHeight) {
-		return top;
+		return anchor.top - content.height - margin;
 	}
 
 	return anchor.top + (anchor.height - content.height) / 2;
@@ -151,17 +209,25 @@ function onDeactivate(
 }
 
 function update(floatable: Floatable): void {
+	let position: Position =
+		(floatable.anchor.getAttribute(floatable.attribute)?.trim() as Position) ??
+		floatable.position;
+
+	if (!positions.has(position as Position)) {
+		position = floatable.position;
+	}
+
 	function run(): void {
-		const anchor = floatable.anchor.getBoundingClientRect();
-		const content = floatable.content.getBoundingClientRect();
+			const anchor = floatable.anchor.getBoundingClientRect();
+			const content = floatable.content.getBoundingClientRect();
 
-		const {left, right} = getX(anchor, content);
-		const top = getY(anchor, content);
+			const left = getX(anchor, content, position);
+			const top = getY(anchor, content, position, floatable.preferAbove);
 
-		floatable.content.style.inset = `${top}px ${right == null ? 'auto' : `${right}px`} auto ${left == null ? 'auto' : `${left}px`}`;
+			floatable.content.style.inset = `${top}px auto auto ${left}px`;
 
-		floatable.frame = requestAnimationFrame(run);
-	}
+			floatable.frame = requestAnimationFrame(run);
+		}
 
 	floatable.frame = requestAnimationFrame(run);
 }
@@ -194,3 +260,24 @@ function stop(floatable: Floatable): void {
 
 const margin =
 	Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 2;
+
+const positions = new Set<Position>([
+	'above',
+	'above-end',
+	'above-start',
+	'below',
+	'below-end',
+	'below-start',
+	'end',
+	'end-bottom',
+	'end-top',
+	'horizontal',
+	'horizontal-bottom',
+	'horizontal-top',
+	'start',
+	'start-bottom',
+	'start-top',
+	'vertical',
+	'vertical-end',
+	'vertical-start',
+]);

package/src/js/popover.ts

@@ -50,7 +50,14 @@ export class OuiPopoverElement extends HTMLElement {
 		toggle.setAttribute('aria-controls', content.id);
 		toggle.setAttribute('aria-haspopup', 'dialog');
 
-		this.#floatable = new Floatable(toggle, content);
+		this.#floatable = new Floatable(
+			toggle,
+			content,
+			'position',
+			'below-start',
+			false,
+		);
+
 		this.#focusTrap = createFocusTrap(content);
 
 		mapped.set(toggle, this.#floatable);