@oscarpalmer/oui 0.17.0 → 0.19.0

package/dist/js/tooltip.js

@@ -1,165 +1,174 @@
-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,
-      `${selector}-position`,
-      "vertical",
-      true
-    );
-    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 { Floatable } from "./floatable.js";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+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 onActivate(event) {
+	onToggle(event, true);
+}
+function onClick(event) {
+	if (findAncestor(event.target, SELECTOR_CONTENT) != null) event.stopPropagation();
 }
-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 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.124",
+		"@oscarpalmer/toretto": "^0.34"
 	},
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"devDependencies": {
-		"@biomejs/biome": "^2.1",
-		"@rollup/plugin-node-resolve": "^16",
-		"@rollup/plugin-typescript": "^12.1",
-		"@types/node": "^24.1",
-		"@vitest/coverage-istanbul": "^3.2",
+		"@types/node": "^25",
+		"@vitest/coverage-istanbul": "^4",
 		"autoprefixer": "^10.4",
-		"dts-bundle-generator": "^9.5",
-		"glob": "^11",
-		"jsdom": "^26.1",
+		"jsdom": "^27.4",
+		"oxfmt": "^0.21",
+		"oxlint": "^1.36",
 		"postcss-cli": "^11",
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",
-		"sass": "^1.89",
-		"stylelint": "^16.22",
+		"rolldown": "1.0.0-beta.57",
+		"sass": "^1.97",
+		"stylelint": "^16.26",
+		"stylelint-config-standard-scss": "^16",
 		"tslib": "^2.8",
-		"typescript": "^5.8",
-		"vite": "^7",
-		"vitest": "^3.2"
+		"typescript": "^5.9",
+		"vite": "8.0.0-beta.5",
+		"vitest": "^4"
 	},
 	"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": {
@@ -100,19 +72,19 @@
 		"url": "git+https://github.com/oscarpalmer/oui.git"
 	},
 	"scripts": {
-		"build": "npm run clean && npm run build:css && npm run build:js",
+		"build": "npm run clean && npm run build:js && npm run build:css",
 		"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": "npm run clean && npx vite build && npm run rolldown:build && npx tsc",
 		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
-		"rollup": "npx rollup -c --watch",
+		"rolldown:build": "npx rolldown -c",
+		"rolldown:watch": "npx rolldown -c ./rolldown.config.js --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.17.0"
+	"types": "types/index.d.ts",
+	"version": "0.19.0"
 }

package/src/css/a11y.scss

@@ -8,6 +8,6 @@
 	}
 
 	:where(&:not(:active, :focus, :focus-within)) {
-		@include mixins.visuallyHidden;
+		@include mixins.visually-hidden;
 	}
 }

package/src/css/badge.scss

@@ -14,72 +14,76 @@
 
 		display: inline-flex;
 		flex-flow: row nowrap;
-		gap: .5em;
-		background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
+		gap: 0.5em;
+		background-color: color-mix(
+			in oklab,
+			var(--oui-background, var(--oui-gray-0)),
+			transparent 25%
+		);
 		color: var(--oui-foreground, var(--oui-gray-8));
 		line-height: 1.25;
 	}
 
 	:where(&-pill) {
 		border-radius: 3em;
-		padding: .5em 1em;
+		padding: 0.5em 1em;
 	}
 
 	:where(&-tag) {
-		border-radius: .25em;
-		padding: .5em .75em;
+		border-radius: 0.25em;
+		padding: 0.5em 0.75em;
 	}
 
-	:where(&-pill-small, &-tag-small) {
-		font-size: .875em;
+	:where(&-pill--small, &-tag--small) {
+		font-size: 0.875em;
 	}
 
-	:where(&-pill-tiny, &-tag-tiny) {
+	:where(&-pill--tiny, &-tag--tiny) {
 		color: color-mix(in oklab, var(--oui-foreground, var(--oui-gray-8)), transparent 12.5%);
-		font-size: .75em;
+		font-size: 0.75em;
 	}
 
-	:where(&-pill-tiny) {
-		padding: .25em .75em;
+	:where(&-pill--tiny) {
+		padding: 0.25em 0.75em;
 	}
 
-	:where(&-tag-tiny) {
-		padding: .25em .5em;
+	:where(&-tag--tiny) {
+		padding: 0.25em 0.5em;
 	}
 
 	// Colors
 
-	:where(&-pill-blue, &-tag-blue) {
+	:where(&-pill--blue, &-tag--blue) {
 		--oui-background: var(--oui-blue-0);
 		--oui-foreground: var(--oui-blue-8);
 		--oui-shadow: var(--oui-blue-6);
 	}
 
-	:where(&-pill-green, &-tag-green) {
+	:where(&-pill--green, &-tag--green) {
 		--oui-background: var(--oui-green-0);
 		--oui-foreground: var(--oui-green-8);
 		--oui-shadow: var(--oui-green-6);
 	}
 
-	:where(&-pill-orange, &-tag-orange) {
+	:where(&-pill--orange, &-tag--orange) {
 		--oui-background: var(--oui-orange-0);
 		--oui-foreground: var(--oui-orange-8);
 		--oui-shadow: var(--oui-orange-6);
 	}
 
-	:where(&-pill-purple, &-tag-purple) {
+	:where(&-pill--purple, &-tag--purple) {
 		--oui-background: var(--oui-purple-0);
 		--oui-foreground: var(--oui-purple-8);
 		--oui-shadow: var(--oui-purple-6);
 	}
 
-	:where(&-pill-red, &-tag-red) {
+	:where(&-pill--red, &-tag--red) {
 		--oui-background: var(--oui-red-0);
 		--oui-foreground: var(--oui-red-8);
 		--oui-shadow: var(--oui-red-6);
 	}
 
-	:where(&-pill-yellow, &-tag-yellow) {
+	:where(&-pill--yellow, &-tag--yellow) {
 		--oui-background: var(--oui-yellow-0);
 		--oui-foreground: var(--oui-yellow-8);
 		--oui-shadow: var(--oui-yellow-6);

package/src/css/button.scss

@@ -7,54 +7,54 @@
 		@include mixins.button;
 	}
 
-	:where(&-blue) {
+	:where(&--blue) {
 		--oui-background-value: var(--oui-blue-2);
 		--oui-foreground-value: var(--oui-blue-8);
 		--oui-outline-value: var(--oui-blue-6);
 	}
 
-	:where(&-green) {
+	:where(&--green) {
 		--oui-background-value: var(--oui-green-2);
 		--oui-foreground-value: var(--oui-green-8);
 		--oui-outline-value: var(--oui-green-6);
 	}
 
-	:where(&-orange) {
+	:where(&--orange) {
 		--oui-background-value: var(--oui-orange-2);
 		--oui-foreground-value: var(--oui-orange-8);
 		--oui-outline-value: var(--oui-orange-6);
 	}
 
-	:where(&-purple) {
+	:where(&--purple) {
 		--oui-background-value: var(--oui-purple-2);
 		--oui-foreground-value: var(--oui-purple-8);
 		--oui-outline-value: var(--oui-purple-6);
 	}
 
-	:where(&-red) {
+	:where(&--red) {
 		--oui-background-value: var(--oui-red-2);
 		--oui-foreground-value: var(--oui-red-8);
 		--oui-outline-value: var(--oui-red-6);
 	}
 
-	:where(&-yellow) {
+	:where(&--yellow) {
 		--oui-background-value: var(--oui-yellow-2);
 		--oui-foreground-value: var(--oui-yellow-8);
 		--oui-outline-value: var(--oui-yellow-6);
 	}
 
-	:where(&-rounded) {
+	:where(&--rounded) {
 		padding: 0.5em 1em;
 		flex-wrap: nowrap;
 		border-radius: 5em;
 		white-space: nowrap;
 	}
 
-	:where(&-small) {
+	:where(&--small) {
 		font-size: 0.875em;
 	}
 
-	:where(&-tiny) {
+	:where(&--tiny) {
 		--oui-foreground-percentage: 12.5%;
 
 		font-size: 0.75em;