@oscarpalmer/oui 0.12.0 → 0.13.0

package/dist/js/tooltip.js

@@ -0,0 +1,202 @@
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { on } from "@oscarpalmer/toretto/event";
+import { attributable } from "./attributable.js";
+class Tooltip {
+  constructor(parent) {
+    this.parent = parent;
+    this.element = getContent(parent);
+    if (this.element != null) {
+      parent.insertAdjacentElement("afterend", this.element);
+      initialize(this);
+    }
+  }
+  abortController = new AbortController();
+  activate;
+  active = false;
+  deactivate;
+  element;
+  frame;
+  destroy() {
+    deactivate(this);
+    this.abortController.abort();
+    this.abortController = void 0;
+    this.activate = void 0;
+    this.deactivate = void 0;
+    this.element = void 0;
+    this.frame = void 0;
+    this.parent = void 0;
+  }
+}
+function activate(tooltip) {
+  stop(tooltip);
+  if (tooltip.active) {
+    return;
+  }
+  tooltip.activate = +setTimeout(() => {
+    tooltip.active = true;
+    active.add(tooltip);
+    document.body.append(tooltip.element);
+    tooltip.element.hidden = false;
+    update(tooltip);
+  }, 250);
+}
+function addTooltip(element) {
+  if (!tooltips.has(element)) {
+    tooltips.set(element, new Tooltip(element));
+  }
+}
+function deactivate(tooltip, time) {
+  stop(tooltip);
+  if (!tooltip.active) {
+    return;
+  }
+  tooltip.deactivate = +setTimeout(() => {
+    tooltip.active = false;
+    active.delete(tooltip);
+    tooltip.element.hidden = true;
+    tooltip.parent.insertAdjacentElement("afterend", tooltip.element);
+  }, time ?? 250);
+}
+function getContent(parent) {
+  const wrapper = getWrapper(parent);
+  const ids = (parent.getAttribute("aria-describedby") ?? "").split(/\s+/);
+  parent.setAttribute("aria-describedby", wrapper.id);
+  const elements = ids.map(
+    (id) => isNullableOrWhitespace(id) ? void 0 : document.querySelector(`#${id}`)
+  ).filter((element) => element instanceof HTMLElement);
+  if (elements.length > 0) {
+    for (const element of elements) {
+      element.hidden = false;
+      wrapper.append(element);
+    }
+    return wrapper;
+  }
+  let content = parent.getAttribute("aria-description");
+  if (isNullableOrWhitespace(content)) {
+    content = parent.getAttribute("aria-label");
+    if (isNullableOrWhitespace(content)) {
+      return;
+    }
+  }
+  const paragraph = document.createElement("p");
+  paragraph.textContent = content;
+  wrapper.append(paragraph);
+  return wrapper;
+}
+function getTop(parent, content) {
+  let top = parent.top - content.height - margin;
+  if (top - margin >= 0) {
+    return top;
+  }
+  top = parent.bottom + margin;
+  if (top + content.height + margin <= window.innerHeight) {
+    return top;
+  }
+  return parent.top + (parent.height - content.height) / 2;
+}
+function getWrapper(parent) {
+  const wrapper = document.createElement("div");
+  wrapper.setAttribute(`${selector}-content`, "");
+  wrapper.className = parent.getAttribute(`${selector}-class`) ?? "";
+  wrapper.hidden = true;
+  wrapper.id = `${selector}-${++index}`;
+  wrapper.role = "tooltip";
+  wrapper.tabIndex = -1;
+  return wrapper;
+}
+function getX(parent, content) {
+  if (content.width + 2 * margin >= window.innerWidth) {
+    return {
+      left: margin,
+      right: margin
+    };
+  }
+  const left = parent.left + (parent.width - content.width) / 2;
+  const right = window.innerWidth - margin;
+  if (left < margin) {
+    return {
+      left: margin
+    };
+  }
+  if (left + content.width > right) {
+    return {
+      right: margin
+    };
+  }
+  return {
+    left
+  };
+}
+function initialize(tooltip) {
+  const elements = [tooltip.parent, tooltip.element];
+  for (const element of elements) {
+    for (const event of activateEvents) {
+      on(
+        element,
+        event,
+        () => {
+          activate(tooltip);
+        },
+        {
+          signal: tooltip.abortController.signal
+        }
+      );
+    }
+    for (const event of deactivateEvents) {
+      on(
+        element,
+        event,
+        () => {
+          deactivate(tooltip);
+        },
+        {
+          signal: tooltip.abortController.signal
+        }
+      );
+    }
+  }
+}
+function removeTooltip(element) {
+  tooltips.get(element)?.destroy();
+  tooltips.delete(element);
+}
+function stop(tooltip) {
+  if (tooltip.frame != null) {
+    cancelAnimationFrame(tooltip.frame);
+    tooltip.frame = void 0;
+  }
+  if (tooltip.activate != null) {
+    clearTimeout(tooltip.activate);
+    tooltip.activate = void 0;
+  }
+  if (tooltip.deactivate != null) {
+    clearTimeout(tooltip.deactivate);
+    tooltip.deactivate = void 0;
+  }
+}
+function update(tooltip) {
+  function run() {
+    const parentRect = tooltip.parent.getBoundingClientRect();
+    const contentRect = tooltip.element.getBoundingClientRect();
+    const top = getTop(parentRect, contentRect);
+    const { left, right } = getX(parentRect, contentRect);
+    tooltip.element.style.inset = `${top}px ${right == null ? "auto" : `${right}px`} auto ${left == null ? "auto" : `${left}px`}`;
+    tooltip.frame = requestAnimationFrame(run);
+  }
+  tooltip.frame = requestAnimationFrame(run);
+}
+const active = /* @__PURE__ */ new Set();
+const activateEvents = ["focus", "mouseenter", "touchstart"];
+const deactivateEvents = ["blur", "mouseleave"];
+const margin = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 4;
+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 tooltip of active) {
+      deactivate(tooltip, 0);
+    }
+  }
+});

package/package.json

@@ -4,12 +4,12 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.102",
+		"@oscarpalmer/atoms": "^0.104",
 		"@oscarpalmer/toretto": "^0.20"
 	},
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"devDependencies": {
-		"@biomejs/biome": "^2",
+		"@biomejs/biome": "^2.1",
 		"@rollup/plugin-node-resolve": "^16",
 		"@rollup/plugin-typescript": "^12.1",
 		"@types/node": "^24",
@@ -25,7 +25,7 @@
 		"stylelint": "^16.21",
 		"tslib": "^2.8",
 		"typescript": "^5.8",
-		"vite": "^6.3",
+		"vite": "^7",
 		"vitest": "^3.2"
 	},
 	"exports": {
@@ -48,6 +48,16 @@
 				"types": "./types/focus-trap.d.cts",
 				"default": "./dist/js/focus-trap.cjs"
 			}
+		},
+		"./tooltip": {
+			"import": {
+				"types": "./types/tooltip.d.ts",
+				"default": "./dist/js/tooltip.js"
+			},
+			"require": {
+				"types": "./types/tooltip.d.cts",
+				"default": "./dist/js/tooltip.cjs"
+			}
 		}
 	},
 	"files": ["dist", "src", "types"],
@@ -75,7 +85,7 @@
 		"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",
 		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
-		"rollup": "npx rollup -c --watch",
+		"rollup": "npx rollup -c",
 		"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",
@@ -84,5 +94,5 @@
 	},
 	"type": "module",
 	"types": "types/index.d.cts",
-	"version": "0.12.0"
+	"version": "0.13.0"
 }

package/src/css/badge.scss

@@ -37,11 +37,18 @@
 	:where(&-pill-tiny, &-tag-tiny) {
 		color: color-mix(in oklab, var(--oui-foreground, var(--oui-gray-8)), transparent 12.5%);
 		font-size: .75em;
-		font-weight: bold;
-		letter-spacing: .1em;
-		text-transform: uppercase;
 	}
 
+	:where(&-pill-tiny) {
+		padding: .25em .75em;
+	}
+
+	:where(&-tag-tiny) {
+		padding: .25em .5em;
+	}
+
+	// Colors
+
 	:where(&-pill-blue, &-tag-blue) {
 		--oui-background: var(--oui-blue-0);
 		--oui-foreground: var(--oui-blue-8);

package/src/css/mixins.scss

@@ -53,11 +53,24 @@
 }
 
 @mixin shadow($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,
+		0 2px 4px -1px $color;
+}
+
+@mixin shadowOverlay($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,
 		0 2px 4px -1px $color,
+		0 4px 8px -2px $color,
+		0 8px 16px -4px $color,
+		0 16px 32px -8px $color,
+		0 32px 64px -16px $color,
+		0 64px 128px -32px $color;
 }
 
 @mixin visuallyHidden() {

package/src/css/tooltip.scss

@@ -0,0 +1,14 @@
+@use 'mixins.scss' as mixins;
+
+:where([oui-tooltip-content]) {
+	@include mixins.shadowOverlay;
+
+	max-width: 48ch;
+	padding: 0.75em 1em;
+	background-color: var(--oui-absolute);
+	border-radius: 0.25rem;
+	font-size: 0.875rem;
+	position: fixed;
+	inset: 0 auto auto 0;
+	z-index: 10;
+}

package/src/js/attributable.ts

@@ -0,0 +1,70 @@
+export function attributable(
+	attribute: string,
+	add: (element: HTMLElement) => void,
+	remove: (element: HTMLElement) => void,
+): void {
+	const observer = new MutationObserver(entries => {
+		const {length} = entries;
+
+		for (let index = 0; index < length; index += 1) {
+			const entry = entries[index];
+
+			if (entry.type === 'attributes' && entry.target instanceof HTMLElement) {
+				if (entry.target.hasAttribute(attribute)) {
+					handleAdded(attribute, [entry.target], add);
+				} else {
+					handleRemoved([entry.target], remove);
+				}
+			} else if (entry.type === 'childList') {
+				handleAdded(attribute, entry.addedNodes, add);
+				handleRemoved(entry.removedNodes, remove);
+			}
+		}
+	});
+
+	observer.observe(document, {
+		attributeFilter: [attribute],
+		attributes: true,
+		childList: true,
+		subtree: true,
+	});
+
+	requestAnimationFrame(() => {
+		handleAdded(attribute, document.querySelectorAll(`[${attribute}]`), add);
+	});
+}
+
+function handleAdded(
+	attribute: string,
+	nodes: Node[] | NodeList,
+	add: (element: HTMLElement) => void,
+): void {
+	const elements = [...nodes].filter(
+		node => node instanceof HTMLElement,
+	) as HTMLElement[];
+
+	const {length} = elements;
+
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+
+		if (element.hasAttribute(attribute)) {
+			add(element);
+		}
+	}
+}
+
+function handleRemoved(
+	nodes: Node[] | NodeList,
+	remove: (element: HTMLElement) => void,
+): void {
+	const elements = [...nodes].filter(
+		node => node instanceof HTMLElement,
+	) as HTMLElement[];
+
+	const {length} = elements;
+
+	for (let index = 0; index < length; index += 1) {
+		remove(elements[index]);
+	}
+}

package/src/js/focus-trap.ts

@@ -2,6 +2,7 @@ import {clamp} from '@oscarpalmer/atoms/number';
 import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {getFocusable} from '@oscarpalmer/toretto/focusable';
+import {attributable} from './attributable';
 
 class FocusTrap {
 	active = true;
@@ -31,19 +32,9 @@ class FocusTrap {
 	}
 }
 
-function addFocusTraps(nodes: Node[] | NodeList): void {
-	const elements = [...nodes].filter(
-		node => node instanceof HTMLElement,
-	) as HTMLElement[];
-
-	const {length} = elements;
-
-	for (let index = 0; index < length; index += 1) {
-		const element = elements[index];
-
-		if (element.hasAttribute(selector)) {
-			focusTraps.set(element, new FocusTrap(element));
-		}
+function addFocusTrap(element: HTMLElement): void {
+	if (!focusTraps.has(element)) {
+		focusTraps.set(element, new FocusTrap(element));
 	}
 }
 
@@ -117,65 +108,26 @@ function onTab(event: KeyboardEvent): void {
 	}
 }
 
-function removeFocusTraps(nodes: Node[] | NodeList): void {
-	const elements = [...nodes].filter(
-		node => node instanceof HTMLElement,
-	) as HTMLElement[];
-
-	const {length} = elements;
-
-	for (let index = 0; index < length; index += 1) {
-		const element = elements[index];
-
-		focusTraps.get(element)?.destroy();
-		focusTraps.delete(element);
-	}
+function removeFocusTraps(element: HTMLElement): void {
+	focusTraps.get(element)?.destroy();
+	focusTraps.delete(element);
 }
 
 const focusTraps = new WeakMap<HTMLElement, FocusTrap>();
 const inactive = new Set<FocusTrap>();
+const selector = 'oui-focus-trap';
 
-const observer = new MutationObserver(entries => {
-	const {length} = entries;
-
-	for (let index = 0; index < length; index += 1) {
-		const entry = entries[index];
+attributable(selector, addFocusTrap, removeFocusTraps);
 
-		if (entry.type === 'attributes' && entry.target instanceof HTMLElement) {
-			if (entry.target.hasAttribute(selector)) {
-				addFocusTraps([entry.target]);
-			} else {
-				removeFocusTraps([entry.target]);
-			}
-		} else if (entry.type === 'childList') {
-			addFocusTraps(entry.addedNodes);
-			removeFocusTraps(entry.removedNodes);
-		}
-	}
+on(document, 'focusout', onFocusOut, {
+	capture: true,
 });
 
-const selector = 'oui-focus-trap';
-
-observer.observe(document, {
-	attributeFilter: [selector],
-	attributes: true,
-	childList: true,
-	subtree: true,
+on(document, 'keydown', onTab, {
+	capture: true,
+	passive: false,
 });
 
-requestAnimationFrame(() => {
-	addFocusTraps(document.querySelectorAll(`[${selector}]`));
-
-	on(document, 'focusout', onFocusOut, {
-		capture: true,
-	});
-
-	on(document, 'keydown', onTab, {
-		capture: true,
-		passive: false,
-	});
-
-	on(document, 'keydown', onEscape, {
-		passive: false,
-	});
+on(document, 'keydown', onEscape, {
+	passive: false,
 });