@oscarpalmer/oui 0.12.0 → 0.14.0

package/dist/js/tooltip.cjs

@@ -0,0 +1,161 @@
+"use strict";
+const is = require("@oscarpalmer/atoms/is");
+const event = require("@oscarpalmer/toretto/event");
+const attributable = require("./attributable.cjs");
+const floatable = require("./floatable.cjs");
+class Tooltip {
+  abortController = new AbortController();
+  attributes;
+  floatable;
+  constructor(anchor, content) {
+    this.attributes = content.attributes;
+    this.floatable = new floatable.Floatable(anchor, content.element);
+    initialize(this);
+  }
+  destroy() {
+    floatable.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;
+  }
+}
+function addTooltip(anchor) {
+  if (tooltips.has(anchor)) {
+    return;
+  }
+  const content = getContent(anchor);
+  if (content != null) {
+    tooltips.set(anchor, new Tooltip(anchor, content));
+  }
+}
+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 (is.isNullableOrWhitespace(content)) {
+    content = anchor.getAttribute("aria-description");
+  }
+  if (is.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 (is.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;
+}
+function initialize(tooltip) {
+  const { abortController, floatable: floatable$1 } = tooltip;
+  const { anchor, content } = floatable$1;
+  anchor.insertAdjacentElement("afterend", content);
+  const elements = [anchor, content];
+  for (const element of elements) {
+    for (const event$1 of activateEvents) {
+      event.on(
+        element,
+        event$1,
+        () => {
+          floatable.activate(floatable$1, active, 250);
+        },
+        {
+          signal: abortController.signal
+        }
+      );
+    }
+    for (const event$1 of deactivateEvents) {
+      event.on(
+        element,
+        event$1,
+        () => {
+          floatable.deactivate(floatable$1, active, 250);
+        },
+        {
+          signal: abortController.signal
+        }
+      );
+    }
+  }
+}
+function removeTooltip(element) {
+  tooltips.get(element)?.destroy();
+  tooltips.delete(element);
+}
+function reset(anchor, attributes) {
+  console.log("reset", anchor, attributes);
+  if (attributes.ariaDescribedby == null) {
+    anchor.removeAttribute("aria-describedby");
+  } else {
+    anchor.setAttribute("aria-describedby", attributes.ariaDescribedby);
+  }
+}
+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.attributable(selector, addTooltip, removeTooltip);
+event.on(document, "keydown", (event2) => {
+  if (event2.key === "Escape") {
+    for (const floatable$1 of active) {
+      floatable.deactivate(floatable$1, active);
+    }
+  }
+});

package/dist/js/tooltip.js

@@ -0,0 +1,160 @@
+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;
+  }
+}
+function addTooltip(anchor) {
+  if (tooltips.has(anchor)) {
+    return;
+  }
+  const content = getContent(anchor);
+  if (content != null) {
+    tooltips.set(anchor, new Tooltip(anchor, content));
+  }
+}
+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
+  };
+}
+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;
+}
+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;
+}
+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, 250);
+        },
+        {
+          signal: abortController.signal
+        }
+      );
+    }
+    for (const event of deactivateEvents) {
+      on(
+        element,
+        event,
+        () => {
+          deactivate(floatable, active, 250);
+        },
+        {
+          signal: abortController.signal
+        }
+      );
+    }
+  }
+}
+function removeTooltip(element) {
+  tooltips.get(element)?.destroy();
+  tooltips.delete(element);
+}
+function reset(anchor, attributes) {
+  console.log("reset", anchor, attributes);
+  if (attributes.ariaDescribedby == null) {
+    anchor.removeAttribute("aria-describedby");
+  } else {
+    anchor.setAttribute("aria-describedby", attributes.ariaDescribedby);
+  }
+}
+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);
+    }
+  }
+});

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",
@@ -22,10 +22,10 @@
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",
 		"sass": "^1.89",
-		"stylelint": "^16.21",
+		"stylelint": "^16.22",
 		"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"],
@@ -84,5 +94,5 @@
 	},
 	"type": "module",
 	"types": "types/index.d.cts",
-	"version": "0.12.0"
+	"version": "0.14.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,21 @@
+@use 'mixins.scss' as mixins;
+
+:where([oui-tooltip]:is(abbr, b, cite, dfn, code, em, i, kbd, mark, q, samp, small, span, strong, sub, sup, time, var)) {
+	text-decoration: underline dotted;
+	text-decoration-skip-ink: auto;
+	text-underline-offset: 0.25em;
+	cursor: help;
+}
+
+: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/floatable.ts

@@ -0,0 +1,168 @@
+export class Floatable {
+	activate: number | undefined;
+	active = false;
+	deactivate: number | undefined;
+	frame: DOMHighResTimeStamp | undefined;
+
+	constructor(
+		public anchor: HTMLElement,
+		public content: HTMLElement,
+	) {}
+
+	destroy(): void {
+		this.activate = undefined;
+		this.deactivate = undefined;
+		this.frame = undefined;
+
+		this.anchor = undefined as never;
+		this.content = undefined as never;
+	}
+}
+
+export function activate(
+	floatable: Floatable,
+	active: Set<Floatable>,
+	time?: number,
+): void {
+	stop(floatable);
+
+	if (floatable.active) {
+		return;
+	}
+
+	if (time == null || time === 0) {
+		onActivate(floatable, active);
+	} else {
+		floatable.activate = +setTimeout(() => {
+			onActivate(floatable, active);
+		}, time);
+	}
+}
+
+export function deactivate(
+	floatable: Floatable,
+	active: Set<Floatable>,
+	time?: number,
+): void {
+	stop(floatable);
+
+	if (!floatable.active) {
+		return;
+	}
+
+	if (time == null || time === 0) {
+		onDeactivate(floatable, active);
+	} else {
+		floatable.deactivate = +setTimeout(() => {
+			onDeactivate(floatable, active);
+		}, time);
+	}
+}
+
+function getX(
+	anchor: DOMRect,
+	content: DOMRect,
+): {left?: number; right?: number} {
+	if (content.width + 2 * margin >= window.innerWidth) {
+		return {
+			left: margin,
+			right: margin,
+		};
+	}
+
+	const left = anchor.left + (anchor.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 getY(anchor: DOMRect, content: DOMRect): number {
+	let top = anchor.top - content.height - margin;
+
+	if (top - margin >= 0) {
+		return top;
+	}
+
+	top = anchor.bottom + margin;
+
+	if (top + content.height + margin <= window.innerHeight) {
+		return top;
+	}
+
+	return anchor.top + (anchor.height - content.height) / 2;
+}
+
+function onActivate(floatable: Floatable, active: Set<Floatable>): void {
+	floatable.active = true;
+
+	active.add(floatable);
+
+	document.body.append(floatable.content);
+
+	floatable.content.hidden = false;
+
+	update(floatable);
+}
+
+function onDeactivate(floatable: Floatable, active: Set<Floatable>): void {
+	floatable.active = false;
+
+	active.delete(floatable);
+
+	floatable.content.hidden = true;
+
+	floatable.anchor.insertAdjacentElement('afterend', floatable.content);
+}
+
+function update(floatable: Floatable): void {
+	function run(): void {
+		const anchor = floatable.anchor.getBoundingClientRect();
+		const content = floatable.content.getBoundingClientRect();
+
+		const {left, right} = getX(anchor, content);
+		const top = getY(anchor, content);
+
+		floatable.content.style.inset = `${top}px ${right == null ? 'auto' : `${right}px`} auto ${left == null ? 'auto' : `${left}px`}`;
+
+		floatable.frame = requestAnimationFrame(run);
+	}
+
+	floatable.frame = requestAnimationFrame(run);
+}
+
+function stop(floatable: Floatable): void {
+	if (floatable.frame != null) {
+		cancelAnimationFrame(floatable.frame);
+	}
+
+	if (floatable.activate != null) {
+		clearTimeout(floatable.activate);
+	}
+
+	if (floatable.deactivate != null) {
+		clearTimeout(floatable.deactivate);
+	}
+
+	floatable.activate = undefined;
+	floatable.deactivate = undefined;
+	floatable.frame = undefined;
+}
+
+//
+
+const margin =
+	Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 4;