@oscarpalmer/oui 0.16.0 → 0.18.0

package/dist/js/tooltip.js

@@ -1,159 +1,174 @@
+import { attributable } from "./attributable.js";
+import { Floatable } from "./floatable.js";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { on } from "@oscarpalmer/toretto/event";
-import { attributable } from "./attributable.js";
-import { deactivate, Floatable, activate } from "./floatable.js";
-class Tooltip {
-  abortController = new AbortController();
-  attributes;
-  floatable;
-  constructor(anchor, content) {
-    this.attributes = content.attributes;
-    this.floatable = new Floatable(anchor, content.element);
-    initialize(this);
-  }
-  destroy() {
-    deactivate(this.floatable, active);
-    reset(this.floatable.anchor, this.attributes);
-    this.abortController.abort();
-    this.floatable.content.remove();
-    this.floatable.destroy();
-    this.abortController = void 0;
-    this.attributes = void 0;
-    this.floatable = void 0;
-  }
-}
+import { findAncestor } from "@oscarpalmer/toretto/find";
+var Tooltip = class {
+	attributes;
+	floatable;
+	timer;
+	constructor(anchor, content) {
+		this.attributes = content.attributes;
+		this.floatable = new Floatable({
+			anchor,
+			content: content.element,
+			defaultPosition: "vertical",
+			interactive: false,
+			preferAbove: true,
+			positionAttribute: ATTRIBUTE_POSITION
+		});
+		anchor.insertAdjacentElement("afterend", content.element);
+		TOOLTIPS_ALL.set(content.element, this);
+	}
+	destroy() {
+		const { attributes, floatable } = this;
+		TOOLTIPS_ACTIVE.delete(this);
+		TOOLTIPS_ALL.delete(floatable.options.anchor);
+		TOOLTIPS_ALL.delete(floatable.options.content);
+		reset(floatable.options.anchor, attributes);
+		floatable.options.content.remove();
+		floatable.destroy();
+		this.attributes = void 0;
+		this.floatable = void 0;
+	}
+};
 function addTooltip(anchor) {
-  if (tooltips.has(anchor)) {
-    return;
-  }
-  const content = getContent(anchor);
-  if (content != null) {
-    tooltips.set(anchor, new Tooltip(anchor, content));
-  }
+	if (TOOLTIPS_ALL.has(anchor)) return;
+	const content = getContent(anchor);
+	if (content != null) TOOLTIPS_ALL.set(anchor, new Tooltip(anchor, content));
+}
+function closeTooltips(next) {
+	const tooltips = [...TOOLTIPS_ACTIVE];
+	for (const active of tooltips) {
+		if (active === next) continue;
+		if (active.timer != null) clearTimeout(active.timer);
+		active.floatable.options.content.removeAttribute("oui-tooltip-content-active");
+		requestAnimationFrame(() => {
+			active.timer = setTimeout(() => {
+				TOOLTIPS_ACTIVE.delete(active);
+				active.floatable.toggle(false);
+			}, delay);
+		});
+	}
 }
 function getContent(anchor) {
-  const attributes = {
-    ariaDescribedby: anchor.getAttribute("aria-describedby"),
-    ariaLabelledBy: anchor.getAttribute("aria-labelledby")
-  };
-  const wrapper = getWrapper(anchor);
-  const labelledElements = getElements(attributes.ariaLabelledBy);
-  if (labelledElements.length > 0) {
-    anchor.setAttribute("aria-labelledby", wrapper.id);
-    for (const element of labelledElements) {
-      wrapper.append(element);
-    }
-    return {
-      attributes,
-      element: wrapper
-    };
-  }
-  const describedElements = getElements(attributes.ariaDescribedby);
-  if (describedElements.length > 0) {
-    anchor.setAttribute("aria-describedby", wrapper.id);
-    for (const element of describedElements) {
-      wrapper.append(element);
-    }
-    return {
-      attributes,
-      element: wrapper
-    };
-  }
-  let content = anchor.getAttribute("aria-label");
-  if (isNullableOrWhitespace(content)) {
-    content = anchor.getAttribute("aria-description");
-  }
-  if (isNullableOrWhitespace(content)) {
-    return;
-  }
-  const paragraph = document.createElement("p");
-  paragraph.textContent = content;
-  wrapper.append(paragraph);
-  return {
-    attributes,
-    element: wrapper
-  };
+	const attributes = {
+		ariaDescribedby: anchor.getAttribute("aria-describedby"),
+		ariaLabelledBy: anchor.getAttribute("aria-labelledby")
+	};
+	const wrapper = getWrapper(anchor);
+	const labelledElements = getElements(attributes.ariaLabelledBy);
+	if (labelledElements.length > 0) {
+		anchor.setAttribute("aria-labelledby", wrapper.id);
+		for (const element of labelledElements) wrapper.append(element);
+		return {
+			attributes,
+			element: wrapper
+		};
+	}
+	const describedElements = getElements(attributes.ariaDescribedby);
+	if (describedElements.length > 0) {
+		anchor.setAttribute("aria-describedby", wrapper.id);
+		for (const element of describedElements) wrapper.append(element);
+		return {
+			attributes,
+			element: wrapper
+		};
+	}
+	let content = anchor.getAttribute("aria-label");
+	if (isNullableOrWhitespace(content)) content = anchor.getAttribute("aria-description");
+	if (isNullableOrWhitespace(content)) return;
+	const paragraph = document.createElement("p");
+	paragraph.textContent = content;
+	wrapper.append(paragraph);
+	return {
+		attributes,
+		element: wrapper
+	};
 }
 function getElements(attribute) {
-  const ids = attribute?.split(/\s+/) ?? [];
-  const elements = [];
-  for (const id of ids) {
-    if (isNullableOrWhitespace(id)) {
-      continue;
-    }
-    const element = document.querySelector(`#${id}`);
-    if (element instanceof HTMLElement) {
-      const cloned = element.cloneNode(true);
-      cloned.hidden = false;
-      elements.push(cloned);
-    }
-  }
-  return elements;
+	const ids = attribute?.split(EXPRESSION_WHITESPACE) ?? [];
+	const elements = [];
+	for (const id of ids) {
+		if (isNullableOrWhitespace(id)) continue;
+		const element = document.querySelector(`#${id}`);
+		if (element instanceof HTMLElement) {
+			const cloned = element.cloneNode(true);
+			cloned.hidden = false;
+			elements.push(cloned);
+		}
+	}
+	return elements;
 }
 function getWrapper(anchor) {
-  const wrapper = document.createElement("div");
-  wrapper.setAttribute(`${selector}-content`, "");
-  wrapper.className = anchor.getAttribute(`${selector}-class`) ?? "";
-  wrapper.hidden = true;
-  wrapper.id = `${selector}-${++index}`;
-  wrapper.role = "tooltip";
-  wrapper.tabIndex = -1;
-  return wrapper;
+	const wrapper = document.createElement("div");
+	wrapper.setAttribute(ATTRIBUTE_CONTENT, "");
+	wrapper.className = anchor.getAttribute(ATTRIBUTE_CLASS) ?? "";
+	wrapper.hidden = true;
+	wrapper.id = `${SELECTOR}-${++index}`;
+	wrapper.role = "tooltip";
+	wrapper.tabIndex = -1;
+	return wrapper;
 }
-function initialize(tooltip) {
-  const { abortController, floatable } = tooltip;
-  const { anchor, content } = floatable;
-  anchor.insertAdjacentElement("afterend", content);
-  const elements = [anchor, content];
-  for (const element of elements) {
-    for (const event of activateEvents) {
-      on(
-        element,
-        event,
-        () => {
-          activate(floatable, active, void 0, 250);
-        },
-        {
-          signal: abortController.signal
-        }
-      );
-    }
-    for (const event of deactivateEvents) {
-      on(
-        element,
-        event,
-        () => {
-          deactivate(floatable, active, void 0, 250);
-        },
-        {
-          signal: abortController.signal
-        }
-      );
-    }
-  }
+function onActivate(event) {
+	onToggle(event, true);
+}
+function onClick(event) {
+	if (findAncestor(event.target, SELECTOR_CONTENT) != null) event.stopPropagation();
+}
+function onDeactivate(event) {
+	onToggle(event, false);
+}
+function onToggle(event, activate) {
+	if (toggle != null) cancelAnimationFrame(toggle);
+	toggle = requestAnimationFrame(() => {
+		toggle = void 0;
+		const element = findAncestor(event.target, SELECTOR_FULL);
+		const tooltip = TOOLTIPS_ALL.get(element);
+		if (TOOLTIPS_ACTIVE.size > 0) closeTooltips(tooltip);
+		if (tooltip == null || tooltip.floatable.options.content.hasAttribute("oui-tooltip-content-active") === activate) return;
+		if (activate) {
+			if (tooltip.timer != null) clearTimeout(tooltip.timer);
+			TOOLTIPS_ACTIVE.add(tooltip);
+			tooltip.floatable.toggle(true);
+			requestAnimationFrame(() => {
+				tooltip.floatable.options.content.setAttribute("oui-tooltip-content-active", "");
+			});
+			return;
+		}
+		tooltip.floatable.options.content.removeAttribute("oui-tooltip-content-active");
+		tooltip.timer ??= setTimeout(() => {
+			TOOLTIPS_ACTIVE.delete(tooltip);
+			tooltip.floatable.toggle(false);
+		}, delay);
+	});
 }
 function removeTooltip(element) {
-  tooltips.get(element)?.destroy();
-  tooltips.delete(element);
+	if (!element.hasAttribute(ATTRIBUTE_CONTENT)) TOOLTIPS_ALL.get(element)?.destroy();
 }
 function reset(anchor, attributes) {
-  if (attributes.ariaDescribedby == null) {
-    anchor.removeAttribute("aria-describedby");
-  } else {
-    anchor.setAttribute("aria-describedby", attributes.ariaDescribedby);
-  }
+	if (attributes.ariaDescribedby == null) anchor.removeAttribute("aria-describedby");
+	else anchor.setAttribute("aria-describedby", attributes.ariaDescribedby);
+}
+function setDelay(value) {
+	delay = typeof value === "number" && value >= 0 ? value : delay;
 }
-const active = /* @__PURE__ */ new Set();
-const activateEvents = ["focus", "mouseenter", "touchstart"];
-const deactivateEvents = ["blur", "mouseleave"];
-const selector = "oui-tooltip";
-const tooltips = /* @__PURE__ */ new WeakMap();
-let index = 0;
-attributable(selector, addTooltip, removeTooltip);
-on(document, "keydown", (event) => {
-  if (event.key === "Escape") {
-    for (const floatable of active) {
-      deactivate(floatable, active);
-    }
-  }
-});
+var SELECTOR = "oui-tooltip";
+var ATTRIBUTE_CLASS = `${SELECTOR}-class`;
+var ATTRIBUTE_CONTENT = `${SELECTOR}-content`;
+var ATTRIBUTE_POSITION = `${SELECTOR}-position`;
+var SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+var SELECTOR_FULL = `[${SELECTOR}], [${ATTRIBUTE_CONTENT}]`;
+var EXPRESSION_WHITESPACE = /\s+/;
+var TOOLTIPS_ACTIVE = /* @__PURE__ */ new Set();
+var TOOLTIPS_ALL = /* @__PURE__ */ new WeakMap();
+var delay = 250;
+var index = 0;
+var toggle;
+attributable(SELECTOR, addTooltip, removeTooltip);
+on(document, "click", onClick, { capture: true });
+on(document, "focusin", onActivate);
+on(document, "focusout", onDeactivate);
+on(document, "mousemove", onActivate);
+on(document, "touchstart", onActivate);
+export { setDelay };

package/package.json

@@ -4,83 +4,56 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.104",
-		"@oscarpalmer/toretto": "^0.20"
+		"@oscarpalmer/atoms": "^0.112",
+		"@oscarpalmer/toretto": "^0.24"
 	},
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"devDependencies": {
-		"@biomejs/biome": "^2.1",
+		"@biomejs/biome": "^2.2",
 		"@rollup/plugin-node-resolve": "^16",
 		"@rollup/plugin-typescript": "^12.1",
-		"@types/node": "^24",
+		"@types/node": "^24.7",
 		"@vitest/coverage-istanbul": "^3.2",
 		"autoprefixer": "^10.4",
-		"dts-bundle-generator": "^9.5",
-		"glob": "^11",
-		"jsdom": "^26.1",
+		"jsdom": "^27",
 		"postcss-cli": "^11",
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",
-		"sass": "^1.89",
-		"stylelint": "^16.22",
+		"rollup": "^4.52",
+		"sass": "^1.93",
+		"stylelint": "^16.25",
 		"tslib": "^2.8",
-		"typescript": "^5.8",
-		"vite": "^7",
+		"typescript": "^5.9",
+		"vite": "npm:rolldown-vite@latest",
 		"vitest": "^3.2"
 	},
 	"exports": {
 		".": {
-			"import": {
-				"types": "./types/index.d.ts",
-				"default": "./dist/js/index.js"
-			},
-			"require": {
-				"types": "./types/index.d.cts",
-				"default": "./dist/js/index.cjs"
-			}
+			"types": "./types/index.d.ts",
+			"default": "./dist/js/index.js"
 		},
 		"./focus-trap": {
-			"import": {
-				"types": "./types/focus-trap/standalone.d.ts",
-				"default": "./dist/js/focus-trap/standalone.js"
-			},
-			"require": {
-				"types": "./types/focus-trap/standalone.d.cts",
-				"default": "./dist/js/focus-trap/standalone.cjs"
-			}
+			"types": "./types/focus-trap/standalone.d.ts",
+			"default": "./dist/js/focus-trap/standalone.js"
 		},
 		"./popover": {
-			"import": {
-				"types": "./types/popover.d.ts",
-				"default": "./dist/js/popover.js"
-			},
-			"require": {
-				"types": "./types/popover.d.cts",
-				"default": "./dist/js/popover.cjs"
-			}
+			"types": "./types/popover.d.ts",
+			"default": "./dist/js/popover.js"
 		},
 		"./splitter": {
-			"import": {
-				"types": "./types/splitter.d.ts",
-				"default": "./dist/js/splitter.js"
-			},
-			"require": {
-				"types": "./types/splitter.d.cts",
-				"default": "./dist/js/splitter.cjs"
-			}
+			"types": "./types/splitter.d.ts",
+			"default": "./dist/js/splitter.js"
 		},
 		"./tooltip": {
-			"import": {
-				"types": "./types/tooltip.d.ts",
-				"default": "./dist/js/tooltip.js"
-			},
-			"require": {
-				"types": "./types/tooltip.d.cts",
-				"default": "./dist/js/tooltip.cjs"
-			}
+			"types": "./types/tooltip.d.ts",
+			"default": "./dist/js/tooltip.js"
 		}
 	},
-	"files": ["dist", "src", "types"],
+	"files": [
+		"dist",
+		"src",
+		"types"
+	],
 	"keywords": [
 		"css",
 		"scss",
@@ -92,7 +65,6 @@
 		"utility"
 	],
 	"license": "MIT",
-	"main": "dist/js/index.cjs",
 	"module": "dist/js/index.js",
 	"name": "@oscarpalmer/oui",
 	"repository": {
@@ -103,16 +75,16 @@
 		"build": "npm run clean && npm run build:css && npm run build:js",
 		"build:css": "npm run build:postcss && npx sass ./postcss:./dist/css --no-source-map",
 		"build:postcss": "npx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss",
-		"build:js": "npx vite build && npm run types",
+		"build:js": "npx vite build && npm run rollup:build && npx tsc",
 		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
-		"rollup": "npx rollup -c --watch",
+		"rollup:build": "npx rollup -c",
+		"rollup:watch": "npx rollup -c --watch",
 		"test": "npx vitest --coverage",
-		"types": "npx tsc && npx dts-bundle-generator --config ./dts.config.cts --silent",
 		"watch:css": "npx sass ./postcss:./dist/css --no-source-map --watch",
 		"watch:postcss": "npx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
 		"watch:js": "npx vite build --watch"
 	},
 	"type": "module",
-	"types": "types/index.d.cts",
-	"version": "0.16.0"
-}
+	"types": "types/index.d.ts",
+	"version": "0.18.0"
+}

package/src/css/content.scss

@@ -3,7 +3,7 @@
 @use './mixins' as mixins;
 
 @mixin thumb($background, $shadow) {
-	@include mixins.shadow(
+	@include mixins.shadowSmall(
 		color-mix(in oklab, $shadow, transparent 33%),
 		color-mix(in oklab, white, transparent 82.5%)
 	);
@@ -24,7 +24,6 @@
 	background-image: none;
 	border: 1px solid var(--oui-gray-3);
 	border-radius: 0.375em;
-	box-shadow: inset 0 1px 2px 0 var(--oui-gray-3);
 }
 
 .oui-card {

package/src/css/form.scss

@@ -77,9 +77,11 @@
 }
 
 .oui-input {
-	:where(&:not([type='range' i])) {
+	:where(&) {
 		--oui-background-value: var(--oui-absolute);
+	}
 
+	:where(&:not([type='range' i])) {
 		@include input;
 
 		padding: 0.5em 0.75em;
@@ -160,7 +162,7 @@
 				var(--oui-background-value),
 				transparent var(--oui-background-percentage)
 			);
-			border: 2px solid var(--oui-absolute);
+			border: 1px solid var(--oui-absolute);
 			border-radius: 1.25em;
 			box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
 			cursor: pointer;
@@ -174,7 +176,7 @@
 	}
 
 	:where(
-			&.oui-validatable:not(
+			&.oui-validate:not(
 					[disabled],
 					[readonly],
 					[aria-disabled='true' i]
@@ -206,7 +208,7 @@
 	}
 
 	:where(
-			&.oui-validatable:not(
+			&.oui-validate:not(
 					[disabled],
 					[readonly],
 					[aria-disabled='true' i]
@@ -310,6 +312,12 @@
 
 			cursor: default;
 		}
+
+		&::range-thumb {
+			--oui-background-value: var(--oui-gray-2);
+
+			cursor: default;
+		}
 	}
 
 	:where(&:is([disabled], [readonly], [aria-disabled='true' i]):focus) {

package/src/css/message.scss

@@ -19,6 +19,7 @@
 			var(--oui-shadow-mixed),
 		);
 
+		max-width: fit-content;
 		display: inline-flex;
 		flex-flow: column nowrap;
 		gap: 1em;
@@ -39,6 +40,8 @@
 	}
 
 	:where(& p) {
+		max-width: 32rem;
+		max-width: 64ch;
 		display: inline-flex;
 		flex-flow: row wrap;
 		gap: 1em;

package/src/css/mixins.scss

@@ -73,6 +73,13 @@
 		0 64px 128px -32px $color;
 }
 
+@mixin shadowSmall($color: rgba(0, 0, 0, 0.05), $inset: transparent) {
+	box-shadow:
+		inset 0 1px 0 0 $inset,
+		0 0 0 1px $color,
+		0 1px 2px -.5px $color;
+}
+
 @mixin visuallyHidden() {
 	width: 1px !important;
 	height: 1px !important;

package/src/css/popover.scss

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