@oscarpalmer/oui 0.30.0 → 0.31.0

package/dist/js/focus-trap/focus-trap.embedded.mjs

@@ -1,7 +1,7 @@
 import { attributable } from "../internal/attributable.mjs";
 import { clamp } from "@oscarpalmer/atoms/number";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { on } from "@oscarpalmer/toretto/event";
+import { dispatch, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
@@ -172,10 +172,9 @@ function onTab(event) {
 	const element = findAncestor(event, SELECTOR);
 	const instance = instances.get(element);
 	if (instance == null) return;
-	const dispatch = new CustomEvent("focus-trap:tab", { cancelable: true });
-	element.dispatchEvent(dispatch);
+	const dispatched = dispatch(element, "focus-trap");
 	setTimeout(() => {
-		if (dispatch.defaultPrevented) return;
+		if (dispatched.defaultPrevented) return;
 		if (!instance.disabled) event.preventDefault();
 		const elements = getFocusable(element);
 		const index = elements.indexOf(event.target);

package/dist/js/internal/draggable.mjs

@@ -130,16 +130,12 @@ function onPointerdown(event) {
 	};
 	globals.offset = item.state.options.position.getOffset(globals, item, element, position);
 	globals.original = item.state.options.position.getOriginal(globals, item, position);
-	const dispatch = new CustomEvent(`${item.state.name}:begin`, {
-		detail: {
-			element,
-			position: { ...globals.original }
-		},
-		cancelable: true
-	});
-	item.state.element.dispatchEvent(dispatch);
+	const dispatched = dispatch(item.state.element, `${item.state.name}:begin`, { detail: {
+		element,
+		position: { ...globals.original }
+	} });
 	setTimeout(() => {
-		if (dispatch.defaultPrevented) {
+		if (dispatched.defaultPrevented) {
 			item.state.options.drag.onCancel?.(globals, item);
 			reset();
 			return;
@@ -165,13 +161,9 @@ function onPointermove(event) {
 		calculated: next,
 		original: position
 	});
-	const dispatch = new CustomEvent(`${current.state.name}:move`, {
-		detail,
-		cancelable: true
-	});
-	current.state.element.dispatchEvent(dispatch);
+	const dispatched = dispatch(current.state.element, `${current.state.name}:move`, { detail });
 	setTimeout(() => {
-		if (dispatch.defaultPrevented) cancelDrag(current);
+		if (dispatched.defaultPrevented) cancelDrag(current);
 	});
 }
 function onPointerup(event) {

package/dist/js/menu.mjs

@@ -2,7 +2,7 @@ import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/
 import { attributable } from "./internal/attributable.mjs";
 import { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, getNavigable, updateNavigableFocus } from "./internal/navigable.mjs";
 import { setAria, setRole } from "@oscarpalmer/toretto/aria";
-import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 //#region src/js/menu.ts
@@ -104,7 +104,10 @@ function initializeMenu(menu) {
 		expanded: "false",
 		haspopup: "menu"
 	});
-	setAttribute(menu.content, "tabindex", "-1");
+	setAttributes(menu.content, {
+		popover: "",
+		tabindex: "-1"
+	});
 	setRole(menu.content, "menu");
 }
 function onDeactivate(_, navigable) {

package/dist/js/movable/movable.embedded.mjs

@@ -1,7 +1,7 @@
 import { attributable } from "../internal/attributable.mjs";
 import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { getPosition, on } from "@oscarpalmer/toretto/event";
+import { dispatch, getPosition, on } from "@oscarpalmer/toretto/event";
 import { getStyles, setStyle, setStyles } from "@oscarpalmer/toretto/style";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/movable/movable.embedded.ts
@@ -110,16 +110,12 @@ function onEnd(event, globals, item, reset) {
 	}
 	const container = state.container?.getBoundingClientRect();
 	if (container != null) setOffset(state, container);
-	const end = new CustomEvent("movable:end", {
-		detail: {
-			from: { ...globals.original },
-			to: getPosition(event)
-		},
-		cancelable: true
-	});
-	state.element.dispatchEvent(end);
+	const dispatched = dispatch(state.element, "movable:end", { detail: {
+		from: { ...globals.original },
+		to: getPosition(event)
+	} });
 	setTimeout(() => {
-		if (end.defaultPrevented) onCancel(globals, item);
+		if (dispatched.defaultPrevented) onCancel(globals, item);
 		reset();
 	});
 }

package/dist/js/resizable/resizable.embedded.mjs

@@ -18,7 +18,6 @@ var OuiResizable = class {
 	}
 	set() {
 		const [width, height] = getAndSetDimensions(this.#state.element, this.#state.options);
-		console.log("set", width, height);
 		this.#state.width = width;
 		this.#state.height = height;
 	}
@@ -131,10 +130,9 @@ function onPointerdown(event) {
 	const position = getPosition(event);
 	if (stored == null || position == null) return;
 	if (supportsTouch.value) event.preventDefault();
-	const dispatch = new CustomEvent("resizable:begin", { cancelable: true });
-	element.dispatchEvent(dispatch);
+	const dispatched = dispatch(element, "resizable:begin");
 	setTimeout(() => {
-		if (dispatch.defaultPrevented) return;
+		if (dispatched.defaultPrevented) return;
 		current = stored;
 		start = position;
 		current.state.styles.set();
@@ -151,24 +149,19 @@ function onPointermove(event) {
 		height,
 		width
 	});
-	const dispatch = new CustomEvent("resizable:resize", {
-		cancelable: true,
-		detail: {
-			height,
-			width
-		}
-	});
-	current.state.element.dispatchEvent(dispatch);
+	const dispatched = dispatch(current.state.element, "resizable:resize", { detail: {
+		height,
+		width
+	} });
 	setTimeout(() => {
-		if (dispatch.defaultPrevented) cancelResize(current);
+		if (dispatched.defaultPrevented) cancelResize(current);
 	});
 }
 function onPointerup() {
 	if (current == null) return;
-	const dispatch = new CustomEvent("resizable:end", { cancelable: true });
-	current.state.element.dispatchEvent(dispatch);
+	const dispatched = dispatch(current.state.element, "resizable:end");
 	setTimeout(() => {
-		if (current == null || dispatch.defaultPrevented) {
+		if (current == null || dispatched.defaultPrevented) {
 			cancelResize(current);
 			return;
 		}

package/dist/js/sortable/sortable.embedded.mjs

@@ -2,7 +2,7 @@ import { attributable } from "../internal/attributable.mjs";
 import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
 import { getAttribute, setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
 import { createElement } from "@oscarpalmer/toretto/create";
-import { getPosition } from "@oscarpalmer/toretto/event";
+import { dispatch, getPosition } from "@oscarpalmer/toretto/event";
 import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
 import { setStyle } from "@oscarpalmer/toretto/style";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
@@ -35,7 +35,7 @@ function afterEnd(insert, from, events, elements, position, valid) {
 	elements.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
 	from.state.origin = void 0;
 	resetPlaceholders();
-	if (!valid || events.some((event) => event.defaultPrevented)) return;
+	if (!valid || events.some((event) => event?.defaultPrevented)) return;
 	if (insert !== "insert") {
 		elements.target.append(elements.origin);
 		return;
@@ -130,12 +130,11 @@ function onEnd(event, globals, item, reset) {
 		bubbles: false,
 		cancelable: true
 	};
-	const fromEvent = new CustomEvent("sortable:end", options);
-	const toEvent = new CustomEvent("sortable:end", options);
-	item.instance.element.dispatchEvent(fromEvent);
-	if (item.instance !== toInstance) toInstance?.element.dispatchEvent(toEvent);
+	const dispatchedFrom = dispatch(item.instance.element, "sortable:end", options);
+	let dispatchedTo;
+	if (item.instance !== toInstance && toInstance != null) dispatchedTo = dispatch(toInstance.element, "sortable:end", options);
 	setTimeout(() => {
-		afterEnd(insert, item, [fromEvent, toEvent], {
+		afterEnd(insert, item, [dispatchedFrom, dispatchedTo], {
 			origin,
 			target: element
 		}, position, valid);
@@ -193,27 +192,23 @@ function setPlaceholder(state, item, origin) {
 	const element = getDragPlaceholder();
 	placeholder.drag.default.innerHTML = "";
 	updatePlaceholder(item, element);
-	const event = new CustomEvent("sortable:placeholder", {
-		cancelable: true,
-		detail: {
-			origin,
-			parent: item.state.element,
-			placeholder: element,
-			create: (value) => {
-				if (!isHTMLOrSVGElement(value)) return;
-				const element = value;
-				placeholder.drag.custom = element;
-				updatePlaceholder(item, element);
-				state.element = {
-					rectangle: element.getBoundingClientRect(),
-					node: element
-				};
-			}
+	const dispatched = dispatch(item.instance.element, "sortable:placeholder", { detail: {
+		origin,
+		parent: item.state.element,
+		placeholder: element,
+		create: (value) => {
+			if (!isHTMLOrSVGElement(value)) return;
+			const element = value;
+			placeholder.drag.custom = element;
+			updatePlaceholder(item, element);
+			state.element = {
+				rectangle: element.getBoundingClientRect(),
+				node: element
+			};
 		}
-	});
-	item.instance.element.dispatchEvent(event);
+	} });
 	setTimeout(() => {
-		if (!event.defaultPrevented && placeholder.drag.custom == null) placeholder.drag.default?.append(element.cloneNode(true));
+		if (!dispatched.defaultPrevented && placeholder.drag.custom == null) placeholder.drag.default?.append(element.cloneNode(true));
 		document.body.append(placeholder.drag.custom ?? placeholder.drag.default ?? "");
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.30.0",
+	"version": "0.31.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -95,10 +95,10 @@
 	},
 	"dependencies": {
 		"@oscarpalmer/atoms": "^0.188.1",
-		"@oscarpalmer/toretto": "^0.47.3"
+		"@oscarpalmer/toretto": "^0.48.0"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.74",
+		"@oxlint/plugins": "^1.75",
 		"@vitest/coverage-istanbul": "^4.1",
 		"autoprefixer": "^10.5",
 		"concurrently": "^10",

package/src/css/badge.scss

@@ -4,24 +4,7 @@
 
 .oui {
 	:where(&-pill, &-tag) {
-		--oui-shadow-mixed: color-mix(
-			in oklab,
-			var(--oui-shadow, var(--oui-gray-6)),
-			transparent 92.5%
-		);
-
-		@include mixins.shadow(var(--oui-shadow-mixed));
-
-		display: inline-flex;
-		flex-flow: row nowrap;
-		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;
+		@include mixins.badge;
 	}
 
 	:where(&-pill) {

package/src/css/combobox.scss

@@ -2,7 +2,48 @@
 
 @use './mixins.scss' as mixins;
 
+[oui-combobox-anchor] {
+	:where(&) {
+		@include mixins.input;
+
+		--oui-background-value: var(--oui-absolute);
+
+		padding: 0.5em 2em .5em 0.75em;
+		border-radius: 0.25em;
+		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
+		background-position: right .5em center;
+		background-repeat: no-repeat;
+		background-size: 1em;
+	}
+
+	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus),
+	:where([oui-combobox]:focus-within &:not([disabled], [readonly], [aria-disabled='true' i])) {
+		@include mixins.input-focus;
+	}
+
+	@media (hover: hover) {
+		:where(:not([disabled], [readonly], [aria-disabled='true' i]) &:hover) {
+			@include mixins.input-hover;
+		}
+	}
+
+	:where(:is([disabled], [readonly], [aria-disabled='true' i]) &) {
+		--oui-foreground-percentage: 25%;
+
+		font-style: italic;
+	}
+
+	:where(:is([disabled], [readonly], [aria-disabled='true' i]) &:focus) {
+		--oui-outline-percentage: 75%;
+	}
+
+	:where(:is([disabled], [aria-disabled='true' i]) &) {
+		--oui-background-percentage: 50%;
+	}
+}
+
 :where([oui-combobox-content]) {
+	@include mixins.floatable;
 	@include mixins.shadow-overlay;
 
 	width: fit-content;
@@ -11,16 +52,86 @@
 	max-height: max(25vh, 32rem);
 	min-width: var(--oui-combobox-width, auto);
 	flex-flow: column nowrap;
+	border-radius: 0.25em;
 
 	&:popover-open {
 		display: flex !important;
 	}
 }
 
+:where([oui-combobox-empty]) {
+	padding: 1em;
+	text-align: center;
+	font-style: italic;
+}
+
 :where([oui-combobox-list]) {
 	overflow: auto;
 }
 
-:where([oui-combobox-option]) {
-	cursor: pointer;
+[oui-combobox-option] {
+	:where(&) {
+		padding: 0.5em 0.75em;
+		outline: 4px solid transparent;
+		outline-offset: -4px;
+		line-height: 1.25;
+		cursor: pointer;
+		transition: .125s ease-in-out;
+	}
+
+	:where(&[aria-selected='true' i]) {
+		background-color: var(--oui-blue-3);
+		color: var(--oui-blue-9);
+	}
+
+	:where(oui-combobox[multiple] &[aria-selected='true' i])::before {
+		content: '✓';
+		margin: 0 0.75em 0 0;
+	}
+
+	:where(oui-combobox:not([disabled], [readonly], [aria-disabled='true' i]) &) {
+		@media (hover: hover) {
+			:where(&:hover) {
+				background-color: var(--oui-blue-1);
+				color: var(--oui-blue-8);
+			}
+		}
+	}
+}
+
+:where([oui-combobox-option-active]) {
+	background-color: var(--oui-blue-1);
+	outline-color: var(--oui-blue-4);
+	color: var(--oui-blue-8);
+}
+
+:where([oui-combobox-selection]) {
+	max-height: 8rem;
+	display: flex;
+	padding: .5em;
+	margin: -.5em -.5em -.5em -.75em;
+	flex-flow: row wrap;
+	gap: 0.5em;
+	overflow: auto;
+	list-style: none;
+}
+
+[oui-combobox-selection-item] {
+	:where(&) {
+		@include mixins.badge;
+
+		border-radius: 3em;
+		padding: 0.5em 1em;
+		gap: .75em;
+		font-size: .875em;
+		transition: .125s ease-in-out;
+	}
+
+	@media (hover: hover) {
+		:where(oui-combobox:not([disabled], [readonly], [aria-disabled='true' i]) &:hover) {
+			--oui-background: var(--oui-red-0);
+			--oui-foreground: var(--oui-red-8);
+			--oui-shadow: var(--oui-red-6);
+		}
+	}
 }

package/src/css/form.scss

@@ -2,70 +2,6 @@
 
 @use 'mixins.scss' as mixins;
 
-@mixin focus() {
-	--oui-border-value: var(--oui-blue-5);
-	--oui-foreground-value: inherit;
-	--oui-outline-percentage: 75%;
-	--oui-outline-value: var(--oui-blue-6);
-}
-
-@mixin hover() {
-	--oui-border-value: var(--oui-blue-4);
-	--oui-foreground-percentage: 0%;
-	--oui-foreground-value: inherit;
-	--oui-outline-percentage: 90%;
-	--oui-outline-value: var(--oui-blue-6);
-}
-
-@mixin input {
-	--oui-background-percentage: 0%;
-	--oui-foreground-percentage: 0%;
-
-	@include outlined;
-
-	background-color: color-mix(
-		in oklab,
-		var(--oui-background-value),
-		transparent var(--oui-background-percentage)
-	);
-	border: 1px solid var(--oui-border-value, var(--oui-gray-3));
-	box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
-	color: color-mix(
-		in oklab,
-		var(--oui-foreground-value, inherit),
-		transparent var(--oui-foreground-percentage)
-	);
-	-webkit-text-fill-color: color-mix(
-		in oklab,
-		var(--oui-foreground-value, inherit),
-		transparent var(--oui-foreground-percentage)
-	);
-}
-
-@mixin invalid() {
-	--oui-border-value: var(--oui-red-5);
-	--oui-foreground-value: var(--oui-red-9);
-	--oui-outline-percentage: 82.5%;
-	--oui-outline-value: var(--oui-red-6);
-}
-
-@mixin outlined {
-	--oui-outline-percentage: 100%;
-	--oui-outline-value: var(--oui-blue-6);
-
-	outline: 4px solid
-		color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
-	outline-offset: 0;
-	transition: 0.125s ease-in-out;
-}
-
-@mixin valid() {
-	--oui-border-value: var(--oui-green-5);
-	--oui-foreground-value: var(--oui-green-9);
-	--oui-outline-percentage: 82.5%;
-	--oui-outline-value: var(--oui-green-6);
-}
-
 :where(.oui-fieldset) {
 	padding: 1em;
 	border: 1px solid var(--oui-gray-3);
@@ -78,7 +14,7 @@
 	}
 
 	:where(&:not([type='range' i])) {
-		@include input;
+		@include mixins.input;
 
 		padding: 0.5em 0.75em;
 		border-radius: 0.25em;
@@ -135,7 +71,7 @@
 		outline: none;
 
 		&::range-track {
-			@include input;
+			@include mixins.input;
 
 			appearance: none;
 			width: 100%;
@@ -148,7 +84,7 @@
 			--oui-background-percentage: 0%;
 			--oui-background-value: var(--oui-blue-6);
 
-			@include outlined;
+			@include mixins.input-outlined;
 
 			appearance: none;
 			width: 1.25em;
@@ -177,7 +113,7 @@
 			[aria-invalid='true' i]
 		)
 	) {
-		@include invalid;
+		@include mixins.input-invalid;
 
 		&::file-selector-button {
 			--oui-background-value: var(--oui-red-2);
@@ -190,7 +126,7 @@
 		}
 
 		&::range-track {
-			@include invalid;
+			@include mixins.input-invalid;
 		}
 
 		& > option:checked {
@@ -205,7 +141,7 @@
 			[aria-invalid='false' i]
 		)
 	) {
-		@include valid;
+		@include mixins.input-valid;
 
 		&::file-selector-button {
 			--oui-background-value: var(--oui-green-2);
@@ -214,7 +150,7 @@
 		}
 
 		&::range-track {
-			@include valid;
+			@include mixins.input-valid;
 		}
 
 		&::range-thumb {
@@ -249,7 +185,7 @@
 
 	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus),
 	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus-within) {
-		@include focus;
+		@include mixins.input-focus;
 
 		&::file-selector-button {
 			--oui-background-value: var(--oui-blue-2);
@@ -259,7 +195,7 @@
 
 		&::range-thumb,
 		&::range-track {
-			@include focus;
+			@include mixins.input-focus;
 		}
 
 		&::range-thumb {
@@ -271,7 +207,7 @@
 
 	@media (hover: hover) {
 		:where(&:not([disabled], [readonly], [aria-disabled='true' i]):hover) {
-			@include hover;
+			@include mixins.input-hover;
 
 			&::file-selector-button {
 				--oui-background-value: var(--oui-blue-2);
@@ -284,12 +220,12 @@
 			}
 
 			&::range-track {
-				@include hover;
+				@include mixins.input-hover;
 			}
 		}
 	}
 
-	:where(&[disabled], &[readonly], &[aria-disabled='true' i]) {
+	:where(&:is([disabled], [readonly], [aria-disabled='true' i])) {
 		--oui-foreground-percentage: 25%;
 
 		font-style: italic;
@@ -311,7 +247,7 @@
 		--oui-outline-percentage: 75%;
 	}
 
-	:where(&[disabled], &[aria-disabled='true' i]) {
+	:where(&:is([disabled], [aria-disabled='true' i])) {
 		--oui-background-percentage: 50%;
 
 		&::range-thumb {
@@ -383,9 +319,11 @@ select.oui-input:is([multiple]) {
 	font-weight: bold;
 }
 
-:where(.oui-label) {
-	cursor: pointer;
-	transition: 0.125s ease-in-out;
+.oui-label {
+	:where(&) {
+		cursor: pointer;
+		transition: 0.125s ease-in-out;
+	}
 
 	@media (hover: hover) {
 		:where(&[for]:hover) {