@oscarpalmer/oui 0.30.0 → 0.32.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.d.mts

@@ -1 +1 @@
-export { };
+export {}

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/dist/js/toolbar.d.mts

@@ -1 +1 @@
-export { };
+export {}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.30.0",
+	"version": "0.32.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",
@@ -106,7 +106,7 @@
 		"postcss-cli": "^11",
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",
-		"sass": "^1.101",
+		"sass": "^1.102",
 		"stylelint": "^17.14",
 		"stylelint-config-standard-scss": "^17",
 		"tsdown": "^0.22",

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,52 @@
 
 @use './mixins.scss' as mixins;
 
+[oui-combobox-anchor] {
+	:where(&) {
+		@include mixins.input;
+
+		--oui-background-value: var(--oui-absolute);
+
+		padding: 0.5em 2em 0.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 0.5em center;
+		background-repeat: no-repeat;
+		background-size: 1em;
+	}
+
+	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus),
+	:where(
+		&:not([disabled], [readonly], [aria-disabled='true' i]):has(
+			+ [oui-combobox-content]:focus-within
+		)
+	) {
+		@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 +56,161 @@
 	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-filter], [oui-combobox-header]) {
+	&::after {
+		content: '';
+		width: 100%;
+		height: 0.25em;
+		background-image: linear-gradient(to bottom, rgb(0 0 0 / 12.5%), transparent);
+		position: absolute;
+		bottom: -0.25em;
+		left: 0;
+	}
+}
+
+:where([oui-combobox-filter]) {
+	padding: 0.75em;
+	background-color: var(--oui-yellow-0);
+	border-radius: 0.25em 0.25em 0 0;
+	position: relative;
+	z-index: 1;
+}
+
+:where([oui-combobox-filter-input]) {
+	@include mixins.input;
+
+	--oui-background-value: var(--oui-absolute);
+	--oui-border-value: var(--oui-yellow-3);
+
+	width: 100%;
+	padding: 0.5em 0.75em;
+	outline-width: 0;
+	border-radius: 0.25em;
+	font-size: 0.875rem;
+
+	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus) {
+		@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-filter-label]) {
+	@include mixins.visually-hidden;
+
+	display: inline-flex;
+	position: absolute;
+}
+
+:where([oui-combobox-header]) {
+	padding: 0.5em calc(0.75em / 0.75);
+	background-color: var(--oui-gray-0);
+	font-size: 0.75em;
+	font-weight: bold;
+	position: sticky;
+	top: 0;
+	z-index: 1;
+}
+
 :where([oui-combobox-list]) {
 	overflow: auto;
+	position: relative;
+}
+
+[oui-combobox-option] {
+	:where(&) {
+		padding: 0.5em 0.75em;
+		outline: 4px solid transparent;
+		outline-offset: -4px;
+		line-height: 1.25;
+		cursor: pointer;
+		transition: 0.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: 0.5em;
+	margin: -0.5em -0.5em -0.5em -0.75em;
+	flex-flow: row wrap;
+	gap: 0.5em;
+	overflow: auto;
+	list-style: none;
 }
 
-:where([oui-combobox-option]) {
-	cursor: pointer;
+[oui-combobox-selection-item] {
+	:where(&) {
+		@include mixins.badge;
+
+		border-radius: 3em;
+		padding: 0.5em 1em;
+		gap: 0.75em;
+		font-size: 0.875em;
+		transition: 0.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);
+		}
+	}
 }