@oscarpalmer/oui 0.19.0 → 0.21.0

package/package.json

@@ -1,90 +1,87 @@
 {
+	"name": "@oscarpalmer/oui",
+	"version": "0.21.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 clean && vp pack && vp run css:build",
+		"clean": "rm -rf ./dist && rm -rf ./postcss",
+		"css:build": "vp run postcss:build && vpx sass ./postcss:./dist/css --no-source-map",
+		"css:watch": "vpx sass ./postcss:./dist/css --no-source-map --watch",
+		"postcss:build": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss",
+		"postcss:watch": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
+		"test": "vpx vitest --coverage",
+		"tsdown": "vpx tsdown -c ./tsdown.config.ts --watch",
+		"watch": "vp run clean && concurrently \"php -S localhost:3000\" \"vp run postcss:watch\" \"vp run css:watch\" \"vp run tsdown\""
 	},
-	"type": "module",
-	"types": "types/index.d.ts",
-	"version": "0.19.0"
+	"dependencies": {
+		"@oscarpalmer/atoms": "^0.187.2",
+		"@oscarpalmer/toretto": "^0.46"
+	},
+	"devDependencies": {
+		"@oxlint/plugins": "^1.67",
+		"@vitest/coverage-istanbul": "^4.1",
+		"autoprefixer": "^10.5",
+		"concurrently": "^9.2",
+		"jsdom": "^29.1",
+		"postcss-cli": "^11",
+		"postcss-input-range": "^6",
+		"postcss-scss": "^4",
+		"sass": "^1.100",
+		"stylelint": "^17.11",
+		"stylelint-config-standard-scss": "^17",
+		"tsdown": "^0.22",
+		"typescript": "^6",
+		"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/focus-trap/embedded.ts

@@ -83,7 +83,7 @@ export function createFocusTrap(element: HTMLElement, options?: Options): FocusT
 }
 
 function onEscape(event: KeyboardEvent): void {
-	let element = findAncestor(event.target as HTMLElement, ATTRIBUTE_SELECTOR) as HTMLElement;
+	let element = findAncestor(event, ATTRIBUTE_SELECTOR) as HTMLElement;
 
 	let focusTrap = FOCUSTRAPS_ALL.get(element);
 
@@ -112,9 +112,7 @@ function onEscape(event: KeyboardEvent): void {
 }
 
 function onFocusIn(event: Event): void {
-	const focusTrap = FOCUSTRAPS_ALL.get(
-		findAncestor(event.target as HTMLElement, ATTRIBUTE_SELECTOR) as HTMLElement,
-	);
+	const focusTrap = FOCUSTRAPS_ALL.get(findAncestor(event, ATTRIBUTE_SELECTOR) as HTMLElement);
 
 	lastTarget = focusTrap == null ? undefined : (event.target as HTMLElement);
 }
@@ -136,11 +134,7 @@ function onKeydown(event: KeyboardEvent): void {
 
 function onPointerdown(event: MouseEvent | TouchEvent): void {
 	const lastFocusTrap = findAncestor(lastTarget as HTMLElement, ATTRIBUTE_SELECTOR) as HTMLElement;
-
-	const nextFocusTrap = findAncestor(
-		event.target as HTMLElement,
-		ATTRIBUTE_SELECTOR,
-	) as HTMLElement;
+	const nextFocusTrap = findAncestor(event, ATTRIBUTE_SELECTOR) as HTMLElement;
 
 	if (lastFocusTrap != null && nextFocusTrap !== lastFocusTrap) {
 		if (FOCUSTRAPS_ALL.get(lastFocusTrap)?.contain ?? false) {
@@ -162,7 +156,7 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 }
 
 function onTab(event: KeyboardEvent): void {
-	const element = findAncestor(event.target as HTMLElement, ATTRIBUTE_SELECTOR) as HTMLElement;
+	const element = findAncestor(event, ATTRIBUTE_SELECTOR) as HTMLElement;
 
 	const focusTrap = FOCUSTRAPS_ALL.get(element);
 

package/src/js/focus-trap/standalone.ts

@@ -1,4 +1,4 @@
-import {attributable} from '../attributable';
+import {attributable} from '../internal/attributable';
 import {createFocusTrap, FOCUS_TRAP_SELECTOR, FOCUSTRAPS_ALL} from './embedded';
 
 function removeFocusTraps(element: HTMLElement): void {

package/src/js/index.ts

@@ -1,4 +1,6 @@
-export * from './focus-trap/standalone';
+import './focus-trap/standalone';
+import './movable';
 export * from './popover';
+import './sortable';
 export * from './splitter';
 export * from './tooltip';

package/src/js/{attributable.ts → internal/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);
+		}
 	}
 }