@oscarpalmer/oui 0.19.0 → 0.20.0

package/dist/js/{splitter.js → splitter.mjs}

@@ -5,6 +5,7 @@ import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { round } from "@oscarpalmer/atoms/math";
 import { toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
+//#region src/js/splitter.ts
 var OuiSplitterElement = class extends HTMLElement {
 	static observedAttributes = [
 		"max",
@@ -63,7 +64,7 @@ var OuiSplitterElement = class extends HTMLElement {
 		}
 	}
 };
-var index = 0;
+let index = 0;
 var Splitter = class {
 	element;
 	handle;
@@ -114,11 +115,11 @@ function createHandle() {
 	handle.setAttribute(ATTRIBUTE_HANDLE, "");
 	return handle;
 }
-function createSeparator(splitter$1) {
+function createSeparator(splitter) {
 	const separator = document.createElement("div");
 	separator.role = "separator";
 	separator.tabIndex = 0;
-	separator.setAttribute("aria-controls", splitter$1.element.id);
+	separator.setAttribute("aria-controls", splitter.element.id);
 	separator.setAttribute("aria-label", "Resize panels");
 	separator.setAttribute(ATTRIBUTE_SEPARATOR, "");
 	return separator;
@@ -126,20 +127,20 @@ function createSeparator(splitter$1) {
 function getContained(min, value, max) {
 	return round(clamp(value, min, max), VALUE_DECIMALS);
 }
-function getSize(splitter$1, value) {
-	const { height, left, top, width } = splitter$1.rectangle;
-	const fraction = (value - (splitter$1.types.horizontal ? top : left)) / (splitter$1.types.horizontal ? height : width);
-	return getContained(splitter$1.values.min, fraction, splitter$1.values.max);
+function getSize(splitter, value) {
+	const { height, left, top, width } = splitter.rectangle;
+	const fraction = (value - (splitter.types.horizontal ? top : left)) / (splitter.types.horizontal ? height : width);
+	return getContained(splitter.values.min, fraction, splitter.values.max);
 }
-function getTypes(splitter$1, width, height) {
-	const type = splitter$1.element.getAttribute("type")?.trim() ?? "";
+function getTypes(splitter, width, height) {
+	const type = splitter.element.getAttribute("type")?.trim() ?? "";
 	if (type === "horizontal") return {
 		auto: false,
 		horizontal: true
 	};
 	if (type === "auto") return {
 		auto: true,
-		horizontal: (height ?? splitter$1.rectangle.height) > (width ?? splitter$1.rectangle.width)
+		horizontal: (height ?? splitter.rectangle.height) > (width ?? splitter.rectangle.width)
 	};
 	return {
 		auto: false,
@@ -189,34 +190,34 @@ function onKeydown(event) {
 	}
 }
 function onNavigate(event) {
-	const splitter$1 = MAPPED_ELEMENTS.get(findAncestor(event.target, "[oui-splitter-separator]"));
-	if (splitter$1 == null) return;
-	const { types, values } = splitter$1;
+	const splitter = MAPPED_ELEMENTS.get(findAncestor(event, "[oui-splitter-separator]"));
+	if (splitter == null) return;
+	const { types, values } = splitter;
 	if (KEYS_ABSOLUTE.has(event.key)) {
-		setSize(splitter$1, event.key === "End" ? values.max : values.min, true);
+		setSize(splitter, event.key === "End" ? values.max : values.min, true);
 		return;
 	}
 	if (types.horizontal && !KEYS_HORIZONTAL.has(event.key) || !(types.horizontal || KEYS_VERTICAL.has(event.key))) return;
 	const offset = KEYS_NEGATIVE.has(event.key) ? -1 : 1;
-	setSize(splitter$1, getContained(values.min, values.now.current + offset * NAVIGATION_MODIFIER, values.max), true);
+	setSize(splitter, getContained(values.min, values.now.current + offset * NAVIGATION_MODIFIER, values.max), true);
 }
 function onObservation(entries) {
 	if (frame != null) cancelAnimationFrame(frame);
 	frame = requestAnimationFrame(() => {
 		for (const entry of entries) {
-			const splitter$1 = MAPPED_ELEMENTS.get(entry.target);
-			if (splitter$1 == null) return;
-			splitter$1.types = getTypes(splitter$1, entry.contentRect.width, entry.contentRect.height);
-			if (splitter$1.types.horizontal) splitter$1.element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
-			else splitter$1.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
-			setAriaOrientation(splitter$1);
+			const splitter = MAPPED_ELEMENTS.get(entry.target);
+			if (splitter == null) return;
+			splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
+			if (splitter.types.horizontal) splitter.element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
+			else splitter.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
+			setAriaOrientation(splitter);
 		}
 		frame = void 0;
 	});
 }
 function onPointerdown(event) {
 	if (event.type === "mousedown" && supportsTouch.value || event.type === "touchstart" && !supportsTouch.value) return;
-	splitter = MAPPED_ELEMENTS.get(findAncestor(event.target, SELECTOR_HANDLE));
+	splitter = MAPPED_ELEMENTS.get(findAncestor(event, SELECTOR_HANDLE));
 	if (splitter == null) return;
 	if (supportsTouch.value) event.preventDefault();
 	splitter.handle.setAttribute(ATTRIBUTE_ACTIVE, "");
@@ -235,51 +236,51 @@ function onPointermove(event) {
 function onPointerup() {
 	if (splitter != null) onEnd(false);
 }
-function setAriaOrientation(splitter$1) {
-	splitter$1.separator.setAttribute("aria-orientation", splitter$1.types.horizontal ? "horizontal" : "vertical");
+function setAriaOrientation(splitter) {
+	splitter.separator.setAttribute("aria-orientation", splitter.types.horizontal ? "horizontal" : "vertical");
 }
-function setAriaValue(splitter$1) {
-	splitter$1.separator.setAttribute("aria-valuemax", String(splitter$1.values.max));
-	splitter$1.separator.setAttribute("aria-valuemin", String(splitter$1.values.min));
-	splitter$1.separator.setAttribute("aria-valuenow", String(splitter$1.values.now.current));
+function setAriaValue(splitter) {
+	splitter.separator.setAttribute("aria-valuemax", String(splitter.values.max));
+	splitter.separator.setAttribute("aria-valuemin", String(splitter.values.min));
+	splitter.separator.setAttribute("aria-valuenow", String(splitter.values.now.current));
 }
-function setSize(splitter$1, size, previous) {
-	splitter$1.values.now.current = size;
-	if (previous) splitter$1.values.now.previous = size;
-	splitter$1.element.style.setProperty("--oui-splitter-size", `${size}`);
-	setAriaValue(splitter$1);
+function setSize(splitter, size, previous) {
+	splitter.values.now.current = size;
+	if (previous) splitter.values.now.previous = size;
+	splitter.element.style.setProperty("--oui-splitter-size", `${size}`);
+	setAriaValue(splitter);
 }
-var SELECTOR = "oui-splitter";
-var ATTRIBUTE_ACTIVE = `${SELECTOR}-active`;
-var ATTRIBUTE_HANDLE = `${SELECTOR}-handle`;
-var ATTRIBUTE_HORIZONTAL = `${SELECTOR}-horizontal`;
-var ATTRIBUTE_SEPARATOR = `${SELECTOR}-separator`;
-var KEYS_ABSOLUTE = new Set(["End", "Home"]);
-var KEYS_HORIZONTAL = new Set(["ArrowDown", "ArrowUp"]);
-var KEYS_NEGATIVE = new Set(["ArrowLeft", "ArrowUp"]);
-var KEYS_VERTICAL = new Set(["ArrowLeft", "ArrowRight"]);
-var KEYS_ALL = new Set([
+const SELECTOR = "oui-splitter";
+const ATTRIBUTE_ACTIVE = `${SELECTOR}-active`;
+const ATTRIBUTE_HANDLE = `${SELECTOR}-handle`;
+const ATTRIBUTE_HORIZONTAL = `${SELECTOR}-horizontal`;
+const ATTRIBUTE_SEPARATOR = `${SELECTOR}-separator`;
+const KEYS_ABSOLUTE = new Set(["End", "Home"]);
+const KEYS_HORIZONTAL = new Set(["ArrowDown", "ArrowUp"]);
+const KEYS_NEGATIVE = new Set(["ArrowLeft", "ArrowUp"]);
+const KEYS_VERTICAL = new Set(["ArrowLeft", "ArrowRight"]);
+const KEYS_ALL = new Set([
 	...KEYS_ABSOLUTE,
 	...KEYS_HORIZONTAL,
 	...KEYS_VERTICAL
 ]);
-var MAPPED_ELEMENTS = /* @__PURE__ */ new WeakMap();
-var METHODS_CONNECT = ["delete", "set"];
-var METHODS_OBSERVE = ["unobserve", "observe"];
-var NAVIGATION_MAXIMUM_PERCENTAGE = .9;
-var NAVIGATION_MAXIMUM_TOTAL = 100;
-var NAVIGATION_MINIMUM_PERCENTAGE = .1;
-var NAVIGATION_MODIFIER = .05;
-var RESIZE_OBSERVER = new ResizeObserver(onObservation);
-var SELECTOR_HANDLE = `[${ATTRIBUTE_HANDLE}]`;
-var STYLING_TOGGLER = toggleStyles(document.body, {
+const MAPPED_ELEMENTS = /* @__PURE__ */ new WeakMap();
+const METHODS_CONNECT = ["delete", "set"];
+const METHODS_OBSERVE = ["unobserve", "observe"];
+const NAVIGATION_MAXIMUM_PERCENTAGE = .9;
+const NAVIGATION_MAXIMUM_TOTAL = 100;
+const NAVIGATION_MINIMUM_PERCENTAGE = .1;
+const NAVIGATION_MODIFIER = .05;
+const RESIZE_OBSERVER = new ResizeObserver(onObservation);
+const SELECTOR_HANDLE = `[${ATTRIBUTE_HANDLE}]`;
+const STYLING_TOGGLER = toggleStyles(document.body, {
 	touchAction: "none",
 	userSelect: "none",
 	webkitUserSelect: "none"
 });
-var VALUE_DECIMALS = 6;
-var frame;
-var splitter;
+const VALUE_DECIMALS = 6;
+let frame;
+let splitter;
 customElements.define(SELECTOR, OuiSplitterElement);
 on(document, "keydown", onKeydown);
 on(document, "mousedown", onPointerdown);
@@ -287,4 +288,5 @@ on(document, "pointermove", onPointermove);
 on(document, "pointerup", onPointerup);
 on(document, "touchcancel", onPointerup, { passive: false });
 on(document, "touchstart", onPointerdown, { passive: false });
+//#endregion
 export { OuiSplitterElement };

package/dist/js/tooltip.d.mts

@@ -0,0 +1,4 @@
+//#region src/js/tooltip.d.ts
+declare function setDelay(value: number): void;
+//#endregion
+export { setDelay };

package/dist/js/{tooltip.js → tooltip.mjs}

@@ -1,8 +1,9 @@
-import { attributable } from "./attributable.js";
-import { Floatable } from "./floatable.js";
+import { attributable } from "./attributable.mjs";
+import { Floatable } from "./floatable.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+//#region src/js/tooltip.ts
 var Tooltip = class {
 	attributes;
 	floatable;
@@ -42,11 +43,11 @@ function closeTooltips(next) {
 	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");
+		active.floatable?.options.content.removeAttribute("oui-tooltip-content-active");
 		requestAnimationFrame(() => {
 			active.timer = setTimeout(() => {
 				TOOLTIPS_ACTIVE.delete(active);
-				active.floatable.toggle(false);
+				active.floatable?.toggle(false);
 			}, delay);
 		});
 	}
@@ -114,7 +115,7 @@ function onActivate(event) {
 	onToggle(event, true);
 }
 function onClick(event) {
-	if (findAncestor(event.target, SELECTOR_CONTENT) != null) event.stopPropagation();
+	if (findAncestor(event, SELECTOR_CONTENT) != null) event.stopPropagation();
 }
 function onDeactivate(event) {
 	onToggle(event, false);
@@ -123,7 +124,7 @@ function onToggle(event, activate) {
 	if (toggle != null) cancelAnimationFrame(toggle);
 	toggle = requestAnimationFrame(() => {
 		toggle = void 0;
-		const element = findAncestor(event.target, SELECTOR_FULL);
+		const element = findAncestor(event, 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;
@@ -153,22 +154,23 @@ function reset(anchor, attributes) {
 function setDelay(value) {
 	delay = typeof value === "number" && value >= 0 ? value : delay;
 }
-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;
+const SELECTOR = "oui-tooltip";
+const ATTRIBUTE_CLASS = `${SELECTOR}-class`;
+const ATTRIBUTE_CONTENT = `${SELECTOR}-content`;
+const ATTRIBUTE_POSITION = `${SELECTOR}-position`;
+const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+const SELECTOR_FULL = `[${SELECTOR}], [${ATTRIBUTE_CONTENT}]`;
+const EXPRESSION_WHITESPACE = /\s+/;
+const TOOLTIPS_ACTIVE = /* @__PURE__ */ new Set();
+const TOOLTIPS_ALL = /* @__PURE__ */ new WeakMap();
+let delay = 500;
+let index = 0;
+let 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);
+//#endregion
 export { setDelay };

package/package.json

@@ -1,90 +1,85 @@
 {
+	"name": "@oscarpalmer/oui",
+	"version": "0.20.0",
+	"description": "Styles, components, and utilities for building websites and applications.",
+	"keywords": [
+		"css",
+		"design",
+		"framework",
+		"library",
+		"scss",
+		"style",
+		"stylesheet",
+		"utility"
+	],
+	"license": "MIT",
 	"author": {
 		"name": "Oscar Palmér",
 		"url": "https://oscarpalmer.se"
 	},
-	"dependencies": {
-		"@oscarpalmer/atoms": "^0.124",
-		"@oscarpalmer/toretto": "^0.34"
-	},
-	"description": "Styles, components, and utilities for building websites and applications.",
-	"devDependencies": {
-		"@types/node": "^25",
-		"@vitest/coverage-istanbul": "^4",
-		"autoprefixer": "^10.4",
-		"jsdom": "^27.4",
-		"oxfmt": "^0.21",
-		"oxlint": "^1.36",
-		"postcss-cli": "^11",
-		"postcss-input-range": "^6",
-		"postcss-scss": "^4",
-		"rolldown": "1.0.0-beta.57",
-		"sass": "^1.97",
-		"stylelint": "^16.26",
-		"stylelint-config-standard-scss": "^16",
-		"tslib": "^2.8",
-		"typescript": "^5.9",
-		"vite": "8.0.0-beta.5",
-		"vitest": "^4"
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/oscarpalmer/oui.git"
 	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"type": "module",
+	"module": "dist/js/index.mjs",
+	"types": "dist/js/index.d.mts",
 	"exports": {
 		".": {
-			"types": "./types/index.d.ts",
-			"default": "./dist/js/index.js"
+			"types": "./dist/js/index.d.mts",
+			"default": "./dist/js/index.mjs"
 		},
 		"./focus-trap": {
-			"types": "./types/focus-trap/standalone.d.ts",
-			"default": "./dist/js/focus-trap/standalone.js"
+			"types": "./dist/js/focus-trap/standalone.d.mts",
+			"default": "./dist/js/focus-trap/standalone.mjs"
 		},
 		"./popover": {
-			"types": "./types/popover.d.ts",
-			"default": "./dist/js/popover.js"
+			"types": "./dist/js/popover.d.mts",
+			"default": "./dist/js/popover.mjs"
 		},
 		"./splitter": {
-			"types": "./types/splitter.d.ts",
-			"default": "./dist/js/splitter.js"
+			"types": "./dist/js/splitter.d.mts",
+			"default": "./dist/js/splitter.mjs"
 		},
 		"./tooltip": {
-			"types": "./types/tooltip.d.ts",
-			"default": "./dist/js/tooltip.js"
+			"types": "./dist/js/tooltip.d.mts",
+			"default": "./dist/js/tooltip.mjs"
 		}
 	},
-	"files": [
-		"dist",
-		"src",
-		"types"
-	],
-	"keywords": [
-		"css",
-		"scss",
-		"design",
-		"framework",
-		"library",
-		"style",
-		"stylesheet",
-		"utility"
-	],
-	"license": "MIT",
-	"module": "dist/js/index.js",
-	"name": "@oscarpalmer/oui",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/oscarpalmer/oui.git"
-	},
 	"scripts": {
-		"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": "npm run clean && npx vite build && npm run rolldown:build && npx tsc",
-		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
-		"rolldown:build": "npx rolldown -c",
-		"rolldown:watch": "npx rolldown -c ./rolldown.config.js --watch",
-		"test": "npx vitest --coverage",
-		"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"
+		"build": "vp run build:js && vp run build:css",
+		"build:css": "vp run build:postcss && vpx sass ./postcss:./dist/css --no-source-map",
+		"build:postcss": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss",
+		"build:js": "vpx vp pack",
+		"test": "vpx vitest --coverage",
+		"tsdown:build": "vpx tsdown -c ./tsdown.config.ts",
+		"tsdown:watch": "vpx tsdown -c ./tsdown.config.ts --watch",
+		"watch:css": "vpx sass ./postcss:./dist/css --no-source-map --watch",
+		"watch:postcss": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
+		"watch:js": "vpx vite build --watch"
 	},
-	"type": "module",
-	"types": "types/index.d.ts",
-	"version": "0.19.0"
+	"dependencies": {
+		"@oscarpalmer/atoms": "^0.170",
+		"@oscarpalmer/toretto": "^0.41"
+	},
+	"devDependencies": {
+		"@vitest/coverage-istanbul": "^4.1",
+		"autoprefixer": "^10.4",
+		"jsdom": "^29",
+		"postcss-cli": "^11",
+		"postcss-input-range": "^6",
+		"postcss-scss": "^4",
+		"sass": "^1.98",
+		"stylelint": "^17.6",
+		"stylelint-config-standard-scss": "^17",
+		"typescript": "^5.9",
+		"vite": "npm:@voidzero-dev/vite-plus-core@latest",
+		"vite-plus": "latest",
+		"vitest": "npm:@voidzero-dev/vite-plus-test@latest"
+	},
+	"packageManager": "npm@11.12.1"
 }

package/src/css/mixins.scss

@@ -51,6 +51,36 @@
 	border-radius: 0.5em;
 }
 
+@mixin floatable() {
+	@include shadow-overlay;
+
+	--margin-left: 0;
+	--margin-top: 0;
+
+	margin: var(--margin-top, 0) 0 0 var(--margin-left, 0);
+	pointer-events: all !important;
+
+	&[position^='above'],
+	&[position^='top'] {
+		--margin-top: -0.5rem;
+	}
+
+	&[position^='below'],
+	&[position^='bottom'] {
+		--margin-top: 0.5rem;
+	}
+
+	&[position^='end'],
+	&[position^='right'] {
+		--margin-left: 0.5rem;
+	}
+
+	&[position^='left'],
+	&[position^='start'] {
+		--margin-left: -0.5rem;
+	}
+}
+
 @mixin shadow($color: rgb(0 0 0 / 5%), $inset: transparent) {
 	box-shadow:
 		inset 0 1px 0 0 $inset,
@@ -83,7 +113,6 @@
 	width: 1px !important;
 	height: 1px !important;
 	padding: 0 !important;
-	clip: rect(1px, 1px 1px, 1px) !important;
 	clip-path: inset(50%) !important;
 	overflow: hidden !important;
 	border: 0 !important;

package/src/css/popover.scss

@@ -1,13 +1,18 @@
 @use 'mixins.scss' as mixins;
 
 :where([oui-popover-content]) {
-	@include mixins.shadow-overlay;
+	@include mixins.floatable;
 
 	padding: 1rem;
+	overscroll-behavior: contain;
 	background-color: var(--oui-absolute);
 	border-radius: 0.5rem;
 
 	&:focus {
 		outline: none;
 	}
+
+	* {
+		overscroll-behavior: contain;
+	}
 }

package/src/css/reset.scss

@@ -54,7 +54,7 @@
 	/** Prevent text size inflation (e.g., after orientation change) [AB][RE][SE] */
 	text-size-adjust: none;
 	tab-size: 4;
-	word-break: break-word;
+	overflow-wrap: break-word;
 }
 
 :where(body) {
@@ -104,7 +104,7 @@
 	summary
 ) {
 	/** Correct the inability to style clickable types in iOS [HR][RS][SE] */
-	appearance: button;
+	appearance: auto;
 	/** Ditto */
 	cursor: pointer;
 }
@@ -171,7 +171,7 @@
 }
 
 :where(small, sub, sup) {
-	font-size: 0.875rem;
+	font-size: 0.875em;
 }
 
 :where(sub, sup) {
@@ -271,7 +271,7 @@
 
 ::file-selector-button {
 	/** Correct the inability to style upload buttons in iOS and Safari [RS][SE] */
-	appearance: button;
+	appearance: auto;
 	color: inherit;
 	font: inherit;
 	line-height: 1.25;

package/src/css/table.scss

@@ -9,10 +9,10 @@
 	:where(&_wrapper) {
 		max-height: 32em;
 		overflow: auto;
+		overscroll-behavior: contain;
 		border: 1px solid var(--oui-gray-3);
 		border-radius: 0.25em;
 		position: relative;
-		overscroll-behavior-y: none;
 	}
 
 	:where(& caption) {

package/src/css/tooltip.scss

@@ -29,7 +29,7 @@
 }
 
 :where([oui-tooltip-content]) {
-	@include mixins.shadow-overlay;
+	@include mixins.floatable;
 
 	max-width: 48ch;
 	padding: 0.75em 1em;
@@ -39,6 +39,60 @@
 	font-size: 0.875rem;
 	transition: opacity 0.125s ease-in-out;
 	transition-delay: 0s;
+
+	&::after {
+		content: '';
+		opacity: 0;
+		position: absolute;
+	}
+
+	&[position^='above'],
+	&[position^='below'],
+	&[position^='bottom'],
+	&[position^='top'] {
+		&::after {
+			width: 100%;
+			height: 0.5rem;
+		}
+	}
+
+	&[position^='above'],
+	&[position^='top'] {
+		&::after {
+			inset: 100% 0 0;
+		}
+	}
+
+	&[position^='below'],
+	&[position^='bottom'] {
+		&::after {
+			inset: -5rem 0 0;
+		}
+	}
+
+	&[position^='end'],
+	&[position^='left'],
+	&[position^='right'],
+	&[position^='start'] {
+		&::after {
+			width: 0.5rem;
+			height: 100%;
+		}
+	}
+
+	&[position^='end'],
+	&[position^='right'] {
+		&::after {
+			inset: 0 0 0 -0.5rem;
+		}
+	}
+
+	&[position^='left'],
+	&[position^='start'] {
+		&::after {
+			inset: 0 0 0 100%;
+		}
+	}
 }
 
 :where([oui-tooltip-content][oui-tooltip-content-active]) {

package/src/js/attributable.ts

@@ -49,6 +49,10 @@ function handleAdded(
 		if (element.hasAttribute(attribute)) {
 			add(element);
 		}
+
+		if (element.hasChildNodes()) {
+			handleAdded(attribute, element.childNodes, add);
+		}
 	}
 }
 
@@ -58,6 +62,12 @@ function handleRemoved(nodes: Node[] | NodeList, remove: (element: HTMLElement)
 	const {length} = elements;
 
 	for (let index = 0; index < length; index += 1) {
-		remove(elements[index]);
+		const element = elements[index];
+
+		remove(element);
+
+		if (element.hasChildNodes()) {
+			handleRemoved(element.childNodes, remove);
+		}
 	}
 }